@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,229 @@
+import { css as h, LitElement as y, html as i, nothing as u } from "lit";
+import { property as e, customElement as g } from "lit/decorators.js";
+import "@material/web/list/list.js";
+import "@material/web/list/list-item.js";
+import "@material/web/divider/divider.js";
+import "@material/web/icon/icon.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (r, a, d, n) => {
+  for (var o = n > 1 ? void 0 : n ? b(a, d) : a, l = r.length - 1, c; l >= 0; l--)
+    (c = r[l]) && (o = (n ? c(a, d, o) : c(o)) || o);
+  return n && o && v(a, d, o), o;
+};
+let m = class extends y {
+  constructor() {
+    super(...arguments), this.role = "list", this.tabindex = -1;
+  }
+  render() {
+    return i`
+      <md-list
+        role=${this.role}
+        tabindex=${this.tabindex}
+      >
+        <slot></slot>
+      </md-list>
+    `;
+  }
+};
+m.styles = h`
+    :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;
+    }
+  `;
+t([
+  e({ type: String })
+], m.prototype, "role", 2);
+t([
+  e({ type: Number })
+], m.prototype, "tabindex", 2);
+m = t([
+  g("pd-list")
+], m);
+let s = class extends y {
+  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 r = this.headline ? i`<div slot="headline">${this.headline}</div>` : i`<slot name="headline" slot="headline"></slot>`, a = this.supportingText ? i`<div slot="supporting-text">${this.supportingText}</div>` : i`<slot name="supporting-text" slot="supporting-text"></slot>`, d = this.trailingSupportingText ? i`<div slot="trailing-supporting-text">${this.trailingSupportingText}</div>` : i`<slot name="trailing-supporting-text" slot="trailing-supporting-text"></slot>`, n = this.icon ? i`<md-icon slot="start">${this.icon}</md-icon>` : this.avatar ? i`<img slot="start" src="${this.avatar}" class="avatar" alt="" />` : this.image ? i`<img slot="start" src="${this.image}" class="image" alt="" />` : i`<slot name="start" slot="start"></slot>`, o = this.trailingIcon ? i`<md-icon slot="end">${this.trailingIcon}</md-icon>` : i`<slot name="end" slot="end"></slot>`, l = {
+      disabled: this.disabled,
+      tabindex: this.tabindex,
+      href: this.href || u,
+      target: this.target || u
+    };
+    return i`
+      <md-list-item
+        .type=${this.type}
+        ?disabled=${l.disabled}
+        .tabindex=${l.tabindex}
+        .href=${l.href}
+        .target=${l.target}
+        @click=${this._handleClick}
+        @keydown=${this._handleKeydown}
+      >
+        ${n}
+        ${r}
+        ${a}
+        ${d}
+        ${o}
+      </md-list-item>
+    `;
+  }
+  render() {
+    return this.getListItemTemplate();
+  }
+  _handleClick(r) {
+    this.disabled || this.dispatchEvent(new CustomEvent("list-item-click", {
+      detail: {
+        type: this.type,
+        headline: this.headline,
+        href: this.href
+      },
+      bubbles: !0
+    }));
+  }
+  _handleKeydown(r) {
+    this.disabled || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleClick(r));
+  }
+};
+s.styles = h`
+    :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;
+    }
+  `;
+t([
+  e({ type: String })
+], s.prototype, "type", 2);
+t([
+  e({ type: String })
+], s.prototype, "headline", 2);
+t([
+  e({ type: String, attribute: "supporting-text" })
+], s.prototype, "supportingText", 2);
+t([
+  e({ type: String, attribute: "trailing-supporting-text" })
+], s.prototype, "trailingSupportingText", 2);
+t([
+  e({ type: String })
+], s.prototype, "href", 2);
+t([
+  e({ type: String })
+], s.prototype, "target", 2);
+t([
+  e({ type: Boolean })
+], s.prototype, "disabled", 2);
+t([
+  e({ type: String })
+], s.prototype, "icon", 2);
+t([
+  e({ type: String, attribute: "trailing-icon" })
+], s.prototype, "trailingIcon", 2);
+t([
+  e({ type: String })
+], s.prototype, "avatar", 2);
+t([
+  e({ type: String })
+], s.prototype, "image", 2);
+t([
+  e({ type: Number })
+], s.prototype, "tabindex", 2);
+s = t([
+  g("pd-list-item")
+], s);
+let p = class extends y {
+  constructor() {
+    super(...arguments), this.inset = !1, this.role = "separator";
+  }
+  render() {
+    return i`
+      <md-divider
+        ?inset=${this.inset}
+        role=${this.role}
+      ></md-divider>
+    `;
+  }
+};
+p.styles = h`
+    :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;
+    }
+  `;
+t([
+  e({ type: Boolean })
+], p.prototype, "inset", 2);
+t([
+  e({ type: String })
+], p.prototype, "role", 2);
+p = t([
+  g("pd-list-divider")
+], p);
+export {
+  m as PdList,
+  p as PdListDivider,
+  s as PdListItem
+};

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

