@prioticket/design-system-web 1.0.5 → 1.0.6

package/dist/prioticket-design-system-web.cjs.js

@@ -1 +1,2281 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./components/pd-button.cjs.js"),u=require("./components/pd-text-field.cjs.js"),p=require("./components/pd-card.cjs.js"),c=require("./components/pd-icon.cjs.js"),P=require("./components/pd-dialog.cjs.js"),i=require("./components/pd-expandable-card.cjs.js"),b=require("./components/pd-checkbox.cjs.js"),m=require("./components/pd-chip.cjs.js"),s=require("./components/pd-fab.cjs.js"),a=require("./components/pd-icon-button.cjs.js"),e=require("./components/pd-list.cjs.js"),l=require("./components/pd-menu.cjs.js"),g=require("./components/pd-menu-item.cjs.js"),y=require("./components/pd-progress.cjs.js"),t=require("./components/pd-radio.cjs.js"),f=require("./components/pd-select.cjs.js"),j=require("./components/pd-slider.cjs.js"),O=require("./components/pd-switch.cjs.js"),r=require("./components/pd-tabs.cjs.js"),n=require("./components/pd-segmented-button.cjs.js"),d=require("./components/pd-segmented-stepper.cjs.js"),S=require("./components/pd-stepper.cjs.js");Object.defineProperty(exports,"PdButton",{enumerable:!0,get:()=>o.PdButton});Object.defineProperty(exports,"PdTextField",{enumerable:!0,get:()=>u.PdTextField});Object.defineProperty(exports,"PdCard",{enumerable:!0,get:()=>p.PdCard});Object.defineProperty(exports,"PdIcon",{enumerable:!0,get:()=>c.PdIcon});Object.defineProperty(exports,"PdDialog",{enumerable:!0,get:()=>P.PdDialog});Object.defineProperty(exports,"PdExpandableCard",{enumerable:!0,get:()=>i.PdExpandableCard});Object.defineProperty(exports,"PdCheckbox",{enumerable:!0,get:()=>b.PdCheckbox});Object.defineProperty(exports,"PdChip",{enumerable:!0,get:()=>m.PdChip});Object.defineProperty(exports,"PdFab",{enumerable:!0,get:()=>s.PdFab});Object.defineProperty(exports,"PdIconButton",{enumerable:!0,get:()=>a.PdIconButton});Object.defineProperty(exports,"PdList",{enumerable:!0,get:()=>e.PdList});Object.defineProperty(exports,"PdListDivider",{enumerable:!0,get:()=>e.PdListDivider});Object.defineProperty(exports,"PdListItem",{enumerable:!0,get:()=>e.PdListItem});Object.defineProperty(exports,"PdMenu",{enumerable:!0,get:()=>l.PdMenu});Object.defineProperty(exports,"PdMenuItemM",{enumerable:!0,get:()=>g.PdMenuItemM});Object.defineProperty(exports,"PdProgress",{enumerable:!0,get:()=>y.PdProgress});Object.defineProperty(exports,"PdRadio",{enumerable:!0,get:()=>t.PdRadio});Object.defineProperty(exports,"PdRadioGroup",{enumerable:!0,get:()=>t.PdRadioGroup});Object.defineProperty(exports,"PdSelect",{enumerable:!0,get:()=>f.PdSelect});Object.defineProperty(exports,"PdSlider",{enumerable:!0,get:()=>j.PdSlider});Object.defineProperty(exports,"PdSwitch",{enumerable:!0,get:()=>O.PdSwitch});Object.defineProperty(exports,"PdTab",{enumerable:!0,get:()=>r.PdTab});Object.defineProperty(exports,"PdTabs",{enumerable:!0,get:()=>r.PdTabs});Object.defineProperty(exports,"PdSegmentItem",{enumerable:!0,get:()=>n.PdSegmentItem});Object.defineProperty(exports,"PdSegmentedButton",{enumerable:!0,get:()=>n.PdSegmentedButton});Object.defineProperty(exports,"PdSegmentedStepper",{enumerable:!0,get:()=>d.PdSegmentedStepper});Object.defineProperty(exports,"PdStepperItem",{enumerable:!0,get:()=>d.PdStepperItem});Object.defineProperty(exports,"PdStepper",{enumerable:!0,get:()=>S.PdStepper});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),o=require("lit/decorators.js");require("@material/web/button/filled-button.js");require("@material/web/button/outlined-button.js");require("@material/web/button/text-button.js");require("@material/web/button/elevated-button.js");require("@material/web/button/filled-tonal-button.js");require("@material/web/icon/icon.js");const B=require("lit/static-html.js");require("@material/web/textfield/filled-text-field.js");require("@material/web/textfield/outlined-text-field.js");require("@material/web/dialog/dialog.js");require("@material/web/iconbutton/icon-button.js");const L=require("lit/directives/if-defined.js");require("@material/web/checkbox/checkbox.js");require("@material/web/chips/assist-chip.js");require("@material/web/chips/filter-chip.js");require("@material/web/chips/input-chip.js");require("@material/web/chips/suggestion-chip.js");require("@material/web/fab/fab.js");require("@material/web/fab/branded-fab.js");require("@material/web/iconbutton/filled-icon-button.js");require("@material/web/iconbutton/filled-tonal-icon-button.js");require("@material/web/iconbutton/outlined-icon-button.js");require("@material/web/list/list.js");require("@material/web/list/list-item.js");require("@material/web/divider/divider.js");require("@material/web/menu/menu.js");require("@material/web/menu/menu-item.js");require("@material/web/progress/circular-progress.js");require("@material/web/progress/linear-progress.js");require("@material/web/radio/radio.js");require("@material/web/select/filled-select.js");require("@material/web/select/outlined-select.js");require("@material/web/select/select-option.js");require("@material/web/slider/slider.js");require("@material/web/switch/switch.js");require("@material/web/tabs/tabs.js");require("@material/web/tabs/primary-tab.js");require("@material/web/tabs/secondary-tab.js");const O=require("lit/directives/class-map.js");var z=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdButton=class extends s.LitElement{constructor(){super(...arguments),this.variant="filled",this.size="medium",this.icon="",this.iconTrailing=!1,this.disabled=!1}getButtonTemplate(){const e=this.iconTrailing?"trailing-icon":"icon",t=this.icon?s.html`<md-icon slot="${e}">${this.icon}</md-icon>`:"",r=s.html`${this.iconTrailing?"":t}<slot></slot>${this.iconTrailing?t:""}`;switch(this.variant){case"outlined":return s.html`<md-outlined-button ?disabled=${this.disabled}>${r}</md-outlined-button>`;case"text":return s.html`<md-text-button ?disabled=${this.disabled}>${r}</md-text-button>`;case"elevated":return s.html`<md-elevated-button ?disabled=${this.disabled}>${r}</md-elevated-button>`;case"tonal":return s.html`<md-filled-tonal-button ?disabled=${this.disabled}>${r}</md-filled-tonal-button>`;default:return s.html`<md-filled-button ?disabled=${this.disabled}>${r}</md-filled-button>`}}render(){return this.getButtonTemplate()}};exports.PdButton.styles=s.css`
+    :host {
+      display: inline-flex;
+      /* We set a default shape for ALL Prioticket buttons. */
+      --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-filled-tonal-button-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    /* We target the inner Material Web buttons to apply our specific styles. */
+    md-filled-button,
+    md-outlined-button,
+    md-text-button,
+    md-elevated-button,
+    md-filled-tonal-button {
+      width: 100%;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* --- Size Variant Logic --- */
+    :host([size='xsmall']) md-filled-button,
+    :host([size='xsmall']) md-outlined-button,
+    :host([size='xsmall']) md-text-button,
+    :host([size='xsmall']) md-elevated-button,
+    :host([size='xsmall']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-xsmall, 1.75rem);
+      font-size: var(--md-sys-typescale-label-small-size);
+      font-weight: var(--md-sys-typescale-label-small-weight);
+    }
+
+    :host([size='small']) md-filled-button,
+    :host([size='small']) md-outlined-button,
+    :host([size='small']) md-text-button,
+    :host([size='small']) md-elevated-button,
+    :host([size='small']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+      font-size: var(--md-sys-typescale-label-medium-size);
+      font-weight: var(--md-sys-typescale-label-medium-weight);
+    }
+
+    :host([size='medium']) md-filled-button,
+    :host([size='medium']) md-outlined-button,
+    :host([size='medium']) md-text-button,
+    :host([size='medium']) md-elevated-button,
+    :host([size='medium']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+      font-size: var(--md-sys-typescale-label-large-size);
+      font-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    :host([size='large']) md-filled-button,
+    :host([size='large']) md-outlined-button,
+    :host([size='large']) md-text-button,
+    :host([size='large']) md-elevated-button,
+    :host([size='large']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+      font-size: var(--md-sys-typescale-title-small-size);
+      font-weight: var(--md-sys-typescale-title-small-weight);
+    }
+    
+    :host([size='xlarge']) md-filled-button,
+    :host([size='xlarge']) md-outlined-button,
+    :host([size='xlarge']) md-text-button,
+    :host([size='xlarge']) md-elevated-button,
+    :host([size='xlarge']) md-filled-tonal-button {
+      --md-filled-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-outlined-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-text-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-elevated-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      --md-filled-tonal-button-container-height: var(--md-sys-button-container-height-xlarge, 3.5rem);
+      font-size: var(--md-sys-typescale-title-medium-size);
+      font-weight: var(--md-sys-typescale-title-medium-weight);
+    }
+
+    /* --- Icon Logic --- */
+    /* The ::slotted selector allows us to style content passed into the slot */
+    ::slotted(span) {
+      display: inline-block;
+    }
+  `;z([o.property({type:String})],exports.PdButton.prototype,"variant",void 0);z([o.property({type:String,reflect:!0})],exports.PdButton.prototype,"size",void 0);z([o.property({type:String})],exports.PdButton.prototype,"icon",void 0);z([o.property({type:Boolean,attribute:"icon-trailing"})],exports.PdButton.prototype,"iconTrailing",void 0);z([o.property({type:Boolean,reflect:!0})],exports.PdButton.prototype,"disabled",void 0);exports.PdButton=z([o.customElement("pd-button")],exports.PdButton);var c=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdTextField=class extends s.LitElement{constructor(){super(...arguments),this.variant="outlined",this.label="",this.placeholder="",this.value="",this.supportingText="",this.errorText="",this.prefixText="",this.suffixText="",this.disabled=!1,this.readonly=!1,this.required=!1,this.error=!1,this.type="text",this.rows=2,this.cols=20,this.leadingIcon="",this.trailingIcon=""}getTextFieldTemplate(){const e=this.leadingIcon?s.html`<md-icon slot="leadingicon">${this.leadingIcon}</md-icon>`:"",t=this.trailingIcon?s.html`<md-icon slot="trailingicon">${this.trailingIcon}</md-icon>`:"",r=s.html`${e}${t}`,a={label:this.label||"",placeholder:this.placeholder||"",value:this.value||"","supporting-text":this.supportingText||"","error-text":this.errorText||"","prefix-text":this.prefixText||"","suffix-text":this.suffixText||"",disabled:this.disabled,required:this.required,error:this.error,maxlength:this.maxlength,minlength:this.minlength};if(this.type==="textarea"){const i=this.variant==="filled"?"md-filled-text-field":"md-outlined-text-field",n=B.unsafeStatic(i);return B.html`
+        <${n}
+          type="textarea"
+          rows=${this.rows}
+          cols=${this.cols}
+          .label=${a.label}
+          .placeholder=${a.placeholder}
+          .value=${a.value}
+          supporting-text=${a["supporting-text"]}
+          error-text=${a["error-text"]}
+          prefix-text=${a["prefix-text"]}
+          suffix-text=${a["suffix-text"]}
+          maxlength=${a.maxlength||s.nothing}
+          minlength=${a.minlength||s.nothing}
+          ?disabled=${a.disabled}
+          ?required=${a.required}
+          ?error=${a.error}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${r}
+        </${n}>
+      `}else return this.variant==="filled"?s.html`
+        <md-filled-text-field
+          type=${this.type||"text"}
+          .label=${a.label}
+          .placeholder=${a.placeholder}
+          .value=${a.value}
+          supporting-text=${a["supporting-text"]}
+          error-text=${a["error-text"]}
+          prefix-text=${a["prefix-text"]}
+          suffix-text=${a["suffix-text"]}
+          ?disabled=${a.disabled}
+          ?required=${a.required}
+          ?error=${a.error}
+          maxlength=${a.maxlength||s.nothing}
+          minlength=${a.minlength||s.nothing}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${r}
+        </md-filled-text-field>
+      `:s.html`
+        <md-outlined-text-field
+          type=${this.type||"text"}
+          .label=${a.label}
+          .placeholder=${a.placeholder}
+          .value=${a.value}
+          supporting-text=${a["supporting-text"]}
+          error-text=${a["error-text"]}
+          prefix-text=${a["prefix-text"]}
+          suffix-text=${a["suffix-text"]}
+          ?disabled=${a.disabled}
+          ?required=${a.required}
+          ?error=${a.error}
+          maxlength=${a.maxlength||s.nothing}
+          minlength=${a.minlength||s.nothing}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${r}
+        </md-outlined-text-field>
+      `}render(){return this.getTextFieldTemplate()}_handleInput(e){const t=e.target;this.value=t.value,this.dispatchEvent(new CustomEvent("input",{detail:{value:t.value},bubbles:!0}))}_handleChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:t.value},bubbles:!0}))}};exports.PdTextField.styles=s.css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Set default shape for ALL Prioticket text fields */
+      --md-filled-text-field-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    md-filled-text-field,
+    md-outlined-text-field {
+      width: 100%;
+      display: block;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Textarea specific styling */
+    md-filled-text-field[type="textarea"],
+    md-outlined-text-field[type="textarea"] {
+      min-height: 100px;
+      resize: vertical;
+    }
+  `;c([o.property({type:String})],exports.PdTextField.prototype,"variant",void 0);c([o.property({type:String})],exports.PdTextField.prototype,"label",void 0);c([o.property({type:String})],exports.PdTextField.prototype,"placeholder",void 0);c([o.property({type:String})],exports.PdTextField.prototype,"value",void 0);c([o.property({type:String,attribute:"supporting-text"})],exports.PdTextField.prototype,"supportingText",void 0);c([o.property({type:String,attribute:"error-text"})],exports.PdTextField.prototype,"errorText",void 0);c([o.property({type:String,attribute:"prefix-text"})],exports.PdTextField.prototype,"prefixText",void 0);c([o.property({type:String,attribute:"suffix-text"})],exports.PdTextField.prototype,"suffixText",void 0);c([o.property({type:Boolean})],exports.PdTextField.prototype,"disabled",void 0);c([o.property({type:Boolean})],exports.PdTextField.prototype,"readonly",void 0);c([o.property({type:Boolean})],exports.PdTextField.prototype,"required",void 0);c([o.property({type:Boolean})],exports.PdTextField.prototype,"error",void 0);c([o.property({type:String})],exports.PdTextField.prototype,"type",void 0);c([o.property({type:Number})],exports.PdTextField.prototype,"rows",void 0);c([o.property({type:Number})],exports.PdTextField.prototype,"cols",void 0);c([o.property({type:String})],exports.PdTextField.prototype,"leadingIcon",void 0);c([o.property({type:String})],exports.PdTextField.prototype,"trailingIcon",void 0);c([o.property({type:Number})],exports.PdTextField.prototype,"maxlength",void 0);c([o.property({type:Number})],exports.PdTextField.prototype,"minlength",void 0);exports.PdTextField=c([o.customElement("pd-text-field")],exports.PdTextField);var T=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdCard=class extends s.LitElement{constructor(){super(...arguments),this.variant="elevated",this.clickable=!1}render(){const e=`card ${this.variant}${this.clickable?" clickable":""}`;return s.html`
+      <div class="${e}" @click=${this.clickable?this._handleClick:void 0}>
+        <slot></slot>
+      </div>
+    `}_handleClick(){this.clickable&&this.dispatchEvent(new CustomEvent("click",{bubbles:!0,composed:!0}))}};exports.PdCard.styles=s.css`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .card {
+      border-radius: var(--md-sys-shape-corner-small, 5px);
+      padding: 16px;
+      transition: all 0.2s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .card.elevated {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      box-shadow: 
+        0px 1px 2px rgba(0, 0, 0, 0.3),
+        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+    }
+
+    .card.filled {
+      background: var(--md-sys-color-surface-variant, #f3f3f3);
+      color: var(--md-sys-color-on-surface-variant, #000000);
+    }
+
+    .card.outlined {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      border: 1px solid var(--md-sys-color-outline, #cccccc);
+    }
+
+    .card.clickable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .card.clickable:hover {
+      filter: brightness(0.95);
+    }
+
+    .card.clickable.elevated:hover {
+      box-shadow: 
+        0px 2px 6px 2px rgba(0, 0, 0, 0.15),
+        0px 1px 2px rgba(0, 0, 0, 0.3);
+    }
+
+    .card.clickable:active {
+      filter: brightness(0.9);
+    }
+
+    /* Material Web Components will use --md-* design tokens directly */
+    /* Tokens will be provided by separate theme file with --md-* naming */
+  `;T([o.property({type:String})],exports.PdCard.prototype,"variant",void 0);T([o.property({type:Boolean})],exports.PdCard.prototype,"clickable",void 0);exports.PdCard=T([o.customElement("pd-card")],exports.PdCard);var I=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdIcon=class extends s.LitElement{constructor(){super(...arguments),this.name="",this.size="medium",this.variant="filled"}render(){return s.html`
+      <md-icon class="icon ${this.size}">
+        ${this.name}
+      </md-icon>
+    `}};exports.PdIcon.styles=s.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .icon {
+      color: var(--md-sys-color-on-surface, #000000);
+      transition: color var(--md-sys-transition-duration, 0.2s) ease;
+      user-select: none;
+    }
+    
+    .icon.small {
+      font-size: var(--md-sys-icon-size-small, 18px);
+      width: var(--md-sys-icon-size-small, 18px);
+      height: var(--md-sys-icon-size-small, 18px);
+    }
+    
+    .icon.medium {
+      font-size: var(--md-sys-icon-size-medium, 24px);
+      width: var(--md-sys-icon-size-medium, 24px);
+      height: var(--md-sys-icon-size-medium, 24px);
+    }
+    
+    .icon.large {
+      font-size: var(--md-sys-icon-size-large, 32px);
+      width: var(--md-sys-icon-size-large, 32px);
+      height: var(--md-sys-icon-size-large, 32px);
+    }
+
+    /* Clickable state */
+    :host([clickable]) .icon {
+      cursor: pointer;
+      border-radius: var(--md-sys-shape-corner-small, 4px);
+      padding: var(--md-sys-padding-200, 8px);
+      transition: background-color var(--md-sys-transition-duration, 0.2s) ease, color var(--md-sys-transition-duration, 0.2s) ease;
+    }
+
+    :host([clickable]) .icon:hover {
+      background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));
+    }
+
+    :host([clickable]) .icon:active {
+      background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.12));
+    }
+
+    /* Color variants */
+    :host([color="primary"]) .icon {
+      color: var(--md-sys-color-primary, #6750a4);
+    }
+
+    :host([color="secondary"]) .icon {
+      color: var(--md-sys-color-secondary, #625b71);
+    }
+
+    :host([color="error"]) .icon {
+      color: var(--md-sys-color-error, #ba1a1a);
+    }
+
+    :host([color="success"]) .icon {
+      color: var(--md-sys-color-tertiary, #7d5260);
+    }
+
+    /* Material Web Components will use --md-* design tokens directly */
+    /* Tokens will be provided by separate theme file with --md-* naming */
+  `;I([o.property({type:String})],exports.PdIcon.prototype,"name",void 0);I([o.property({type:String})],exports.PdIcon.prototype,"size",void 0);I([o.property({type:String})],exports.PdIcon.prototype,"variant",void 0);exports.PdIcon=I([o.customElement("pd-icon")],exports.PdIcon);var $=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdDialog=class extends s.LitElement{constructor(){super(...arguments),this.open=!1,this.size="medium",this.variant="custom",this.headline="",this.primaryAction="",this.secondaryAction="",this.closableByBackdrop=!0,this.showCloseButton=!1}openDialog(){this.open=!0,this.dialogElement?.show?.()}closeDialog(){this.open=!1,this.dialogElement?.close?.()}toggle(){this.open?this.closeDialog():this.openDialog()}handleDialogOpen(){this.open=!0,this.dispatchEvent(new CustomEvent("open",{detail:{dialog:this},bubbles:!0}))}handleDialogClose(){this.open=!1,this.dispatchEvent(new CustomEvent("closed",{detail:{dialog:this},bubbles:!0}))}handlePrimaryAction(){this.dispatchEvent(new CustomEvent("primary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}handleSecondaryAction(){this.dispatchEvent(new CustomEvent("secondary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}render(){return s.html`
+      <md-dialog
+        ?open=${this.open}
+        ?no-focus-trap=${!this.closableByBackdrop}
+        @open=${this.handleDialogOpen}
+        @closed=${this.handleDialogClose}
+        @cancel=${e=>{this.closableByBackdrop||e.preventDefault()}}
+      >
+        ${this.headline||this.showCloseButton?s.html`
+          <div slot="headline" class="headline-container">
+            ${this.headline?s.html`<span class="headline-text">${this.headline}</span>`:""}
+            ${this.showCloseButton?s.html`
+              <md-text-button
+                class="close-button"
+                @click=${this.closeDialog}
+                aria-label="Close dialog"
+              >
+                <md-icon slot="icon">close</md-icon>
+              </md-text-button>
+            `:""}
+          </div>
+        `:""}
+
+        <div slot="content" class="content-container">
+          <slot></slot>
+        </div>
+
+        ${this.primaryAction||this.secondaryAction?s.html`
+          <div slot="actions" class="actions-container">
+            ${this.secondaryAction?s.html`
+              <md-text-button
+                class="secondary-action"
+                @click=${this.handleSecondaryAction}
+              >
+                ${this.secondaryAction}
+              </md-text-button>
+            `:""}
+            ${this.primaryAction?s.html`
+              <md-filled-button
+                class="primary-action"
+                @click=${this.handlePrimaryAction}
+              >
+                ${this.primaryAction}
+              </md-filled-button>
+            `:""}
+            <slot name="actions"></slot>
+          </div>
+        `:s.html`<slot name="actions" slot="actions"></slot>`}
+      </md-dialog>
+    `}};exports.PdDialog.styles=s.css`
+    :host {
+      /* Set default shape for ALL Prioticket dialogs to match card styling */
+      --md-dialog-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    md-dialog {
+      /* Dialog transitions and animations */
+      transition: all 200ms ease-in-out;
+      
+      /* Material Web dialog customization */
+      --md-dialog-headline-color: var(--md-sys-color-on-surface);
+      --md-dialog-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      --md-dialog-container-color: var(--md-sys-color-surface);
+    }
+
+    .headline-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--md-sys-spacing-400, 16px);
+      width: 100%;
+    }
+
+    .headline-text {
+      font-family: var(--md-sys-typescale-headline-small-font);
+      font-size: var(--md-sys-typescale-headline-small-size);
+      font-weight: var(--md-sys-typescale-headline-small-weight);
+      line-height: var(--md-sys-typescale-headline-small-line-height);
+      color: var(--md-sys-color-on-surface);
+      flex: 1;
+    }
+
+    .close-button {
+      flex-shrink: 0;
+      --md-text-button-label-text-size: 0; /* Hide text, show only icon */
+    }
+
+    .content-container {
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .actions-container {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      align-items: center;
+    }
+
+    /* --- Size Variants --- */
+    :host([size='small']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-small, 320px);
+    }
+
+    :host([size='medium']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-medium, 560px);
+    }
+
+    :host([size='large']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-large, 800px);
+    }
+
+    :host([size='fullscreen']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-fullscreen, 100vw);
+      --md-dialog-container-max-height: var(--md-sys-dialog-container-max-height-fullscreen, 100vh);
+      --md-dialog-container-inset-block-start: 0;
+      --md-dialog-container-inset-inline-start: 0;
+      --md-dialog-container-inset-inline-end: 0;
+      --md-dialog-container-inset-block-end: 0;
+    }
+
+    /* --- Variant Styles --- */
+    :host([variant='alert']) .content-container {
+      padding: var(--md-sys-padding-200, 8px) 0;
+    }
+
+    :host([variant='confirm']) .actions-container {
+      gap: var(--md-sys-spacing-300, 12px);
+    }
+
+    :host([variant='form']) .content-container {
+      padding: var(--md-sys-padding-400, 16px) 0;
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      md-dialog {
+        --md-dialog-container-inset-inline-start: var(--md-sys-spacing-400, 16px);
+        --md-dialog-container-inset-inline-end: var(--md-sys-spacing-400, 16px);
+      }
+
+      :host([size='small']) md-dialog,
+      :host([size='medium']) md-dialog,
+      :host([size='large']) md-dialog {
+        --md-dialog-container-max-width: calc(100vw - var(--md-sys-spacing-800, 32px));
+      }
+
+      :host([size='fullscreen']) md-dialog {
+        --md-dialog-container-inset-inline-start: 0;
+        --md-dialog-container-inset-inline-end: 0;
+      }
+
+      .actions-container {
+        flex-direction: column-reverse;
+        gap: var(--md-sys-spacing-200, 8px);
+      }
+
+      .actions-container md-filled-button,
+      .actions-container md-text-button {
+        width: var(--md-sys-dialog-action-button-width-mobile, 100%);
+        --md-filled-button-container-width: var(--md-sys-dialog-action-button-width-mobile, 100%);
+        --md-text-button-container-width: var(--md-sys-dialog-action-button-width-mobile, 100%);
+      }
+    }
+
+    /* Enhanced Material Web styling */
+    md-dialog::part(scrim) {
+      --md-dialog-scrim-opacity: 0.32;
+    }
+
+    /* Button styling to match pd-button component */
+    .primary-action,
+    .secondary-action,
+    .close-button {
+      /* Apply same border radius as pd-button component */
+      --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+      /* Smooth transitions like pd-button */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Focus and interaction states */
+    .primary-action {
+      --md-filled-button-hover-state-layer-color: var(--md-sys-color-primary);
+      --md-filled-button-pressed-state-layer-color: var(--md-sys-color-primary);
+    }
+
+    .secondary-action {
+      --md-text-button-hover-state-layer-color: var(--md-sys-color-primary);
+      --md-text-button-pressed-state-layer-color: var(--md-sys-color-primary);
+    }
+  `;$([o.property({type:Boolean,reflect:!0})],exports.PdDialog.prototype,"open",void 0);$([o.property({type:String})],exports.PdDialog.prototype,"size",void 0);$([o.property({type:String})],exports.PdDialog.prototype,"variant",void 0);$([o.property({type:String})],exports.PdDialog.prototype,"headline",void 0);$([o.property({type:String,attribute:"primary-action"})],exports.PdDialog.prototype,"primaryAction",void 0);$([o.property({type:String,attribute:"secondary-action"})],exports.PdDialog.prototype,"secondaryAction",void 0);$([o.property({type:Boolean,attribute:"closable-by-backdrop"})],exports.PdDialog.prototype,"closableByBackdrop",void 0);$([o.property({type:Boolean,attribute:"show-close-button"})],exports.PdDialog.prototype,"showCloseButton",void 0);$([o.query("md-dialog")],exports.PdDialog.prototype,"dialogElement",void 0);exports.PdDialog=$([o.customElement("pd-dialog")],exports.PdDialog);var E=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdExpandableCard=class extends s.LitElement{constructor(){super(...arguments),this.variant="elevated",this.expanded=!1,this.expandIcon="keyboard_arrow_down",this.collapseIcon="keyboard_arrow_up",this.headerClickable=!1,this._expanded=!1}connectedCallback(){super.connectedCallback(),this._expanded=this.expanded}toggle(){this._expanded=!this._expanded,this._dispatchExpandEvent()}expand(){this._expanded||(this._expanded=!0,this._dispatchExpandEvent())}collapse(){this._expanded&&(this._expanded=!1,this._dispatchExpandEvent())}_dispatchExpandEvent(){const e=this._expanded?"expand":"collapse";this.dispatchEvent(new CustomEvent(e,{detail:{expanded:this._expanded},bubbles:!0,composed:!0}))}_handleToggle(){this.toggle()}_handleHeaderClick(e){this.headerClickable&&(e.target.closest("md-icon-button")||this.toggle())}render(){const e=`card ${this.variant}`;return s.html`
+      <div class="${e}">
+        
+        <div 
+          class="header ${this.headerClickable?"clickable":""}" 
+          @click=${this._handleHeaderClick}
+        >
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+          <md-icon-button
+            class="expand-button"
+            @click=${this._handleToggle}
+            aria-label=${this._expanded?"Collapse":"Expand"}
+          >
+            <md-icon class="expand-icon ${this._expanded?"expanded":""}">${this.expandIcon}</md-icon>
+          </md-icon-button>
+        </div>
+        
+        <div class="content ${this._expanded?"expanded":"collapsed"}">
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `}};exports.PdExpandableCard.styles=s.css`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+      font-weight: var(--md-sys-typescale-body-large-weight, 400);
+    }
+
+    .card {
+      border-radius: var(--md-sys-shape-corner-small, 12px);
+      overflow: hidden;
+      transition: all var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, ease);
+      position: relative;
+    }
+
+    .card.elevated {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      box-shadow: var(--md-sys-elevation-level1, 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    }
+
+    .card.filled {
+      background: var(--md-sys-color-surface-variant, #f3f3f3);
+      color: var(--md-sys-color-on-surface-variant, #000000);
+    }
+
+    .card.outlined {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      border: 1px solid var(--md-sys-color-outline, #cccccc);
+    }
+
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--md-sys-spacing-400, 16px);
+      min-height: 48px;
+    }
+
+    .header.clickable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .header.clickable:hover {
+      background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));
+    }
+
+    .header-content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--md-sys-spacing-300, 12px);
+    }
+
+    ::slotted(*) {
+      font-family: "Proxima Nova", Arial, sans-serif !important;
+    }
+
+    /* Expand button */
+    .expand-button {
+      flex-shrink: 0;
+      --md-icon-button-icon-size: 24px;
+      --md-icon-button-state-layer-size: 40px;
+    }
+
+    .expand-icon {
+      transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    .expand-icon.expanded {
+      transform: rotate(180deg);
+    }
+
+    /* Content */
+    .content {
+      overflow: hidden;
+      transition: all var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    .content.collapsed {
+      max-height: 0;
+      opacity: 0;
+    }
+
+    .content.expanded {
+      max-height: 1000px; /* Large enough for most content */
+      opacity: 1;
+    }
+
+    .content-inner {
+      padding: 0 var(--md-sys-spacing-400, 16px) var(--md-sys-spacing-400, 16px);
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .card,
+      .expand-icon,
+      .content {
+        transition: none;
+      }
+    }
+
+    /* Focus styles */
+    .expand-button:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+    }
+
+    .header.clickable:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+  `;E([o.property({type:String})],exports.PdExpandableCard.prototype,"variant",void 0);E([o.property({type:Boolean})],exports.PdExpandableCard.prototype,"expanded",void 0);E([o.property({type:String,attribute:"expand-icon"})],exports.PdExpandableCard.prototype,"expandIcon",void 0);E([o.property({type:String,attribute:"collapse-icon"})],exports.PdExpandableCard.prototype,"collapseIcon",void 0);E([o.property({type:Boolean,attribute:"header-clickable"})],exports.PdExpandableCard.prototype,"headerClickable",void 0);E([o.state()],exports.PdExpandableCard.prototype,"_expanded",void 0);exports.PdExpandableCard=E([o.customElement("pd-expandable-card")],exports.PdExpandableCard);var w=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};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 e=this.label||"Checkbox",t=this.touchTarget?"wrapper":void 0;return this.label?s.html`
+      <label class="checkbox-label" for=${this.inputId}>
+        <md-checkbox
+          id=${this.inputId}
+          ?checked=${this.checked}
+          ?indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          touch-target=${L.ifDefined(t)}
+          aria-label=${e}
+          .value=${this.value}
+          .name=${this.name}
+          @change=${this._handleChange}
+          @input=${this._handleInput}
+        ></md-checkbox>
+        <span class="label-text">${this.label}</span>
+      </label>
+    `:s.html`
+      <md-checkbox
+        ?checked=${this.checked}
+        ?indeterminate=${this.indeterminate}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        touch-target=${L.ifDefined(t)}
+        aria-label=${e}
+        .value=${this.value}
+        .name=${this.name}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
+      ></md-checkbox>
+    `}_handleChange(e){const t=e.target;this.checked=t.checked,this.indeterminate=t.indeterminate,this.dispatchEvent(new CustomEvent("change",{detail:{checked:t.checked,indeterminate:t.indeterminate,value:t.value},bubbles:!0}))}_handleInput(e){const t=e.target;this.checked=t.checked,this.indeterminate=t.indeterminate,this.dispatchEvent(new CustomEvent("input",{detail:{checked:t.checked,indeterminate:t.indeterminate,value:t.value},bubbles:!0}))}};exports.PdCheckbox.styles=s.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      /* Essential Material Design tokens only */
+      --md-checkbox-selected-container-color: var(--md-sys-color-primary);
+      --md-checkbox-selected-icon-color: var(--md-sys-color-on-primary);
+      --md-checkbox-unselected-outline-color: var(--md-sys-color-outline);
+      --md-checkbox-container-size: 18px;
+      --md-checkbox-icon-size: 16px;
+    }
+
+    .checkbox-label {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      gap: var(--md-sys-spacing-200);
+      user-select: none;
+    }
+
+    .checkbox-label:has(md-checkbox[disabled]) {
+      cursor: default;
+      color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+
+    .label-text {
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+    }
+
+    md-checkbox {
+      /* Explicit size for the checkbox component */
+      width: 18px;
+      height: 18px;
+      /* Ensure the checkbox maintains its size */
+      min-width: 18px;
+      min-height: 18px;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Error state styling */
+    :host([error]) {
+      --md-checkbox-unselected-outline-color: var(--md-sys-color-error);
+    }
+
+    :host([error]) .label-text {
+      color: var(--md-sys-color-error);
+    }
+  `;w([o.property({type:Boolean})],exports.PdCheckbox.prototype,"checked",void 0);w([o.property({type:Boolean})],exports.PdCheckbox.prototype,"indeterminate",void 0);w([o.property({type:Boolean})],exports.PdCheckbox.prototype,"disabled",void 0);w([o.property({type:Boolean})],exports.PdCheckbox.prototype,"required",void 0);w([o.property({type:String})],exports.PdCheckbox.prototype,"value",void 0);w([o.property({type:String})],exports.PdCheckbox.prototype,"name",void 0);w([o.property({type:String})],exports.PdCheckbox.prototype,"label",void 0);w([o.property({type:Boolean,attribute:"touch-target"})],exports.PdCheckbox.prototype,"touchTarget",void 0);exports.PdCheckbox=w([o.customElement("pd-checkbox")],exports.PdCheckbox);var b=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdChip=class extends s.LitElement{constructor(){super(...arguments),this.variant="assist",this.label="",this.disabled=!1,this.alwaysFocusable=!1,this.hasIcon=!1,this.icon="",this.selected=!1,this.removable=!1,this.elevated=!1,this.href="",this.target="",this.avatar=!1,this.removeOnly=!1}getChipTemplate(){const e=this.icon?s.html`<md-icon slot="icon">${this.icon}</md-icon>`:s.nothing,t={label:this.label,disabled:this.disabled,"always-focusable":this.alwaysFocusable,"has-icon":this.hasIcon||!!this.icon};switch(this.variant){case"filter":return s.html`
+          <md-filter-chip
+            .label=${t.label}
+            ?disabled=${t.disabled}
+            ?always-focusable=${t["always-focusable"]}
+            ?has-icon=${t["has-icon"]}
+            ?selected=${this.selected}
+            ?removable=${this.removable}
+            @click=${this._handleClick}
+            @remove=${this._handleRemove}
+          >
+            ${e}
+          </md-filter-chip>
+        `;case"input":return s.html`
+          <md-input-chip
+            .label=${t.label}
+            ?disabled=${t.disabled}
+            ?always-focusable=${t["always-focusable"]}
+            ?has-icon=${t["has-icon"]}
+            ?avatar=${this.avatar}
+            ?remove-only=${this.removeOnly}
+            @click=${this._handleClick}
+            @remove=${this._handleRemove}
+          >
+            ${e}
+          </md-input-chip>
+        `;case"suggestion":return s.html`
+          <md-suggestion-chip
+            .label=${t.label}
+            ?disabled=${t.disabled}
+            ?always-focusable=${t["always-focusable"]}
+            ?has-icon=${t["has-icon"]}
+            ?elevated=${this.elevated}
+            .href=${this.href||s.nothing}
+            .target=${this.target||s.nothing}
+            @click=${this._handleClick}
+          >
+            ${e}
+          </md-suggestion-chip>
+        `;default:return s.html`
+          <md-assist-chip
+            .label=${t.label}
+            ?disabled=${t.disabled}
+            ?always-focusable=${t["always-focusable"]}
+            ?has-icon=${t["has-icon"]}
+            ?elevated=${this.elevated}
+            .href=${this.href||s.nothing}
+            .target=${this.target||s.nothing}
+            @click=${this._handleClick}
+          >
+            ${e}
+          </md-assist-chip>
+        `}}render(){return this.getChipTemplate()}_handleClick(e){this.dispatchEvent(new CustomEvent("chip-click",{detail:{variant:this.variant,label:this.label,selected:this.selected},bubbles:!0}))}_handleRemove(e){this.dispatchEvent(new CustomEvent("chip-remove",{detail:{variant:this.variant,label:this.label},bubbles:!0}))}};exports.PdChip.styles=s.css`
+    :host {
+      display: inline-block;
+      --md-assist-chip-container-shape: var(--md-sys-shape-corner-small);
+      --md-filter-chip-container-shape: var(--md-sys-shape-corner-small);
+      --md-input-chip-container-shape: var(--md-sys-shape-corner-small);
+      --md-suggestion-chip-container-shape: var(--md-sys-shape-corner-small);
+      
+      --md-assist-chip-container-height: var(--md-sys-chip-container-height, 2rem);
+      --md-filter-chip-container-height: var(--md-sys-chip-container-height, 2rem);
+      --md-input-chip-container-height: var(--md-sys-chip-container-height, 2rem);
+      --md-suggestion-chip-container-height: var(--md-sys-chip-container-height, 2rem);
+      
+      --md-assist-chip-label-text-color: var(--md-sys-color-on-surface);
+      --md-filter-chip-label-text-color: var(--md-sys-color-on-surface);
+      --md-input-chip-label-text-color: var(--md-sys-color-on-surface);
+      --md-suggestion-chip-label-text-color: var(--md-sys-color-on-surface);
+      
+      --md-assist-chip-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-filter-chip-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-input-chip-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-suggestion-chip-label-text-font: var(--md-sys-typescale-label-large-font);
+      
+      --md-assist-chip-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-filter-chip-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-input-chip-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-suggestion-chip-label-text-size: var(--md-sys-typescale-label-large-size);
+      
+      --md-assist-chip-label-text-weight: var(--md-sys-typescale-label-large-weight);
+      --md-filter-chip-label-text-weight: var(--md-sys-typescale-label-large-weight);
+      --md-input-chip-label-text-weight: var(--md-sys-typescale-label-large-weight);
+      --md-suggestion-chip-label-text-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    md-assist-chip,
+    md-filter-chip,
+    md-input-chip,
+    md-suggestion-chip {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+    }
+
+    md-assist-chip:hover,
+    md-filter-chip:hover,
+    md-input-chip:hover,
+    md-suggestion-chip:hover {
+      transform: translateY(-1px);
+    }
+
+    md-filter-chip[selected] {
+      --md-filter-chip-selected-container-color: var(--md-sys-color-secondary-container);
+      --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-secondary-container);
+    }
+
+    md-input-chip {
+      --md-input-chip-container-color: var(--md-sys-color-surface-variant);
+      --md-input-chip-outline-color: var(--md-sys-color-outline);
+    }
+
+    md-assist-chip[elevated],
+    md-suggestion-chip[elevated] {
+      --md-assist-chip-elevated-container-color: var(--md-sys-color-surface);
+      --md-suggestion-chip-elevated-container-color: var(--md-sys-color-surface);
+      --md-assist-chip-elevated-container-shadow-color: var(--md-sys-color-shadow);
+      --md-suggestion-chip-elevated-container-shadow-color: var(--md-sys-color-shadow);
+    }
+  `;b([o.property({type:String})],exports.PdChip.prototype,"variant",void 0);b([o.property({type:String})],exports.PdChip.prototype,"label",void 0);b([o.property({type:Boolean})],exports.PdChip.prototype,"disabled",void 0);b([o.property({type:Boolean,attribute:"always-focusable"})],exports.PdChip.prototype,"alwaysFocusable",void 0);b([o.property({type:Boolean,attribute:"has-icon"})],exports.PdChip.prototype,"hasIcon",void 0);b([o.property({type:String})],exports.PdChip.prototype,"icon",void 0);b([o.property({type:Boolean})],exports.PdChip.prototype,"selected",void 0);b([o.property({type:Boolean})],exports.PdChip.prototype,"removable",void 0);b([o.property({type:Boolean})],exports.PdChip.prototype,"elevated",void 0);b([o.property({type:String})],exports.PdChip.prototype,"href",void 0);b([o.property({type:String})],exports.PdChip.prototype,"target",void 0);b([o.property({type:Boolean})],exports.PdChip.prototype,"avatar",void 0);b([o.property({type:Boolean,attribute:"remove-only"})],exports.PdChip.prototype,"removeOnly",void 0);exports.PdChip=b([o.customElement("pd-chip")],exports.PdChip);var _=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdFab=class extends s.LitElement{constructor(){super(...arguments),this.variant="primary",this.size="medium",this.icon="",this.label="",this.lowered=!1,this.disabled=!1,this.ariaLabel=""}getFabTemplate(){const e=this.icon?s.html`<md-icon slot="icon">${this.icon}</md-icon>`:s.html`<slot name="icon" slot="icon"></slot>`,t=!!this.label;return this.variant==="branded"?s.html`
+        <md-branded-fab
+          ?lowered=${this.lowered}
+          ?disabled=${this.disabled}
+          .size=${this.size}
+          .label=${this.label||s.nothing}
+          aria-label=${this.ariaLabel||this.label||s.nothing}
+          @click=${this._handleClick}
+        >
+          ${e}
+        </md-branded-fab>
+      `:s.html`
+      <md-fab
+        .variant=${this.variant}
+        .size=${this.size}
+        ?lowered=${this.lowered}
+        ?disabled=${this.disabled}
+        .label=${this.label||s.nothing}
+        aria-label=${this.ariaLabel||(t?s.nothing:this.label)||s.nothing}
+        @click=${this._handleClick}
+      >
+        ${e}
+      </md-fab>
+    `}render(){return this.getFabTemplate()}_handleClick(e){this.disabled||this.dispatchEvent(new CustomEvent("fab-click",{detail:{variant:this.variant,size:this.size,label:this.label,icon:this.icon},bubbles:!0}))}};exports.PdFab.styles=s.css`
+    :host {
+      display: inline-block;
+      --md-fab-container-shape: var(--md-sys-shape-corner-large);
+      --md-branded-fab-container-shape: var(--md-sys-shape-corner-large);
+    }
+
+    :host([size="small"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-small, 2.5rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-small, 2.5rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-small, 1.5rem);
+    }
+
+    :host([size="medium"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-medium, 3.5rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-medium, 3.5rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-medium, 1.5rem);
+    }
+
+    :host([size="large"]) {
+      --md-fab-container-width: var(--md-sys-fab-container-width-large, 6rem);
+      --md-fab-container-height: var(--md-sys-fab-container-height-large, 6rem);
+      --md-fab-icon-size: var(--md-sys-fab-icon-size-large, 2.25rem);
+    }
+
+    :host([variant="surface"]) {
+      --md-fab-container-color: var(--md-sys-color-surface-container-high);
+      --md-fab-icon-color: var(--md-sys-color-primary);
+      --md-fab-label-text-color: var(--md-sys-color-primary);
+      --md-fab-hover-icon-color: var(--md-sys-color-primary-hover);
+      --md-fab-focus-icon-color: var(--md-sys-color-primary-focus);
+      --md-fab-pressed-icon-color: var(--md-sys-color-primary-pressed);
+    }
+
+    :host([variant="primary"]) {
+      --md-fab-container-color: var(--md-sys-color-primary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-primary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-primary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-primary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-primary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-primary-container-pressed);
+    }
+
+    :host([variant="secondary"]) {
+      --md-fab-container-color: var(--md-sys-color-secondary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-secondary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-secondary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-secondary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-secondary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-secondary-container-pressed);
+    }
+
+    :host([variant="tertiary"]) {
+      --md-fab-container-color: var(--md-sys-color-tertiary-container);
+      --md-fab-icon-color: var(--md-sys-color-on-tertiary-container);
+      --md-fab-label-text-color: var(--md-sys-color-on-tertiary-container);
+      --md-fab-hover-container-color: var(--md-sys-color-tertiary-container-hover);
+      --md-fab-focus-container-color: var(--md-sys-color-tertiary-container-focus);
+      --md-fab-pressed-container-color: var(--md-sys-color-tertiary-container-pressed);
+    }
+
+    md-fab,
+    md-branded-fab {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+      --md-fab-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-fab-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-fab-label-text-weight: var(--md-sys-typescale-label-large-weight);
+      --md-branded-fab-label-text-font: var(--md-sys-typescale-label-large-font);
+      --md-branded-fab-label-text-size: var(--md-sys-typescale-label-large-size);
+      --md-branded-fab-label-text-weight: var(--md-sys-typescale-label-large-weight);
+    }
+
+    md-fab:hover,
+    md-branded-fab:hover {
+      transform: scale(1.05);
+    }
+
+    md-fab:active,
+    md-branded-fab:active {
+      transform: scale(0.95);
+    }
+
+    :host([disabled]) md-fab,
+    :host([disabled]) md-branded-fab {
+      --md-fab-container-color: var(--md-sys-color-on-surface);
+      --md-fab-icon-color: var(--md-sys-color-surface);
+      --md-fab-label-text-color: var(--md-sys-color-surface);
+      opacity: var(--md-sys-state-disabled-container-opacity, 0.12);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) md-fab:hover,
+    :host([disabled]) md-branded-fab:hover {
+      transform: none;
+    }
+  `;_([o.property({type:String})],exports.PdFab.prototype,"variant",void 0);_([o.property({type:String})],exports.PdFab.prototype,"size",void 0);_([o.property({type:String})],exports.PdFab.prototype,"icon",void 0);_([o.property({type:String})],exports.PdFab.prototype,"label",void 0);_([o.property({type:Boolean})],exports.PdFab.prototype,"lowered",void 0);_([o.property({type:Boolean})],exports.PdFab.prototype,"disabled",void 0);_([o.property({type:String,attribute:"aria-label"})],exports.PdFab.prototype,"ariaLabel",void 0);exports.PdFab=_([o.customElement("pd-fab")],exports.PdFab);var f=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdIconButton=class extends s.LitElement{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="",this._internalSelected=!1}connectedCallback(){super.connectedCallback(),this._internalSelected=this.selected}get isSelected(){return this.toggle?this._internalSelected:this.selected}getIconButtonTemplate(){const e=this.isSelected,t=e&&this.selectedIcon?this.selectedIcon:this.icon,r=e?"icon-selected":"icon-unselected",a=t?s.html`<md-icon class="${r}">${t}</md-icon>`:s.html`<slot></slot>`,i={disabled:this.disabled,toggle:this.toggle,selected:e,href:this.href||s.nothing,target:this.target||s.nothing,"aria-label":this.ariaLabel||s.nothing,"aria-label-selected":this.ariaLabelSelected||s.nothing};switch(this.variant){case"filled":return s.html`
+          <md-filled-icon-button
+            ?disabled=${i.disabled}
+            ?toggle=${i.toggle}
+            ?selected=${i.selected}
+            .href=${i.href}
+            .target=${i.target}
+            aria-label=${i["aria-label"]}
+            aria-label-selected=${i["aria-label-selected"]}
+            @click=${this._handleClick}
+          >
+            ${a}
+          </md-filled-icon-button>
+        `;case"tonal":return s.html`
+          <md-filled-tonal-icon-button
+            ?disabled=${i.disabled}
+            ?toggle=${i.toggle}
+            ?selected=${i.selected}
+            .href=${i.href}
+            .target=${i.target}
+            aria-label=${i["aria-label"]}
+            aria-label-selected=${i["aria-label-selected"]}
+            @click=${this._handleClick}
+          >
+            ${a}
+          </md-filled-tonal-icon-button>
+        `;case"outlined":return s.html`
+          <md-outlined-icon-button
+            ?disabled=${i.disabled}
+            ?toggle=${i.toggle}
+            ?selected=${i.selected}
+            .href=${i.href}
+            .target=${i.target}
+            aria-label=${i["aria-label"]}
+            aria-label-selected=${i["aria-label-selected"]}
+            @click=${this._handleClick}
+          >
+            ${a}
+          </md-outlined-icon-button>
+        `;default:return s.html`
+          <md-icon-button
+            ?disabled=${i.disabled}
+            ?toggle=${i.toggle}
+            ?selected=${i.selected}
+            .href=${i.href}
+            .target=${i.target}
+            aria-label=${i["aria-label"]}
+            aria-label-selected=${i["aria-label-selected"]}
+            @click=${this._handleClick}
+          >
+            ${a}
+          </md-icon-button>
+        `}}render(){return this.getIconButtonTemplate()}_handleClick(e){if(this.disabled)return;this.toggle&&(this._internalSelected=!this._internalSelected);const t=this.isSelected,r=e.target;r&&r.blur(),this.dispatchEvent(new CustomEvent("pd-icon-button-click",{detail:{variant:this.variant,selected:t,toggle:this.toggle,icon:this.icon,selectedIcon:this.selectedIcon},bubbles:!0,composed:!0})),this.toggle&&this.dispatchEvent(new CustomEvent("change",{detail:{selected:t,variant:this.variant},bubbles:!0,composed:!0}))}};exports.PdIconButton.styles=s.css`
+    :host {
+      display: inline-block;
+      --md-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+      --md-filled-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+      --md-filled-tonal-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
+      --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);
+      --md-icon-button-focus-icon-color: var(--md-sys-color-on-surface-variant-focus);
+      --md-icon-button-pressed-icon-color: var(--md-sys-color-on-surface-variant-pressed);
+      --md-icon-button-selected-icon-color: var(--md-sys-color-primary);
+      --md-icon-button-selected-hover-icon-color: var(--md-sys-color-primary-hover);
+      --md-icon-button-selected-focus-icon-color: var(--md-sys-color-primary-focus);
+      --md-icon-button-selected-pressed-icon-color: var(--md-sys-color-primary-pressed);
+    }
+
+    :host([variant="filled"]) {
+      --md-filled-icon-button-container-color: var(--md-sys-color-primary);
+      --md-filled-icon-button-icon-color: var(--md-sys-color-on-primary);
+      --md-filled-icon-button-hover-container-color: var(--md-sys-color-primary-hover);
+      --md-filled-icon-button-focus-container-color: var(--md-sys-color-primary-focus);
+      --md-filled-icon-button-pressed-container-color: var(--md-sys-color-primary-pressed);
+      --md-filled-icon-button-selected-container-color: var(--md-sys-color-primary);
+      --md-filled-icon-button-toggle-selected-container-color: var(--md-sys-color-primary);
+      --md-filled-icon-button-toggle-unselected-container-color: var(--md-sys-color-surface-container-highest);
+      --md-filled-icon-button-toggle-unselected-icon-color: var(--md-sys-color-primary);
+    }
+
+    :host([variant="tonal"]) {
+      --md-filled-tonal-icon-button-container-color: var(--md-sys-color-secondary-container);
+      --md-filled-tonal-icon-button-icon-color: var(--md-sys-color-on-secondary-container);
+      --md-filled-tonal-icon-button-hover-container-color: var(--md-sys-color-secondary-container-hover);
+      --md-filled-tonal-icon-button-focus-container-color: var(--md-sys-color-secondary-container-focus);
+      --md-filled-tonal-icon-button-pressed-container-color: var(--md-sys-color-secondary-container-pressed);
+      --md-filled-tonal-icon-button-selected-container-color: var(--md-sys-color-secondary-container);
+      --md-filled-tonal-icon-button-toggle-selected-container-color: var(--md-sys-color-secondary-container);
+      --md-filled-tonal-icon-button-toggle-unselected-container-color: var(--md-sys-color-surface-container-highest);
+      --md-filled-tonal-icon-button-toggle-unselected-icon-color: var(--md-sys-color-on-surface-variant);
+    }
+
+    :host([variant="outlined"]) {
+      --md-outlined-icon-button-outline-color: var(--md-sys-color-outline);
+      --md-outlined-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-outlined-icon-button-hover-icon-color: var(--md-sys-color-on-surface-variant-hover);
+      --md-outlined-icon-button-focus-icon-color: var(--md-sys-color-on-surface-variant-focus);
+      --md-outlined-icon-button-pressed-icon-color: var(--md-sys-color-on-surface-variant-pressed);
+      --md-outlined-icon-button-selected-container-color: var(--md-sys-color-inverse-surface);
+      --md-outlined-icon-button-selected-icon-color: var(--md-sys-color-inverse-on-surface);
+      --md-outlined-icon-button-selected-outline-color: var(--md-sys-color-outline);
+    }
+
+    md-icon-button,
+    md-filled-icon-button,
+    md-filled-tonal-icon-button,
+    md-outlined-icon-button {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+      --md-icon-button-state-layer-shape: var(--md-sys-shape-corner-full);
+      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-full);
+      --md-filled-tonal-icon-button-container-shape: var(--md-sys-shape-corner-full);
+      --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,
+    md-outlined-icon-button:hover {
+      transform: scale(1.05);
+    }
+
+    md-icon-button:active,
+    md-filled-icon-button:active,
+    md-filled-tonal-icon-button:active,
+    md-outlined-icon-button:active {
+      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,
+    :host([disabled]) md-outlined-icon-button {
+      opacity: var(--md-sys-state-disabled-container-opacity, 0.38);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) md-icon-button:hover,
+    :host([disabled]) md-filled-icon-button:hover,
+    :host([disabled]) md-filled-tonal-icon-button:hover,
+    :host([disabled]) md-outlined-icon-button:hover {
+      transform: none;
+    }
+
+    /* Icon accessibility improvements */
+    md-icon {
+      user-select: none;
+      pointer-events: none;
+    }
+  `;f([o.property({type:String})],exports.PdIconButton.prototype,"variant",void 0);f([o.property({type:String})],exports.PdIconButton.prototype,"icon",void 0);f([o.property({type:String,attribute:"selected-icon"})],exports.PdIconButton.prototype,"selectedIcon",void 0);f([o.property({type:Boolean})],exports.PdIconButton.prototype,"disabled",void 0);f([o.property({type:Boolean})],exports.PdIconButton.prototype,"toggle",void 0);f([o.property({type:Boolean})],exports.PdIconButton.prototype,"selected",void 0);f([o.property({type:String})],exports.PdIconButton.prototype,"href",void 0);f([o.property({type:String})],exports.PdIconButton.prototype,"target",void 0);f([o.property({type:String,attribute:"aria-label"})],exports.PdIconButton.prototype,"ariaLabel",void 0);f([o.property({type:String,attribute:"aria-label-selected"})],exports.PdIconButton.prototype,"ariaLabelSelected",void 0);f([o.state()],exports.PdIconButton.prototype,"_internalSelected",void 0);exports.PdIconButton=f([o.customElement("pd-icon-button")],exports.PdIconButton);var p=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdList=class extends s.LitElement{constructor(){super(...arguments),this.role="list",this.tabindex=-1}render(){return s.html`
+      <md-list
+        role=${this.role}
+        tabindex=${this.tabindex}
+      >
+        <slot></slot>
+      </md-list>
+    `}};exports.PdList.styles=s.css`
+    :host {
+      display: block;
+      --md-list-container-color: var(--md-sys-color-surface);
+    }
+
+    md-list {
+      background-color: var(--md-sys-color-surface);
+      border-radius: var(--md-sys-shape-corner-small);
+      overflow: hidden;
+    }
+  `;p([o.property({type:String})],exports.PdList.prototype,"role",void 0);p([o.property({type:Number})],exports.PdList.prototype,"tabindex",void 0);exports.PdList=p([o.customElement("pd-list")],exports.PdList);exports.PdListItem=class extends s.LitElement{constructor(){super(...arguments),this.type="text",this.headline="",this.supportingText="",this.trailingSupportingText="",this.href="",this.target="",this.disabled=!1,this.icon="",this.trailingIcon="",this.avatar="",this.image=""}getListItemTemplate(){const e=this.headline?s.html`<div slot="headline">${this.headline}</div>`:s.html`<slot name="headline" slot="headline"></slot>`,t=this.supportingText?s.html`<div slot="supporting-text">${this.supportingText}</div>`:s.html`<slot name="supporting-text" slot="supporting-text"></slot>`,r=this.trailingSupportingText?s.html`<div slot="trailing-supporting-text">${this.trailingSupportingText}</div>`:s.html`<slot name="trailing-supporting-text" slot="trailing-supporting-text"></slot>`,a=this.icon?s.html`<md-icon slot="start">${this.icon}</md-icon>`:this.avatar?s.html`<img slot="start" src="${this.avatar}" class="avatar" alt="" />`:this.image?s.html`<img slot="start" src="${this.image}" class="image" alt="" />`:s.html`<slot name="start" slot="start"></slot>`,i=this.trailingIcon?s.html`<md-icon slot="end">${this.trailingIcon}</md-icon>`:s.html`<slot name="end" slot="end"></slot>`,n={disabled:this.disabled,tabindex:this.tabindex,href:this.href||s.nothing,target:this.target||s.nothing};return s.html`
+      <md-list-item
+        .type=${this.type}
+        ?disabled=${n.disabled}
+        .tabindex=${n.tabindex}
+        .href=${n.href}
+        .target=${n.target}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        ${a}
+        ${e}
+        ${t}
+        ${r}
+        ${i}
+      </md-list-item>
+    `}render(){return this.getListItemTemplate()}_handleClick(e){this.disabled||this.dispatchEvent(new CustomEvent("list-item-click",{detail:{type:this.type,headline:this.headline,href:this.href},bubbles:!0}))}_handleKeydown(e){this.disabled||(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleClick(e))}};exports.PdListItem.styles=s.css`
+    :host {
+      display: block;
+      --md-list-item-list-item-container-color: var(--md-sys-color-surface);
+      --md-list-item-list-item-label-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-leading-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+      --md-list-item-list-item-container-shape: var(--md-sys-shape-corner-none);
+    }
+
+    md-list-item {
+      --md-list-item-label-text-font: var(--md-sys-typescale-body-large-font);
+      --md-list-item-label-text-size: var(--md-sys-typescale-body-large-size);
+      --md-list-item-label-text-weight: var(--md-sys-typescale-body-large-weight);
+      --md-list-item-label-text-line-height: var(--md-sys-typescale-body-large-line-height);
+      --md-list-item-supporting-text-font: var(--md-sys-typescale-body-medium-font);
+      --md-list-item-supporting-text-size: var(--md-sys-typescale-body-medium-size);
+      --md-list-item-supporting-text-weight: var(--md-sys-typescale-body-medium-weight);
+      --md-list-item-supporting-text-line-height: var(--md-sys-typescale-body-medium-line-height);
+      --md-list-item-trailing-supporting-text-font: var(--md-sys-typescale-label-small-font);
+      --md-list-item-trailing-supporting-text-size: var(--md-sys-typescale-label-small-size);
+      --md-list-item-trailing-supporting-text-weight: var(--md-sys-typescale-label-small-weight);
+      --md-list-item-trailing-supporting-text-line-height: var(--md-sys-typescale-label-small-line-height);
+      transition: background-color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+    }
+
+    md-list-item:hover {
+      --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-hover, var(--md-sys-color-surface-variant));
+    }
+
+    md-list-item:focus {
+      --md-list-item-list-item-container-color: var(--md-sys-color-surface-container-focus, var(--md-sys-color-surface-variant));
+    }
+
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: var(--md-sys-shape-corner-full);
+      object-fit: cover;
+    }
+
+    .image {
+      width: 56px;
+      height: 56px;
+      border-radius: var(--md-sys-shape-corner-small);
+      object-fit: cover;
+    }
+
+    :host([disabled]) md-list-item {
+      --md-list-item-list-item-label-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-supporting-text-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-leading-icon-color: var(--md-sys-color-on-surface);
+      --md-list-item-list-item-trailing-icon-color: var(--md-sys-color-on-surface);
+      opacity: var(--md-sys-state-disabled-content-opacity, 0.38);
+      cursor: not-allowed;
+    }
+  `;p([o.property({type:String})],exports.PdListItem.prototype,"type",void 0);p([o.property({type:String})],exports.PdListItem.prototype,"headline",void 0);p([o.property({type:String,attribute:"supporting-text"})],exports.PdListItem.prototype,"supportingText",void 0);p([o.property({type:String,attribute:"trailing-supporting-text"})],exports.PdListItem.prototype,"trailingSupportingText",void 0);p([o.property({type:String})],exports.PdListItem.prototype,"href",void 0);p([o.property({type:String})],exports.PdListItem.prototype,"target",void 0);p([o.property({type:Boolean})],exports.PdListItem.prototype,"disabled",void 0);p([o.property({type:String})],exports.PdListItem.prototype,"icon",void 0);p([o.property({type:String,attribute:"trailing-icon"})],exports.PdListItem.prototype,"trailingIcon",void 0);p([o.property({type:String})],exports.PdListItem.prototype,"avatar",void 0);p([o.property({type:String})],exports.PdListItem.prototype,"image",void 0);p([o.property({type:Number})],exports.PdListItem.prototype,"tabindex",void 0);exports.PdListItem=p([o.customElement("pd-list-item")],exports.PdListItem);exports.PdListDivider=class extends s.LitElement{constructor(){super(...arguments),this.inset=!1,this.role="separator"}render(){return s.html`
+      <md-divider
+        ?inset=${this.inset}
+        role=${this.role}
+      ></md-divider>
+    `}};exports.PdListDivider.styles=s.css`
+    :host {
+      display: block;
+      --md-divider-color: var(--md-sys-color-outline-variant);
+      --md-divider-thickness: 1px;
+    }
+
+    md-divider {
+      margin: var(--md-sys-spacing-100, 4px) 0;
+    }
+  `;p([o.property({type:Boolean})],exports.PdListDivider.prototype,"inset",void 0);p([o.property({type:String})],exports.PdListDivider.prototype,"role",void 0);exports.PdListDivider=p([o.customElement("pd-list-divider")],exports.PdListDivider);var m=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdMenu=class extends s.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(e){if(e.has("anchor")){const t=this.getRootNode();this.anchor&&t?this.anchorElement=t.getElementById(this.anchor)??void 0:this.anchor||(this.anchorElement=void 0)}}render(){return s.html`
+      <md-menu
+        .anchorElement=${this.anchorElement}
+        .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>
+      </md-menu>
+    `}};exports.PdMenu.styles=s.css`
+    :host {
+      /* Allows the menu to be positioned relative to its anchor without this wrapper interfering. */
+      display: contents;
+    }
+
+    md-menu {
+      /* Apply Prioticket design system tokens */
+      --md-menu-container-shape: var(--pd-sys-shape-corner-medium, 12px);
+      --md-menu-container-color: var(--pd-sys-color-surface-container, #f0f0f0);
+      --md-menu-container-elevation: var(--pd-sys-elevation-2);
+    }
+
+    /* Override the ugly background from Material Web .items class */
+    md-menu::part(items) {
+      background-color: transparent !important;
+    }
+
+    /* Fallback: target the items container directly */
+    md-menu .items {
+      background-color: transparent !important;
+    }
+  `;m([o.query("md-menu")],exports.PdMenu.prototype,"menu",void 0);m([o.property({type:String})],exports.PdMenu.prototype,"anchor",void 0);m([o.property({type:Object,attribute:!1})],exports.PdMenu.prototype,"anchorElement",void 0);m([o.property({type:Boolean,reflect:!0})],exports.PdMenu.prototype,"open",void 0);m([o.property({type:String})],exports.PdMenu.prototype,"positioning",void 0);m([o.property({type:String,attribute:"anchor-corner"})],exports.PdMenu.prototype,"anchorCorner",void 0);m([o.property({type:String,attribute:"menu-corner"})],exports.PdMenu.prototype,"menuCorner",void 0);m([o.property({type:Boolean})],exports.PdMenu.prototype,"quick",void 0);m([o.property({type:Boolean,attribute:"has-overflow"})],exports.PdMenu.prototype,"hasOverflow",void 0);m([o.property({type:Number,attribute:"x-offset"})],exports.PdMenu.prototype,"xOffset",void 0);m([o.property({type:Number,attribute:"y-offset"})],exports.PdMenu.prototype,"yOffset",void 0);m([o.property({type:String,attribute:"default-focus"})],exports.PdMenu.prototype,"defaultFocus",void 0);m([o.property({type:Boolean,attribute:"stay-open-on-focusout"})],exports.PdMenu.prototype,"stayOpenOnFocusout",void 0);m([o.property({type:Boolean,attribute:"stay-open-on-outside-click"})],exports.PdMenu.prototype,"stayOpenOnOutsideClick",void 0);m([o.property({type:Boolean,attribute:"skip-restore-focus"})],exports.PdMenu.prototype,"skipRestoreFocus",void 0);exports.PdMenu=m([o.customElement("pd-menu")],exports.PdMenu);var x=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdMenuItemM=class extends s.LitElement{constructor(){super(...arguments),this.disabled=!1,this.type="menuitem",this.href="",this.target="",this.keepOpen=!1,this.selected=!1,this.leadingIcon="",this.trailingIcon="",this.text="",this.supportingText=""}_handleClick(e){if(this.disabled){e.preventDefault(),e.stopPropagation();return}this.href||(this.keepOpen||this.dispatchEvent(new CustomEvent("close-menu",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("menu-item-selected",{detail:{text:this.text,value:this.getAttribute("value")||this.text},bubbles:!0,composed:!0})))}render(){const e=this.leadingIcon?s.html`<md-icon slot="start">${this.leadingIcon}</md-icon>`:s.html`<slot name="start" slot="start"></slot>`,t=this.trailingIcon?s.html`<md-icon slot="end">${this.trailingIcon}</md-icon>`:s.html`<slot name="end" slot="end"></slot>`,r=this.text?s.html`
+        <div slot="headline">${this.text}</div>
+        ${this.supportingText?s.html`<div slot="supporting-text">${this.supportingText}</div>`:""}
+      `:s.html`<slot></slot>`;return s.html`
+      <md-menu-item
+        ?disabled=${this.disabled}
+        type=${this.type}
+        href=${this.href||""}
+        target=${this.target||""}
+        ?keep-open=${this.keepOpen}
+        ?selected=${this.selected}
+        @click=${this._handleClick}
+      >
+        ${e}
+        ${r}
+        ${t}
+      </md-menu-item>
+    `}};exports.PdMenuItemM.styles=s.css`
+    :host {
+      display: contents;
+    }
+
+    md-menu-item {
+      /* Apply Prioticket design system styling */
+      --md-menu-item-container-color: var(--md-sys-color-surface-container, transparent);
+      --md-menu-item-label-text-color: var(--md-sys-color-on-surface, #000000);
+      --md-menu-item-supporting-text-color: var(--md-sys-color-on-surface-variant, #666666);
+      --md-menu-item-icon-color: var(--md-sys-color-on-surface-variant, #666666);
+      
+      /* Selected state */
+      --md-menu-item-selected-container-color: var(--md-sys-color-secondary-container, #e8def8);
+      --md-menu-item-selected-label-text-color: var(--md-sys-color-on-secondary-container, #1d192b);
+      --md-menu-item-selected-icon-color: var(--md-sys-color-on-secondary-container, #1d192b);
+      
+      /* Hover state */
+      --md-menu-item-hover-state-layer-color: var(--md-sys-color-on-surface, rgba(0, 0, 0, 0.08));
+      --md-menu-item-pressed-state-layer-color: var(--md-sys-color-on-surface, rgba(0, 0, 0, 0.12));
+      
+      /* Focus state */
+      --md-menu-item-focus-state-layer-color: var(--md-sys-color-on-surface, rgba(0, 0, 0, 0.12));
+      
+      /* Disabled state */
+      --md-menu-item-disabled-label-text-color: var(--md-sys-color-on-surface, rgba(0, 0, 0, 0.38));
+      --md-menu-item-disabled-icon-color: var(--md-sys-color-on-surface, rgba(0, 0, 0, 0.38));
+
+      /* Typography */
+      --md-menu-item-label-text-font: var(--md-sys-typescale-body-large-font, inherit);
+      --md-menu-item-label-text-size: var(--md-sys-typescale-body-large-size, 1rem);
+      --md-menu-item-label-text-line-height: var(--md-sys-typescale-body-large-line-height, 1.5);
+      --md-menu-item-label-text-weight: var(--md-sys-typescale-body-large-weight, 400);
+      
+      --md-menu-item-supporting-text-font: var(--md-sys-typescale-body-medium-font, inherit);
+      --md-menu-item-supporting-text-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
+      --md-menu-item-supporting-text-line-height: var(--md-sys-typescale-body-medium-line-height, 1.25);
+      --md-menu-item-supporting-text-weight: var(--md-sys-typescale-body-medium-weight, 400);
+
+      /* Shape */
+      --md-menu-item-container-shape: var(--md-sys-shape-corner-none, 0px);
+      
+      /* Spacing */
+      --md-menu-item-top-space: var(--md-sys-spacing-200, 8px);
+      --md-menu-item-bottom-space: var(--md-sys-spacing-200, 8px);
+      --md-menu-item-leading-space: var(--md-sys-spacing-300, 12px);
+      --md-menu-item-trailing-space: var(--md-sys-spacing-300, 12px);
+    }
+
+    /* Icon styling within menu items */
+    md-icon {
+      font-size: 24px;
+      width: 24px;
+      height: 24px;
+    }
+
+    /* Smooth transitions */
+    md-menu-item {
+      transition: all var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, ease);
+    }
+
+    /* Accessibility - respect reduced motion */
+    @media (prefers-reduced-motion: reduce) {
+      md-menu-item {
+        transition: none;
+      }
+    }
+  `;x([o.property({type:Boolean})],exports.PdMenuItemM.prototype,"disabled",void 0);x([o.property({type:String})],exports.PdMenuItemM.prototype,"type",void 0);x([o.property({type:String})],exports.PdMenuItemM.prototype,"href",void 0);x([o.property({type:String})],exports.PdMenuItemM.prototype,"target",void 0);x([o.property({type:Boolean,attribute:"keep-open"})],exports.PdMenuItemM.prototype,"keepOpen",void 0);x([o.property({type:Boolean})],exports.PdMenuItemM.prototype,"selected",void 0);x([o.property({type:String,attribute:"leading-icon"})],exports.PdMenuItemM.prototype,"leadingIcon",void 0);x([o.property({type:String,attribute:"trailing-icon"})],exports.PdMenuItemM.prototype,"trailingIcon",void 0);x([o.property({type:String})],exports.PdMenuItemM.prototype,"text",void 0);x([o.property({type:String,attribute:"supporting-text"})],exports.PdMenuItemM.prototype,"supportingText",void 0);exports.PdMenuItemM=x([o.customElement("pd-menu-item")],exports.PdMenuItemM);var k=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdProgress=class extends s.LitElement{constructor(){super(...arguments),this.type="linear",this.max=1,this.indeterminate=!1,this.visible=!0,this.size="medium",this.ariaLabel=""}render(){return this.type==="circular"?s.html`
+        <md-circular-progress
+          .value=${this.indeterminate?void 0:this.value}
+          ?indeterminate=${this.indeterminate}
+          aria-label=${this.ariaLabel||"Progress indicator"}
+        ></md-circular-progress>
+      `:s.html`
+      <md-linear-progress
+        .value=${this.indeterminate?void 0:this.value}
+        .max=${this.max}
+        .buffer=${this.buffer}
+        ?indeterminate=${this.indeterminate}
+        aria-label=${this.ariaLabel||"Progress indicator"}
+      ></md-linear-progress>
+    `}};exports.PdProgress.styles=s.css`
+    :host {
+      display: inline-block;
+    }
+
+    :host([type="linear"]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([type="circular"]) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    md-linear-progress {
+      width: 100%;
+      /* Apply Prioticket design system tokens */
+      --md-linear-progress-active-indicator-color: var(--md-sys-color-primary);
+      --md-linear-progress-track-color: var(--md-sys-color-outline-variant);
+      --md-linear-progress-active-indicator-height: 4px;
+      --md-linear-progress-track-height: 4px;
+      --md-linear-progress-track-shape: var(--md-sys-shape-corner-full);
+      
+      /* Buffer progress styling */
+      --md-linear-progress-buffer-color: var(--md-sys-color-surface-container-high);
+    }
+
+    md-circular-progress {
+      /* Apply Prioticket design system tokens */
+      --md-circular-progress-color: var(--md-sys-color-primary);
+      --md-circular-progress-active-indicator-color: var(--md-sys-color-primary);
+      --md-circular-progress-size: var(--pd-progress-size, 48px);
+    }
+
+    /* Size variants for circular progress */
+    :host([size="small"]) md-circular-progress {
+      --md-circular-progress-size: 24px;
+      --pd-progress-size: 24px;
+    }
+
+    :host([size="medium"]) md-circular-progress {
+      --md-circular-progress-size: 48px;
+      --pd-progress-size: 48px;
+    }
+
+    :host([size="large"]) md-circular-progress {
+      --md-circular-progress-size: 64px;
+      --pd-progress-size: 64px;
+    }
+
+    /* Hidden state */
+    :host([hidden]),
+    :host(:not([visible])) {
+      display: none !important;
+    }
+  `;k([o.property({type:String})],exports.PdProgress.prototype,"type",void 0);k([o.property({type:Number})],exports.PdProgress.prototype,"value",void 0);k([o.property({type:Number})],exports.PdProgress.prototype,"max",void 0);k([o.property({type:Number})],exports.PdProgress.prototype,"buffer",void 0);k([o.property({type:Boolean})],exports.PdProgress.prototype,"indeterminate",void 0);k([o.property({type:Boolean,reflect:!0})],exports.PdProgress.prototype,"visible",void 0);k([o.property({type:String})],exports.PdProgress.prototype,"size",void 0);k([o.property({type:String,attribute:"aria-label"})],exports.PdProgress.prototype,"ariaLabel",void 0);exports.PdProgress=k([o.customElement("pd-progress")],exports.PdProgress);var h=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdRadio=class extends s.LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.name="",this.value="",this.ariaLabel="",this.ariaDescribedby="",this.required=!1}render(){return s.html`
+      <md-radio
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        name=${this.name}
+        value=${this.value}
+        aria-label=${this.ariaLabel}
+        aria-describedby=${this.ariaDescribedby}
+        ?required=${this.required}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      ></md-radio>
+    `}handleChange(e){const t=e.target;this.checked=t.checked,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}handleInput(e){const t=e.target;this.checked=t.checked,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{checked:this.checked,value:this.value}}))}};h([o.query("md-radio")],exports.PdRadio.prototype,"radio",void 0);h([o.property({type:Boolean,reflect:!0})],exports.PdRadio.prototype,"checked",void 0);h([o.property({type:Boolean,reflect:!0})],exports.PdRadio.prototype,"disabled",void 0);h([o.property({type:String})],exports.PdRadio.prototype,"name",void 0);h([o.property({type:String})],exports.PdRadio.prototype,"value",void 0);h([o.property({type:String,attribute:"aria-label"})],exports.PdRadio.prototype,"ariaLabel",void 0);h([o.property({type:String,attribute:"aria-describedby"})],exports.PdRadio.prototype,"ariaDescribedby",void 0);h([o.property({type:Boolean})],exports.PdRadio.prototype,"required",void 0);exports.PdRadio=h([o.customElement("pd-radio")],exports.PdRadio);exports.PdRadioGroup=class extends s.LitElement{constructor(){super(...arguments),this.name="",this.value="",this.disabled=!1,this.required=!1,this.ariaLabel="",this.ariaLabelledby=""}render(){return s.html`
+      <div
+        role="radiogroup"
+        aria-label=${this.ariaLabel}
+        aria-labelledby=${this.ariaLabelledby}
+        aria-required=${this.required?"true":"false"}
+        @change=${this.handleChange}
+      >
+        <slot></slot>
+      </div>
+    `}firstUpdated(){this.updateRadioButtons()}updated(e){(e.has("name")||e.has("value")||e.has("disabled"))&&this.updateRadioButtons()}updateRadioButtons(){this.querySelectorAll("pd-radio").forEach(t=>{const r=t;this.name&&(r.name=this.name),r.disabled=this.disabled||r.disabled,r.checked=r.value===this.value,r.required=this.required})}handleChange(e){const t=e.target;t.checked&&(this.value=t.value,this.querySelectorAll("pd-radio").forEach(a=>{const i=a;i!==t&&i.name===t.name&&(i.checked=!1)}),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}})))}};exports.PdRadioGroup.styles=s.css`
+    :host {
+      display: block;
+    }
+
+    div[role="radiogroup"] {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  `;h([o.property({type:String})],exports.PdRadioGroup.prototype,"name",void 0);h([o.property({type:String})],exports.PdRadioGroup.prototype,"value",void 0);h([o.property({type:Boolean,reflect:!0})],exports.PdRadioGroup.prototype,"disabled",void 0);h([o.property({type:Boolean})],exports.PdRadioGroup.prototype,"required",void 0);h([o.property({type:String,attribute:"aria-label"})],exports.PdRadioGroup.prototype,"ariaLabel",void 0);h([o.property({type:String,attribute:"aria-labelledby"})],exports.PdRadioGroup.prototype,"ariaLabelledby",void 0);exports.PdRadioGroup=h([o.customElement("pd-radio-group")],exports.PdRadioGroup);var v=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdSelect=class extends s.LitElement{constructor(){super(...arguments),this.variant="outlined",this.label="",this.value="",this.disabled=!1,this.required=!1,this.errorText="",this.error=!1,this.supportingText="",this.options=[],this.leadingIcon=""}handleChange(e){e.stopPropagation();const t=e.target;this.value=t.value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOpen(){this.trailingIcon?.classList.add("rotated")}handleClose(){this.trailingIcon?.classList.remove("rotated")}render(){const e=s.html`
+      ${this.leadingIcon?s.html`<md-icon slot="leading-icon">${this.leadingIcon}</md-icon>`:""}
+      <md-icon slot="trailing-icon">keyboard_arrow_down</md-icon>
+
+      ${this.options.map(t=>s.html`
+        <md-select-option .value=${t.value} ?disabled=${t.disabled}>
+          <div slot="headline">${t.label}</div>
+        </md-select-option>
+      `)}
+    `;return this.variant==="filled"?s.html`
+        <md-filled-select
+          .label=${this.label}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?error=${this.error}
+          .errorText=${this.errorText}
+          .supportingText=${this.supportingText}
+          @change=${this.handleChange}
+          @opening=${this.handleOpen}
+          @closed=${this.handleClose}
+        >
+          ${e}
+        </md-filled-select>
+      `:s.html`
+      <md-outlined-select
+        .label=${this.label}
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?error=${this.error}
+        .errorText=${this.errorText}
+        .supportingText=${this.supportingText}
+        @change=${this.handleChange}
+        @opening=${this.handleOpen}
+        @closed=${this.handleClose}
+      >
+        ${e}
+      </md-outlined-select>
+    `}};exports.PdSelect.styles=s.css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      --md-filled-select-text-field-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-select-text-field-container-shape: var(--md-sys-shape-corner-small);
+    }
+    md-filled-select,
+    md-outlined-select {
+      width: 100%;
+    }
+
+    [slot="trailing-icon"] {
+      transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    [slot="trailing-icon"].rotated {
+      transform: rotate(180deg);
+    }
+  `;v([o.query("md-filled-select, md-outlined-select")],exports.PdSelect.prototype,"select",void 0);v([o.query('[slot="trailing-icon"]')],exports.PdSelect.prototype,"trailingIcon",void 0);v([o.property({type:String})],exports.PdSelect.prototype,"variant",void 0);v([o.property({type:String})],exports.PdSelect.prototype,"label",void 0);v([o.property({type:String,reflect:!0})],exports.PdSelect.prototype,"value",void 0);v([o.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"disabled",void 0);v([o.property({type:Boolean})],exports.PdSelect.prototype,"required",void 0);v([o.property({type:String,attribute:"error-text"})],exports.PdSelect.prototype,"errorText",void 0);v([o.property({type:Boolean})],exports.PdSelect.prototype,"error",void 0);v([o.property({type:String,attribute:"supporting-text"})],exports.PdSelect.prototype,"supportingText",void 0);v([o.property({type:Array})],exports.PdSelect.prototype,"options",void 0);v([o.property({type:String,attribute:"leading-icon"})],exports.PdSelect.prototype,"leadingIcon",void 0);exports.PdSelect=v([o.customElement("pd-select")],exports.PdSelect);var u=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdSlider=class extends s.LitElement{constructor(){super(...arguments),this.disabled=!1,this.min=0,this.max=100,this.value=0,this.step=1,this.ticks=!1,this.labeled=!1,this.valueIndicator=!1,this.ariaLabel="",this.ariaLabelStart="",this.ariaLabelEnd=""}render(){const e=this.valueStart!==void 0||this.valueEnd!==void 0;return s.html`
+      <md-slider
+        ?disabled=${this.disabled}
+        min=${this.min}
+        max=${this.max}
+        .value=${this.value}
+        .valueStart=${this.valueStart}
+        .valueEnd=${this.valueEnd}
+        step=${this.step}
+        ?ticks=${this.ticks}
+        ?labeled=${this.labeled}
+        ?range=${e}
+        aria-label=${this.ariaLabel}
+        aria-label-start=${this.ariaLabelStart}
+        aria-label-end=${this.ariaLabelEnd}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      ></md-slider>
+    `}handleInput(e){const t=e.target;this.value=t.value??0,t.valueStart!==void 0&&(this.valueStart=t.valueStart),t.valueEnd!==void 0&&(this.valueEnd=t.valueEnd),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,valueStart:this.valueStart,valueEnd:this.valueEnd}}))}handleChange(e){const t=e.target;this.value=t.value??0,t.valueStart!==void 0&&(this.valueStart=t.valueStart),t.valueEnd!==void 0&&(this.valueEnd=t.valueEnd),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,valueStart:this.valueStart,valueEnd:this.valueEnd}}))}};exports.PdSlider.styles=s.css`
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
+
+    md-slider {
+      width: 100%;
+      /* Apply Prioticket design system tokens */
+      --md-slider-handle-color: var(--md-sys-color-primary);
+      --md-slider-active-track-color: var(--md-sys-color-primary);
+      --md-slider-inactive-track-color: var(--md-sys-color-outline-variant);
+      --md-slider-handle-shape: var(--md-sys-shape-corner-full);
+      --md-slider-tick-color: var(--md-sys-color-on-surface-variant);
+      --md-slider-label-container-color: var(--md-sys-color-inverse-surface);
+      --md-slider-label-text-color: var(--md-sys-color-inverse-on-surface);
+    }
+
+    :host([disabled]) md-slider {
+      --md-slider-handle-color: var(--md-sys-color-on-surface);
+      --md-slider-active-track-color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+  `;u([o.query("md-slider")],exports.PdSlider.prototype,"slider",void 0);u([o.property({type:Boolean,reflect:!0})],exports.PdSlider.prototype,"disabled",void 0);u([o.property({type:Number})],exports.PdSlider.prototype,"min",void 0);u([o.property({type:Number})],exports.PdSlider.prototype,"max",void 0);u([o.property({type:Number})],exports.PdSlider.prototype,"value",void 0);u([o.property({type:Number})],exports.PdSlider.prototype,"step",void 0);u([o.property({type:Boolean})],exports.PdSlider.prototype,"ticks",void 0);u([o.property({type:Boolean})],exports.PdSlider.prototype,"labeled",void 0);u([o.property({type:Boolean,attribute:"value-indicator"})],exports.PdSlider.prototype,"valueIndicator",void 0);u([o.property({type:Number,attribute:"value-start"})],exports.PdSlider.prototype,"valueStart",void 0);u([o.property({type:Number,attribute:"value-end"})],exports.PdSlider.prototype,"valueEnd",void 0);u([o.property({type:String,attribute:"aria-label"})],exports.PdSlider.prototype,"ariaLabel",void 0);u([o.property({type:String,attribute:"aria-label-start"})],exports.PdSlider.prototype,"ariaLabelStart",void 0);u([o.property({type:String,attribute:"aria-label-end"})],exports.PdSlider.prototype,"ariaLabelEnd",void 0);exports.PdSlider=u([o.customElement("pd-slider")],exports.PdSlider);var S=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdSwitch=class extends s.LitElement{constructor(){super(...arguments),this.selected=!1,this.disabled=!1,this.selectedIcon="",this.unselectedIcon="",this.showOnlySelectedIcon=!1,this.name="",this.value="on",this.ariaLabel="",this.required=!1}render(){return s.html`
+      <md-switch
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        ?show-only-selected-icon=${this.showOnlySelectedIcon}
+        name=${this.name}
+        value=${this.value}
+        aria-label=${this.ariaLabel}
+        ?required=${this.required}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      >
+        ${this.selectedIcon?s.html`<md-icon slot="selected-icon">${this.selectedIcon}</md-icon>`:""}
+        ${this.unselectedIcon?s.html`<md-icon slot="unselected-icon">${this.unselectedIcon}</md-icon>`:""}
+      </md-switch>
+    `}handleChange(e){const t=e.target;this.selected=t.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{selected:this.selected}}))}handleInput(e){const t=e.target;this.selected=t.selected,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{selected:this.selected}}))}};exports.PdSwitch.styles=s.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    md-switch {
+      /* Apply Prioticket design system tokens */
+      --md-switch-selected-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-handle-color: var(--md-sys-color-on-primary);
+      --md-switch-selected-focus-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-hover-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-pressed-track-color: var(--md-sys-color-primary);
+      
+      --md-switch-unselected-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-handle-color: var(--md-sys-color-outline);
+      --md-switch-unselected-focus-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-hover-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-pressed-track-color: var(--md-sys-color-surface-variant);
+
+      --md-switch-track-shape: var(--md-sys-shape-corner-full);
+      --md-switch-handle-shape: var(--md-sys-shape-corner-full);
+
+      /* Icon colors */
+      --md-switch-selected-icon-color: var(--md-sys-color-on-primary-container);
+      --md-switch-unselected-icon-color: var(--md-sys-color-surface-container-highest);
+    }
+
+    :host([disabled]) md-switch {
+      --md-switch-disabled-selected-track-color: var(--md-sys-color-on-surface);
+      --md-switch-disabled-selected-handle-color: var(--md-sys-color-surface);
+      --md-switch-disabled-unselected-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-disabled-unselected-handle-color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+
+    /* Focus styles */
+    md-switch:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 2px;
+    }
+  `;S([o.query("md-switch")],exports.PdSwitch.prototype,"switch",void 0);S([o.property({type:Boolean,reflect:!0})],exports.PdSwitch.prototype,"selected",void 0);S([o.property({type:Boolean,reflect:!0})],exports.PdSwitch.prototype,"disabled",void 0);S([o.property({type:String,attribute:"selected-icon"})],exports.PdSwitch.prototype,"selectedIcon",void 0);S([o.property({type:String,attribute:"unselected-icon"})],exports.PdSwitch.prototype,"unselectedIcon",void 0);S([o.property({type:Boolean,attribute:"show-only-selected-icon"})],exports.PdSwitch.prototype,"showOnlySelectedIcon",void 0);S([o.property({type:String})],exports.PdSwitch.prototype,"name",void 0);S([o.property({type:String})],exports.PdSwitch.prototype,"value",void 0);S([o.property({type:String,attribute:"aria-label"})],exports.PdSwitch.prototype,"ariaLabel",void 0);S([o.property({type:Boolean})],exports.PdSwitch.prototype,"required",void 0);exports.PdSwitch=S([o.customElement("pd-switch")],exports.PdSwitch);var P=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdTabs=class extends s.LitElement{constructor(){super(...arguments),this.activeTabIndex=0,this.autoActivate=!1,this.tabs=[],this.slottedTabs=[]}firstUpdated(){this.updateTabsFromSlot()}updateTabsFromSlot(){const t=(this.assignedTabs??[]).map(r=>({label:r.textContent?.trim()||"",icon:r.getAttribute("icon")||void 0,secondary:r.hasAttribute("secondary"),inlineIcon:r.hasAttribute("inline-icon"),ariaLabel:r.getAttribute("aria-label")||void 0}));this.slottedTabs=t,this.requestUpdate(),this.updateComplete.then(()=>this.forceActiveTabUpdate())}handleSlotChange(){this.updateTabsFromSlot()}forceActiveTabUpdate(){const e=this.shadowRoot?.querySelector("md-tabs");e&&this.activeTabIndex!==void 0&&(e.activeTabIndex=this.activeTabIndex)}renderTab(e,t){const r=e.icon?s.html`<md-icon slot="icon">${e.icon}</md-icon>`:"";return e.secondary?s.html`
+        <md-secondary-tab
+          ?inline-icon=${e.inlineIcon}
+          aria-label=${e.ariaLabel||e.label}
+        >
+          ${r}
+          ${e.label}
+        </md-secondary-tab>
+      `:s.html`
+      <md-primary-tab
+        ?inline-icon=${e.inlineIcon}
+        aria-label=${e.ariaLabel||e.label}
+      >
+        ${r}
+        ${e.label}
+      </md-primary-tab>
+    `}updated(e){super.updated(e),e.has("activeTabIndex")&&this.updateComplete.then(()=>this.forceActiveTabUpdate())}render(){const e=this.tabs.length>0?this.tabs:this.slottedTabs;return s.html`
+      <md-tabs
+        .activeTabIndex=${this.activeTabIndex}
+        ?auto-activate=${this.autoActivate}
+        @change=${this.handleChange}
+      >
+        ${e.map((t,r)=>this.renderTab(t,r))}
+      </md-tabs>
+      <div style="display: none;">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `}handleChange(e){const t=e.target;this.activeTabIndex=t.activeTabIndex,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{activeTabIndex:this.activeTabIndex}}))}};P([o.property({type:Number,attribute:"active-tab-index"})],exports.PdTabs.prototype,"activeTabIndex",void 0);P([o.property({type:Boolean,attribute:"auto-activate"})],exports.PdTabs.prototype,"autoActivate",void 0);P([o.property({type:Array})],exports.PdTabs.prototype,"tabs",void 0);P([o.state()],exports.PdTabs.prototype,"slottedTabs",void 0);P([o.queryAssignedElements({flatten:!0,selector:"pd-tab"})],exports.PdTabs.prototype,"assignedTabs",void 0);exports.PdTabs=P([o.customElement("pd-tabs")],exports.PdTabs);exports.PdTab=class extends s.LitElement{constructor(){super(...arguments),this.secondary=!1,this.inlineIcon=!1,this.icon="",this.ariaLabel=""}render(){return s.html`<slot></slot>`}};exports.PdTab.styles=s.css`
+    :host {
+      display: none;
+    }
+  `;P([o.property({type:Boolean})],exports.PdTab.prototype,"secondary",void 0);P([o.property({type:Boolean,attribute:"inline-icon"})],exports.PdTab.prototype,"inlineIcon",void 0);P([o.property({type:String})],exports.PdTab.prototype,"icon",void 0);P([o.property({type:String,attribute:"aria-label"})],exports.PdTab.prototype,"ariaLabel",void 0);exports.PdTab=P([o.customElement("pd-tab")],exports.PdTab);var g=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdSegmentedButton=class extends s.LitElement{constructor(){super(...arguments),this.multiSelect=!1,this.size="medium",this.disabled=!1,this.selectedValues=[],this._segments=[]}connectedCallback(){super.connectedCallback(),this.addEventListener("segment-click",this._handleSegmentClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("segment-click",this._handleSegmentClick)}firstUpdated(){this._updateSegments()}_updateSegments(){const e=this.querySelectorAll("pd-segment-item");this._segments=Array.from(e),this._segments.forEach((t,r)=>{t.disabled=this.disabled||t.disabled,t.setAttribute("data-segment-index",r.toString()),this.selectedValues.includes(t.value)&&(t.selected=!0)})}_handleSegmentClick(e){if(this.disabled)return;const t=e.target,r=t.value;this.multiSelect?this.selectedValues.indexOf(r)>-1?(this.selectedValues=this.selectedValues.filter(i=>i!==r),t.selected=!1):(this.selectedValues=[...this.selectedValues,r],t.selected=!0):this.selectedValues[0]===r?(this.selectedValues=[],t.selected=!1):(this._segments.forEach(a=>a.selected=!1),this.selectedValues=[r],t.selected=!0),this.dispatchEvent(new CustomEvent("selectionchange",{detail:{selectedValues:this.selectedValues,multiSelect:this.multiSelect},bubbles:!0,composed:!0}))}render(){return s.html`
+      <div class="segmented-button" role="group">
+        <slot @slotchange=${this._updateSegments}></slot>
+      </div>
+    `}};exports.PdSegmentedButton.styles=s.css`
+    :host {
+      display: inline-flex;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .segmented-button {
+      display: inline-flex;
+      border-radius: var(--md-segmented-button-shape, var(--md-sys-shape-corner-small, 20px));
+      border: 1px solid var(--md-sys-color-outline, #79747e);
+      overflow: hidden;
+      background: var(--md-sys-color-surface, #fef7ff);
+    }
+
+    :host([disabled]) .segmented-button {
+      border-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+
+    /* Size variants */
+    :host([size='small']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+    }
+
+    :host([size='medium']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+    }
+
+    :host([size='large']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+    }
+
+    ::slotted(pd-segment-item) {
+      border-right: 1px solid var(--md-sys-color-outline, #79747e);
+    }
+
+    ::slotted(pd-segment-item:last-child) {
+      border-right: none;
+    }
+
+    :host([disabled]) ::slotted(pd-segment-item) {
+      border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+  `;g([o.property({type:Boolean,attribute:"multi-select"})],exports.PdSegmentedButton.prototype,"multiSelect",void 0);g([o.property({type:String,reflect:!0})],exports.PdSegmentedButton.prototype,"size",void 0);g([o.property({type:Boolean,reflect:!0})],exports.PdSegmentedButton.prototype,"disabled",void 0);g([o.property({type:Array})],exports.PdSegmentedButton.prototype,"selectedValues",void 0);g([o.state()],exports.PdSegmentedButton.prototype,"_segments",void 0);exports.PdSegmentedButton=g([o.customElement("pd-segmented-button")],exports.PdSegmentedButton);exports.PdSegmentItem=class extends s.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 s.html`
+      <pd-button
+        class="segment ${this.selected?"selected":""} ${this.iconOnly?"icon-only":""}"
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        aria-pressed=${this.selected}
+      >
+        ${this.icon?s.html`<md-icon class="segment-icon">${this.icon}</md-icon>`:""}
+        ${this.iconOnly?"":s.html`<span class="segment-label"><slot></slot></span>`}
+      </pd-button>
+    `}};exports.PdSegmentItem.styles=s.css`
+    :host {
+      display: inline-flex;
+    }
+
+    .segment {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--md-sys-spacing-200, 8px);
+      padding: 0 var(--md-sys-spacing-400, 16px);
+      height: var(--md-segmented-button-container-height, 2.5rem);
+      border: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface, #1d1b20);
+      font-family: inherit;
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      font-weight: var(--md-sys-typescale-label-large-weight, 500);
+      cursor: pointer;
+      transition: all 150ms ease-in-out;
+      position: relative;
+      outline: none;
+      min-width: 48px;
+    }
+
+    .segment.icon-only {
+      padding: 0;
+      width: var(--md-segmented-button-container-height, 2.5rem);
+    }
+
+    .segment:hover:not(:disabled) {
+      background: var(--md-sys-color-on-surface-opacity-08, rgba(29, 27, 32, 0.08));
+    }
+
+    .segment:focus-visible {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+
+    .segment:active:not(:disabled) {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+
+    .segment.selected {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      color: var(--md-sys-color-on-secondary-container, #1d192b);
+    }
+
+    .segment.selected:hover:not(:disabled) {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      filter: brightness(0.95);
+    }
+
+    .segment:disabled {
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+      cursor: not-allowed;
+    }
+
+    .segment.selected:disabled {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+    }
+
+    .segment-icon {
+      --md-icon-size: 18px;
+    }
+
+    .segment-label {
+      white-space: nowrap;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .segment {
+        transition: none;
+      }
+    }
+  `;g([o.property({type:String})],exports.PdSegmentItem.prototype,"value",void 0);g([o.property({type:Boolean,reflect:!0})],exports.PdSegmentItem.prototype,"selected",void 0);g([o.property({type:Boolean,reflect:!0})],exports.PdSegmentItem.prototype,"disabled",void 0);g([o.property({type:String})],exports.PdSegmentItem.prototype,"icon",void 0);g([o.property({type:Boolean,attribute:"icon-only"})],exports.PdSegmentItem.prototype,"iconOnly",void 0);exports.PdSegmentItem=g([o.customElement("pd-segment-item")],exports.PdSegmentItem);var y=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdSegmentedStepper=class extends s.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,r)=>{t.disabled=this.disabled,t.setAttribute("data-step-index",r.toString()),t.stepNumber=r+1;const a=this._completedStepsSet.has(r)||this.completedSteps.includes(r);a?t.state="completed":r===this.activeStep?t.state="active":t.state="pending";const i=!this.linear||r<=this.activeStep||a;t.clickable=this.allowStepNavigation&&i&&!this.disabled})}_handleStepClick(e){if(this.disabled)return;const t=e.target,r=parseInt(t.getAttribute("data-step-index")||"0");t.clickable&&this.allowStepNavigation&&this.goToStep(r)}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,r)=>t-r),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,r)=>t-r),this._updateSteps())}reset(){this.activeStep=0,this.completedSteps=[],this._completedStepsSet.clear(),this._updateSteps()}render(){return s.html`
+      <div class="segmented-stepper" role="group" aria-label="Progress stepper">
+        <slot @slotchange=${this._updateSteps}></slot>
+      </div>
+    `}};exports.PdSegmentedStepper.styles=s.css`
+    :host {
+      display: inline-flex;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .segmented-stepper {
+      display: inline-flex;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+      overflow: hidden;
+      background: var(--md-sys-color-surface, #fef7ff);
+    }
+
+    :host([disabled]) .segmented-stepper {
+      border-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      background: var(--md-sys-color-surface-variant, #e7e0ec);
+    }
+
+    /* Size variants */
+    :host([size='small']) {
+      --md-stepper-container-height: var(--md-sys-button-container-height-small, 2rem);
+    }
+
+    :host([size='medium']) {
+      --md-stepper-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+    }
+
+    :host([size='large']) {
+      --md-stepper-container-height: var(--md-sys-button-container-height-large, 3rem);
+    }
+
+    ::slotted(pd-stepper-item) {
+      border-right: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+    }
+
+    ::slotted(pd-stepper-item:last-child) {
+      border-right: none;
+    }
+
+    :host([disabled]) ::slotted(pd-stepper-item) {
+      border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+  `;y([o.property({type:Number,attribute:"active-step"})],exports.PdSegmentedStepper.prototype,"activeStep",void 0);y([o.property({type:Array,attribute:"completed-steps"})],exports.PdSegmentedStepper.prototype,"completedSteps",void 0);y([o.property({type:String,reflect:!0})],exports.PdSegmentedStepper.prototype,"size",void 0);y([o.property({type:Boolean,reflect:!0})],exports.PdSegmentedStepper.prototype,"disabled",void 0);y([o.property({type:Boolean,attribute:"allow-step-navigation"})],exports.PdSegmentedStepper.prototype,"allowStepNavigation",void 0);y([o.property({type:Boolean})],exports.PdSegmentedStepper.prototype,"linear",void 0);y([o.state()],exports.PdSegmentedStepper.prototype,"_steps",void 0);y([o.state()],exports.PdSegmentedStepper.prototype,"_completedStepsSet",void 0);exports.PdSegmentedStepper=y([o.customElement("pd-segmented-stepper")],exports.PdSegmentedStepper);exports.PdStepperItem=class extends s.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 s.html`
+      <button
+        class="step ${this.state} ${this.clickable?"clickable":""}"
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        aria-current=${this.state==="active"?"step":"false"}
+        aria-label="Step ${this.stepNumber}: ${this.state}"
+      >
+        <div class="step-indicator">
+          ${e?s.html`<md-icon class="check-icon">check</md-icon>`:""}
+          ${this.icon?s.html`<md-icon class="step-icon">${this.icon}</md-icon>`:""}
+          ${t?s.html`<span class="step-number">${this.stepNumber}</span>`:""}
+        </div>
+        <span class="step-label"><slot></slot></span>
+      </button>
+    `}};exports.PdStepperItem.styles=s.css`
+    :host {
+      display: inline-flex;
+    }
+
+    .step {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--md-sys-spacing-200, 8px);
+      padding: 0 var(--md-sys-spacing-300, 12px);
+      height: var(--md-stepper-container-height, 2.5rem);
+      border: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+      font-family: inherit;
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      font-weight: var(--md-sys-typescale-label-large-weight, 500);
+      cursor: default;
+      transition: all 150ms ease-in-out;
+      position: relative;
+      outline: none;
+      min-width: fit-content;
+    }
+
+    .step.clickable {
+      cursor: pointer;
+    }
+
+    .step.clickable:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.08));
+    }
+
+    .step.clickable:focus-visible {
+      background: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.12));
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+
+    .step.clickable:active:not(:disabled) {
+      background: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.16));
+    }
+
+    /* Step states */
+    .step.pending {
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+    }
+
+    .step.active {
+      background: var(--md-sys-color-primary-container, #eaddff);
+      color: var(--md-sys-color-on-primary-container, #21005d);
+      font-weight: 600;
+    }
+
+    .step.completed {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      color: var(--md-sys-color-on-secondary-container, #1d192b);
+    }
+
+    .step.disabled {
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+      cursor: not-allowed;
+    }
+
+    /* Step indicator */
+    .step-indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--md-sys-color-outline-variant, #cac4d0);
+      color: var(--md-sys-color-on-surface, #1d1b20);
+      font-size: 0.75rem;
+      font-weight: 600;
+      flex-shrink: 0;
+      transition: all 150ms ease-in-out;
+    }
+
+    .step.pending .step-indicator {
+      background: var(--md-sys-color-outline-variant, #cac4d0);
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+    }
+
+    .step.active .step-indicator {
+      background: var(--md-sys-color-primary, #6750a4);
+      color: var(--md-sys-color-on-primary, #ffffff);
+    }
+
+    .step.completed .step-indicator {
+      background: var(--md-sys-color-secondary, #625b71);
+      color: var(--md-sys-color-on-secondary, #ffffff);
+    }
+
+    .step.disabled .step-indicator {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+    }
+
+    /* Icons */
+    .check-icon,
+    .step-icon {
+      --md-icon-size: 14px;
+    }
+
+    .step-number {
+      font-size: 0.75rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .step-label {
+      white-space: nowrap;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .step,
+      .step-indicator {
+        transition: none;
+      }
+    }
+
+    /* Focus ring for keyboard navigation */
+    .step:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+    }
+  `;y([o.property({type:Number,attribute:"step-number"})],exports.PdStepperItem.prototype,"stepNumber",void 0);y([o.property({type:String,reflect:!0})],exports.PdStepperItem.prototype,"state",void 0);y([o.property({type:Boolean,reflect:!0})],exports.PdStepperItem.prototype,"disabled",void 0);y([o.property({type:Boolean})],exports.PdStepperItem.prototype,"clickable",void 0);y([o.property({type:String})],exports.PdStepperItem.prototype,"icon",void 0);exports.PdStepperItem=y([o.customElement("pd-stepper-item")],exports.PdStepperItem);var C=function(l,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,r);else for(var d=l.length-1;d>=0;d--)(n=l[d])&&(i=(a<3?n(i):a>3?n(e,t,i):n(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};exports.PdStepper=class extends s.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 s.html`
+      <div class=${O.classMap(t)}>
+        ${this.steps.map((r,a)=>this._renderStep(r,a))}
+        ${this.showContent&&!e?this._renderContent():""}
+      </div>
+    `}_renderStep(e,t){const r=this.currentStep===t,a=this._completedSteps.has(t)||e.completed,i=e.error&&!a,n=!this.linear||t<=this.currentStep||a,d=this.orientation==="vertical",R={step:!0,active:r,completed:a||!1,error:i||!1,clickable:n||!1,optional:e.optional||!1},q=a?"✓":(t+1).toString(),j=t===this.steps.length-1;return s.html`
+      <div class=${O.classMap(R)}>
+        <div class="step-header" @click=${()=>this._handleStepClick(t,n||!1)}>
+          <div class="step-icon">
+            <span class="step-number">${i?"!":q}</span>
+          </div>
+          ${j?"":s.html`<div class="step-connector"></div>`}
+          <div class="step-label-container">
+            <span class="step-label">${e.label}</span>
+            ${e.optional?s.html`<span class="step-optional">Optional</span>`:""}
+          </div>
+        </div>
+        ${d&&this.showContent&&r&&e.content?s.html`
+          <div class="step-content">
+            ${e.content}
+          </div>
+        `:""}
+      </div>
+    `}_renderContent(){const e=this.steps[this.currentStep];return e?.content?s.html`
+      <div class="stepper-content">
+        ${e.content}
+      </div>
+    `:""}_handleStepClick(e,t){if(!t)return;const r=this.currentStep;this.currentStep=e,this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:e,previousStep:r,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=s.css`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .stepper {
+      display: flex;
+      position: relative;
+    }
+
+    .stepper.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .stepper.vertical {
+      flex-direction: column;
+    }
+
+    .stepper.alternative-label .step {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    /* Step container */
+    .step {
+      display: flex;
+      position: relative;
+      min-height: 72px;
+    }
+
+    .stepper.horizontal .step {
+      flex: 1;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .stepper.vertical .step {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    /* Step header */
+    .step-header {
+      display: flex;
+      align-items: flex-start;
+      cursor: default;
+      position: relative;
+      padding: var(--md-sys-spacing-medium, 8px);
+    }
+
+    .step.clickable .step-header {
+      cursor: pointer;
+    }
+
+    .stepper.horizontal .step-header {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+    }
+
+    .stepper.vertical .step-header {
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: left;
+    }
+
+    .stepper.alternative-label .step-header {
+      flex-direction: column;
+    }
+
+    /* Step icon */
+    .step-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: var(--pd-stepper-inactive-color, var(--md-sys-color-surface-variant, #f3f3f3));
+      color: var(--md-sys-color-on-surface-variant, #666);
+      border: 2px solid var(--pd-stepper-inactive-color, var(--md-sys-color-outline-variant, #ddd));
+      transition: all 0.2s ease;
+      z-index: 1;
+    }
+
+    .step.active .step-icon {
+      background-color: var(--pd-stepper-active-color, var(--md-sys-color-primary, #6750a4));
+      color: var(--md-sys-color-on-primary, #fff);
+      border-color: var(--pd-stepper-active-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.completed .step-icon {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+      color: var(--md-sys-color-on-primary, #fff);
+      border-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.error .step-icon {
+      background-color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+      color: var(--md-sys-color-on-error, #fff);
+      border-color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+    }
+
+    .step-number {
+      font-size: var(--md-sys-typescale-label-medium-size, 12px);
+      font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+      line-height: 1;
+    }
+
+    /* Step connector */
+    .step-connector {
+      position: absolute;
+      background-color: var(--pd-stepper-connector-color, var(--md-sys-color-outline-variant, #ddd));
+      transition: background-color 0.2s ease;
+    }
+
+    .stepper.horizontal .step-connector {
+      height: 2px;
+      left: calc(50% + 20px);
+      right: calc(-50% + 20px);
+      top: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+      width: calc(100% - 40px);
+    }
+
+    .stepper.vertical .step-connector {
+      width: 2px;
+      left: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+      top: calc(var(--md-sys-spacing-medium, 8px) + 40px);
+      bottom: calc(-100% + var(--md-sys-spacing-medium, 8px));
+      height: calc(100% - 40px);
+    }
+
+    .step.completed .step-connector {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.active .step-connector {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    /* Step labels */
+    .step-label-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .stepper.horizontal .step-label-container {
+      margin-top: var(--md-sys-spacing-small, 8px);
+      align-items: center;
+    }
+
+    .stepper.vertical .step-label-container {
+      margin-left: var(--md-sys-spacing-medium, 16px);
+      align-items: flex-start;
+      margin-top: 8px;
+    }
+
+    .step-label {
+      font-size: var(--md-sys-typescale-body-medium-size, 14px);
+      font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+      color: var(--md-sys-color-on-surface-variant, #666);
+      line-height: 1.4;
+      margin: 0;
+    }
+
+    .step.active .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+      font-weight: var(--md-sys-typescale-body-medium-weight, 500);
+    }
+
+    .step.completed .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+    }
+
+    .step.error .step-label {
+      color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+    }
+
+    .step-optional {
+      font-size: var(--md-sys-typescale-body-small-size, 12px);
+      color: var(--md-sys-color-on-surface-variant, #999);
+      font-style: italic;
+    }
+
+    /* Step content */
+    .step-content {
+      margin-left: calc(var(--md-sys-spacing-medium, 8px) + 40px + var(--md-sys-spacing-medium, 16px));
+      margin-top: var(--md-sys-spacing-medium, 16px);
+      margin-bottom: var(--md-sys-spacing-large, 24px);
+      padding: var(--md-sys-spacing-medium, 16px);
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background-color: var(--md-sys-color-surface-container-lowest, #fff);
+    }
+
+    .stepper-content {
+      margin-top: var(--md-sys-spacing-large, 24px);
+      padding: var(--md-sys-spacing-large, 24px);
+      border-radius: var(--md-sys-shape-corner-medium, 12px);
+      background-color: var(--md-sys-color-surface-container-lowest, #fff);
+      border: 1px solid var(--md-sys-color-outline-variant, #ddd);
+    }
+
+    /* Hover states */
+    .step.clickable .step-header:hover .step-icon {
+      transform: scale(1.1);
+    }
+
+    .step.clickable .step-header:hover .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+    }
+
+    /* Focus states for accessibility */
+    .step.clickable .step-header:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .stepper.horizontal {
+        flex-direction: column;
+      }
+
+      .stepper.horizontal .step {
+        flex-direction: row;
+      }
+
+      .stepper.horizontal .step-header {
+        flex-direction: row;
+        text-align: left;
+      }
+
+      .stepper.horizontal .step-connector {
+        left: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+        top: calc(var(--md-sys-spacing-medium, 8px) + 40px);
+        width: 2px;
+        height: calc(100% - 40px);
+        right: auto;
+      }
+
+      .stepper.horizontal .step-label-container {
+        margin-top: 8px;
+        margin-left: var(--md-sys-spacing-medium, 16px);
+        align-items: flex-start;
+      }
+    }
+  `;C([o.property({type:Array})],exports.PdStepper.prototype,"steps",void 0);C([o.property({type:Number})],exports.PdStepper.prototype,"currentStep",void 0);C([o.property({type:String})],exports.PdStepper.prototype,"orientation",void 0);C([o.property({type:Boolean})],exports.PdStepper.prototype,"linear",void 0);C([o.property({type:Boolean})],exports.PdStepper.prototype,"showContent",void 0);C([o.property({type:Boolean})],exports.PdStepper.prototype,"alternativeLabel",void 0);C([o.state()],exports.PdStepper.prototype,"_completedSteps",void 0);exports.PdStepper=C([o.customElement("pd-stepper")],exports.PdStepper);