@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,118 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("lit"),t=require("lit/decorators.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/icon/icon.js");var p=Object.defineProperty,n=Object.getOwnPropertyDescriptor,s=(o,i,e,r)=>{for(var l=r>1?void 0:r?n(i,e):i,c=o.length-1,h;c>=0;c--)(h=o[c])&&(l=(r?h(i,e,l):h(l))||l);return r&&l&&p(i,e,l),l};exports.PdChip=class extends a.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 i=this.icon?a.html`<md-icon slot="icon">${this.icon}</md-icon>`:a.nothing,e={label:this.label,disabled:this.disabled,"always-focusable":this.alwaysFocusable,"has-icon":this.hasIcon||!!this.icon};switch(this.variant){case"filter":return a.html`
+          <md-filter-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?selected=${this.selected}
+            ?removable=${this.removable}
+            @click=${this._handleClick}
+            @remove=${this._handleRemove}
+          >
+            ${i}
+          </md-filter-chip>
+        `;case"input":return a.html`
+          <md-input-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?avatar=${this.avatar}
+            ?remove-only=${this.removeOnly}
+            @click=${this._handleClick}
+            @remove=${this._handleRemove}
+          >
+            ${i}
+          </md-input-chip>
+        `;case"suggestion":return a.html`
+          <md-suggestion-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?elevated=${this.elevated}
+            .href=${this.href||a.nothing}
+            .target=${this.target||a.nothing}
+            @click=${this._handleClick}
+          >
+            ${i}
+          </md-suggestion-chip>
+        `;default:return a.html`
+          <md-assist-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?elevated=${this.elevated}
+            .href=${this.href||a.nothing}
+            .target=${this.target||a.nothing}
+            @click=${this._handleClick}
+          >
+            ${i}
+          </md-assist-chip>
+        `}}render(){return this.getChipTemplate()}_handleClick(i){this.dispatchEvent(new CustomEvent("chip-click",{detail:{variant:this.variant,label:this.label,selected:this.selected},bubbles:!0}))}_handleRemove(i){this.dispatchEvent(new CustomEvent("chip-remove",{detail:{variant:this.variant,label:this.label},bubbles:!0}))}};exports.PdChip.styles=a.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);
+    }
+  `;s([t.property({type:String})],exports.PdChip.prototype,"variant",2);s([t.property({type:String})],exports.PdChip.prototype,"label",2);s([t.property({type:Boolean})],exports.PdChip.prototype,"disabled",2);s([t.property({type:Boolean,attribute:"always-focusable"})],exports.PdChip.prototype,"alwaysFocusable",2);s([t.property({type:Boolean,attribute:"has-icon"})],exports.PdChip.prototype,"hasIcon",2);s([t.property({type:String})],exports.PdChip.prototype,"icon",2);s([t.property({type:Boolean})],exports.PdChip.prototype,"selected",2);s([t.property({type:Boolean})],exports.PdChip.prototype,"removable",2);s([t.property({type:Boolean})],exports.PdChip.prototype,"elevated",2);s([t.property({type:String})],exports.PdChip.prototype,"href",2);s([t.property({type:String})],exports.PdChip.prototype,"target",2);s([t.property({type:Boolean})],exports.PdChip.prototype,"avatar",2);s([t.property({type:Boolean,attribute:"remove-only"})],exports.PdChip.prototype,"removeOnly",2);exports.PdChip=s([t.customElement("pd-chip")],exports.PdChip);

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

@@ -0,0 +1,220 @@
+import { css as d, LitElement as m, html as o, nothing as r } from "lit";
+import { property as a, customElement as y } from "lit/decorators.js";
+import "@material/web/chips/assist-chip.js";
+import "@material/web/chips/filter-chip.js";
+import "@material/web/chips/input-chip.js";
+import "@material/web/chips/suggestion-chip.js";
+import "@material/web/icon/icon.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (i, e, h, c) => {
+  for (var l = c > 1 ? void 0 : c ? v(e, h) : e, n = i.length - 1, p; n >= 0; n--)
+    (p = i[n]) && (l = (c ? p(e, h, l) : p(l)) || l);
+  return c && l && b(e, h, l), l;
+};
+let t = class extends m {
+  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 i = this.icon ? o`<md-icon slot="icon">${this.icon}</md-icon>` : r, e = {
+      label: this.label,
+      disabled: this.disabled,
+      "always-focusable": this.alwaysFocusable,
+      "has-icon": this.hasIcon || !!this.icon
+    };
+    switch (this.variant) {
+      case "filter":
+        return o`
+          <md-filter-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?selected=${this.selected}
+            ?removable=${this.removable}
+            @click=${this._handleClick}
+            @remove=${this._handleRemove}
+          >
+            ${i}
+          </md-filter-chip>
+        `;
+      case "input":
+        return o`
+          <md-input-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?avatar=${this.avatar}
+            ?remove-only=${this.removeOnly}
+            @click=${this._handleClick}
+            @remove=${this._handleRemove}
+          >
+            ${i}
+          </md-input-chip>
+        `;
+      case "suggestion":
+        return o`
+          <md-suggestion-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?elevated=${this.elevated}
+            .href=${this.href || r}
+            .target=${this.target || r}
+            @click=${this._handleClick}
+          >
+            ${i}
+          </md-suggestion-chip>
+        `;
+      default:
+        return o`
+          <md-assist-chip
+            .label=${e.label}
+            ?disabled=${e.disabled}
+            ?always-focusable=${e["always-focusable"]}
+            ?has-icon=${e["has-icon"]}
+            ?elevated=${this.elevated}
+            .href=${this.href || r}
+            .target=${this.target || r}
+            @click=${this._handleClick}
+          >
+            ${i}
+          </md-assist-chip>
+        `;
+    }
+  }
+  render() {
+    return this.getChipTemplate();
+  }
+  _handleClick(i) {
+    this.dispatchEvent(new CustomEvent("chip-click", {
+      detail: {
+        variant: this.variant,
+        label: this.label,
+        selected: this.selected
+      },
+      bubbles: !0
+    }));
+  }
+  _handleRemove(i) {
+    this.dispatchEvent(new CustomEvent("chip-remove", {
+      detail: {
+        variant: this.variant,
+        label: this.label
+      },
+      bubbles: !0
+    }));
+  }
+};
+t.styles = d`
+    :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);
+    }
+  `;
+s([
+  a({ type: String })
+], t.prototype, "variant", 2);
+s([
+  a({ type: String })
+], t.prototype, "label", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "disabled", 2);
+s([
+  a({ type: Boolean, attribute: "always-focusable" })
+], t.prototype, "alwaysFocusable", 2);
+s([
+  a({ type: Boolean, attribute: "has-icon" })
+], t.prototype, "hasIcon", 2);
+s([
+  a({ type: String })
+], t.prototype, "icon", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "selected", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "removable", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "elevated", 2);
+s([
+  a({ type: String })
+], t.prototype, "href", 2);
+s([
+  a({ type: String })
+], t.prototype, "target", 2);
+s([
+  a({ type: Boolean })
+], t.prototype, "avatar", 2);
+s([
+  a({ type: Boolean, attribute: "remove-only" })
+], t.prototype, "removeOnly", 2);
+t = s([
+  y("pd-chip")
+], t);
+export {
+  t as PdChip
+};

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

@@ -0,0 +1,195 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),e=require("lit/decorators.js");require("@material/web/dialog/dialog.js");require("@material/web/button/text-button.js");require("@material/web/button/filled-button.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(n,a,l,s)=>{for(var i=s>1?void 0:s?m(a,l):a,r=n.length-1,d;r>=0;r--)(d=n[r])&&(i=(s?d(a,l,i):d(i))||i);return s&&i&&c(a,l,i),i};exports.PdDialog=class extends t.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}))}handleSecondaryAction(){this.dispatchEvent(new CustomEvent("secondary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}render(){return t.html`
+      <md-dialog
+        ?open=${this.open}
+        ?no-focus-trap=${!this.closableByBackdrop}
+        @open=${this.handleDialogOpen}
+        @closed=${this.handleDialogClose}
+        @cancel=${a=>{this.closableByBackdrop||a.preventDefault()}}
+      >
+        ${this.headline||this.showCloseButton?t.html`
+          <div slot="headline" class="headline-container">
+            ${this.headline?t.html`<span class="headline-text">${this.headline}</span>`:""}
+            ${this.showCloseButton?t.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?t.html`
+          <div slot="actions" class="actions-container">
+            ${this.secondaryAction?t.html`
+              <md-text-button
+                class="secondary-action"
+                @click=${this.handleSecondaryAction}
+              >
+                ${this.secondaryAction}
+              </md-text-button>
+            `:""}
+            ${this.primaryAction?t.html`
+              <md-filled-button
+                class="primary-action"
+                @click=${this.handlePrimaryAction}
+              >
+                ${this.primaryAction}
+              </md-filled-button>
+            `:""}
+            <slot name="actions"></slot>
+          </div>
+        `:t.html`<slot name="actions" slot="actions"></slot>`}
+      </md-dialog>
+    `}};exports.PdDialog.styles=t.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([e.property({type:Boolean,reflect:!0})],exports.PdDialog.prototype,"open",2);o([e.property({type:String})],exports.PdDialog.prototype,"size",2);o([e.property({type:String})],exports.PdDialog.prototype,"variant",2);o([e.property({type:String})],exports.PdDialog.prototype,"headline",2);o([e.property({type:String,attribute:"primary-action"})],exports.PdDialog.prototype,"primaryAction",2);o([e.property({type:String,attribute:"secondary-action"})],exports.PdDialog.prototype,"secondaryAction",2);o([e.property({type:Boolean,attribute:"closable-by-backdrop"})],exports.PdDialog.prototype,"closableByBackdrop",2);o([e.property({type:Boolean,attribute:"show-close-button"})],exports.PdDialog.prototype,"showCloseButton",2);o([e.query("md-dialog")],exports.PdDialog.prototype,"dialogElement",2);exports.PdDialog=o([e.customElement("pd-dialog")],exports.PdDialog);