@@ -0,0 +1,85 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),e=require("lit/decorators.js");require("@material/web/menu/menu-item.js");require("@material/web/icon/icon.js");var l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,t=(m,r,n,o)=>{for(var i=o>1?void 0:o?p(r,n):r,a=m.length-1,d;a>=0;a--)(d=m[a])&&(i=(o?d(r,n,i):d(i))||i);return o&&i&&l(r,n,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(r){if(this.disabled){r.preventDefault(),r.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 r=this.leadingIcon?s.html`<md-icon slot="start">${this.leadingIcon}</md-icon>`:s.html`<slot name="start" slot="start"></slot>`,n=this.trailingIcon?s.html`<md-icon slot="end">${this.trailingIcon}</md-icon>`:s.html`<slot name="end" slot="end"></slot>`,o=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}
+      >
+        ${r}
+        ${o}
+        ${n}
+      </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;
+      }
+    }
+  `;t([e.property({type:Boolean})],exports.PdMenuItemM.prototype,"disabled",2);t([e.property({type:String})],exports.PdMenuItemM.prototype,"type",2);t([e.property({type:String})],exports.PdMenuItemM.prototype,"href",2);t([e.property({type:String})],exports.PdMenuItemM.prototype,"target",2);t([e.property({type:Boolean,attribute:"keep-open"})],exports.PdMenuItemM.prototype,"keepOpen",2);t([e.property({type:Boolean})],exports.PdMenuItemM.prototype,"selected",2);t([e.property({type:String,attribute:"leading-icon"})],exports.PdMenuItemM.prototype,"leadingIcon",2);t([e.property({type:String,attribute:"trailing-icon"})],exports.PdMenuItemM.prototype,"trailingIcon",2);t([e.property({type:String})],exports.PdMenuItemM.prototype,"text",2);t([e.property({type:String,attribute:"supporting-text"})],exports.PdMenuItemM.prototype,"supportingText",2);exports.PdMenuItemM=t([e.customElement("pd-menu-item")],exports.PdMenuItemM);

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

@@ -0,0 +1,156 @@
+import { css as p, LitElement as c, html as i } from "lit";
+import { property as s, customElement as u } from "lit/decorators.js";
+import "@material/web/menu/menu-item.js";
+import "@material/web/icon/icon.js";
+var y = Object.defineProperty, h = Object.getOwnPropertyDescriptor, t = (o, r, m, a) => {
+  for (var n = a > 1 ? void 0 : a ? h(r, m) : r, d = o.length - 1, l; d >= 0; d--)
+    (l = o[d]) && (n = (a ? l(r, m, n) : l(n)) || n);
+  return a && n && y(r, m, n), n;
+};
+let e = class extends c {
+  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(o) {
+    if (this.disabled) {
+      o.preventDefault(), o.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 o = this.leadingIcon ? i`<md-icon slot="start">${this.leadingIcon}</md-icon>` : i`<slot name="start" slot="start"></slot>`, r = this.trailingIcon ? i`<md-icon slot="end">${this.trailingIcon}</md-icon>` : i`<slot name="end" slot="end"></slot>`, m = this.text ? i`
+        <div slot="headline">${this.text}</div>
+        ${this.supportingText ? i`<div slot="supporting-text">${this.supportingText}</div>` : ""}
+      ` : i`<slot></slot>`;
+    return i`
+      <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}
+      >
+        ${o}
+        ${m}
+        ${r}
+      </md-menu-item>
+    `;
+  }
+};
+e.styles = p`
+    :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;
+      }
+    }
+  `;
+t([
+  s({ type: Boolean })
+], e.prototype, "disabled", 2);
+t([
+  s({ type: String })
+], e.prototype, "type", 2);
+t([
+  s({ type: String })
+], e.prototype, "href", 2);
+t([
+  s({ type: String })
+], e.prototype, "target", 2);
+t([
+  s({ type: Boolean, attribute: "keep-open" })
+], e.prototype, "keepOpen", 2);
+t([
+  s({ type: Boolean })
+], e.prototype, "selected", 2);
+t([
+  s({ type: String, attribute: "leading-icon" })
+], e.prototype, "leadingIcon", 2);
+t([
+  s({ type: String, attribute: "trailing-icon" })
+], e.prototype, "trailingIcon", 2);
+t([
+  s({ type: String })
+], e.prototype, "text", 2);
+t([
+  s({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+e = t([
+  u("pd-menu-item")
+], e);
+export {
+  e as PdMenuItemM
+};

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

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

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

@@ -0,0 +1,122 @@
+import { css as c, LitElement as l, html as h } from "lit";
+import { query as f, property as o, customElement as y } from "lit/decorators.js";
+import "@material/web/menu/menu.js";
+import "@material/web/menu/menu-item.js";
+var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, e = (n, r, p, i) => {
+  for (var s = i > 1 ? void 0 : i ? d(r, p) : r, a = n.length - 1, u; a >= 0; a--)
+    (u = n[a]) && (s = (i ? u(r, p, s) : u(s)) || s);
+  return i && s && m(r, p, s), s;
+};
+let t = class extends l {
+  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;
+  }
+  /**
+   * FIX: This is the crucial change.
+   * Instead of `firstUpdated`, we use `updated` to react to property changes.
+   * We search for the anchor element within the component's root node,
+   * which correctly handles Shadow DOM boundaries.
+   */
+  updated(n) {
+    if (n.has("anchor") && this.anchor) {
+      const r = this.getRootNode();
+      r && (this.anchorElement = r.getElementById(this.anchor) ?? void 0);
+    }
+  }
+  render() {
+    return h`
+      <md-menu
+        .anchorElement=${this.anchorElement}
+        ?open=${this.open}
+        positioning=${this.positioning}
+        anchor-corner=${this.anchorCorner}
+        menu-corner=${this.menuCorner}
+        ?quick=${this.quick}
+        ?has-overflow=${this.hasOverflow}
+        x-offset=${this.xOffset}
+        y-offset=${this.yOffset}
+        default-focus=${this.defaultFocus}
+        ?stay-open-on-focusout=${this.stayOpenOnFocusout}
+        ?stay-open-on-outside-click=${this.stayOpenOnOutsideClick}
+        ?skip-restore-focus=${this.skipRestoreFocus}
+        @closed=${() => this.open = !1}
+      >
+        <slot></slot>
+      </md-menu>
+    `;
+  }
+};
+t.styles = c`
+    :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;
+    }
+  `;
+e([
+  f("md-menu")
+], t.prototype, "menu", 2);
+e([
+  o({ type: String })
+], t.prototype, "anchor", 2);
+e([
+  o({ type: Object, attribute: !1 })
+], t.prototype, "anchorElement", 2);
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+e([
+  o({ type: String })
+], t.prototype, "positioning", 2);
+e([
+  o({ type: String, attribute: "anchor-corner" })
+], t.prototype, "anchorCorner", 2);
+e([
+  o({ type: String, attribute: "menu-corner" })
+], t.prototype, "menuCorner", 2);
+e([
+  o({ type: Boolean })
+], t.prototype, "quick", 2);
+e([
+  o({ type: Boolean, attribute: "has-overflow" })
+], t.prototype, "hasOverflow", 2);
+e([
+  o({ type: Number, attribute: "x-offset" })
+], t.prototype, "xOffset", 2);
+e([
+  o({ type: Number, attribute: "y-offset" })
+], t.prototype, "yOffset", 2);
+e([
+  o({ type: String, attribute: "default-focus" })
+], t.prototype, "defaultFocus", 2);
+e([
+  o({ type: Boolean, attribute: "stay-open-on-focusout" })
+], t.prototype, "stayOpenOnFocusout", 2);
+e([
+  o({ type: Boolean, attribute: "stay-open-on-outside-click" })
+], t.prototype, "stayOpenOnOutsideClick", 2);
+e([
+  o({ type: Boolean, attribute: "skip-restore-focus" })
+], t.prototype, "skipRestoreFocus", 2);
+t = e([
+  y("pd-menu")
+], t);
+export {
+  t as PdMenu
+};