@prioticket/design-system-web 1.6.0 → 1.6.1

package/COMPONENT-DOCUMENTATION.md

@@ -1,6 +1,6 @@
 # @prioticket/design-system-web Components
 
-Version: 1.6.0
+Version: 1.6.1
 
 ### <pd-box> (PdBox)
 

package/component-documentation.json

@@ -1,11 +1,11 @@
 {
   "package": {
     "name": "@prioticket/design-system-web",
-    "version": "1.6.0",
+    "version": "1.6.1",
     "description": "",
     "installation": "npm install @prioticket/design-system-web"
   },
-  "generatedAt": "2026-02-16T14:17:46.720Z",
+  "generatedAt": "2026-02-16T14:49:33.635Z",
   "components": {
     "pd-box": {
       "tagName": "pd-box",

package/custom-elements.json

@@ -5214,12 +5214,12 @@
             },
             {
               "kind": "field",
-              "name": "overlayEl",
+              "name": "popoverEl",
               "type": {
                 "text": "HTMLElement | null"
               },
               "privacy": "private",
-              "default": "null"
+              "readonly": true
             },
             {
               "kind": "field",
@@ -5258,26 +5258,19 @@
               "privacy": "private",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "overlayStyles",
-              "privacy": "private",
-              "static": true,
-              "default": "`\n    .dropdown {\n      background: var(--md-sys-color-surface-container, #f3edf7);\n      border-radius: var(--md-sys-shape-corner-medium, 12px);\n      box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);\n      overflow: hidden;\n      max-height: 320px;\n      display: flex;\n      flex-direction: column;\n      animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;\n      transform-origin: top left;\n    }\n\n    @keyframes dropdown-open {\n      from { opacity: 0; transform: scaleY(0.8); }\n      to { opacity: 1; transform: scaleY(1); }\n    }\n\n    .search {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n      background: var(--md-sys-color-surface-container, #f3edf7);\n    }\n\n    .search input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);\n      font-size: var(--md-sys-typescale-body-large-size, 1rem);\n      color: var(--md-sys-color-on-surface, #1d1b20);\n      outline: none;\n    }\n\n    .options {\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background-color 100ms ease;\n    }\n\n    .option:hover {\n      background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n    }\n\n    .option[data-selected=\"true\"] {\n      background-color: var(--md-sys-color-secondary-container, #e8def8);\n    }\n\n    .option[data-disabled=\"true\"] {\n      opacity: 0.38;\n      cursor: default;\n      pointer-events: none;\n    }\n\n    .option span {\n      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);\n      font-size: var(--md-sys-typescale-body-large-size, 1rem);\n      color: var(--md-sys-color-on-surface, #1d1b20);\n    }\n\n    .pd-icon {\n      font-size: 24px;\n      color: var(--md-sys-color-on-surface-variant, #49454f);\n    }\n  `"
-            },
             {
               "kind": "method",
-              "name": "openOverlay",
+              "name": "openPopover",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "closeOverlay",
+              "name": "closePopover",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "updateOverlayPosition",
+              "name": "updatePopoverPosition",
               "privacy": "private"
             },
             {

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),r=require("lit/decorators.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/icon/icon.js");require("@material/web/checkbox/checkbox.js");require("./pd-chip.cjs.js");var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,o=(a,e,t,i)=>{for(var l=i>1?void 0:i?p(e,t):e,n=a.length-1,d;n>=0;n--)(d=a[n])&&(l=(i?d(e,t,l):d(l))||l);return i&&l&&c(e,t,l),l};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="",this.multiple=!1,this.showChips=!0,this.chipVariant="input",this.placeholder="",this.searchable=!1,this.isOpen=!1,this.searchQuery="",this.selectedValues=[],this.overlayEl=null,this.updateOverlayPosition=()=>{if(!this.overlayEl||!this.trigger)return;const e=this.trigger.getBoundingClientRect();this.overlayEl.style.left=`${e.left}px`,this.overlayEl.style.top=`${e.bottom+4}px`,this.overlayEl.style.width=`${e.width}px`},this.handleTriggerClick=e=>{this.disabled||(e.stopPropagation(),this.searchQuery="",this.isOpen=!this.isOpen)},this.handleClickOutside=e=>{if(!this.isOpen)return;const t=e.composedPath();t.includes(this)||this.overlayEl&&t.includes(this.overlayEl)||(this.isOpen=!1)},this.handleKeyDown=e=>{e.key==="Escape"&&(this.isOpen=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside),document.addEventListener("keydown",this.handleKeyDown),window.addEventListener("scroll",this.updateOverlayPosition,!0),window.addEventListener("resize",this.updateOverlayPosition)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleKeyDown),window.removeEventListener("scroll",this.updateOverlayPosition,!0),window.removeEventListener("resize",this.updateOverlayPosition),this.closeOverlay()}get useCustomDropdown(){return this.multiple||this.searchable}willUpdate(e){e.has("value")&&this.useCustomDropdown&&(this.selectedValues=Array.isArray(this.value)?[...this.value]:this.value?[this.value]:[]),e.has("isOpen")&&(this.isOpen?this.openOverlay():this.closeOverlay()),this.overlayEl&&(e.has("searchQuery")||e.has("selectedValues"))&&(s.render(this.renderDropdown(),this.overlayEl),e.has("selectedValues")&&this.updateComplete.then(()=>{requestAnimationFrame(()=>this.updateOverlayPosition())}))}getOptionLabel(e){return this.options.find(t=>t.value===e)?.label??e}get filteredOptions(){const e=this.searchQuery.trim().toLowerCase();return e?this.options.filter(t=>t.label.toLowerCase().includes(e)):this.options}openOverlay(){if(this.overlayEl||!this.trigger)return;const e=this.trigger.getBoundingClientRect(),t=document.createElement("div");t.style.position="fixed",t.style.left=`${e.left}px`,t.style.top=`${e.bottom+4}px`,t.style.width=`${e.width}px`,t.style.zIndex="10000";const i=document.createElement("style");i.textContent=exports.PdSelect.overlayStyles,t.appendChild(i),document.body.appendChild(t),this.overlayEl=t,s.render(this.renderDropdown(),t)}closeOverlay(){this.overlayEl&&(s.render(s.nothing,this.overlayEl),this.overlayEl.remove(),this.overlayEl=null)}handleOptionClick(e,t){if(t.stopPropagation(),this.multiple){if(this.selectedValues.includes(e))this.selectedValues=this.selectedValues.filter(i=>i!==e);else{if(this.maxSelections&&this.selectedValues.length>=this.maxSelections)return;this.selectedValues=[...this.selectedValues,e]}this.value=[...this.selectedValues]}else this.selectedValues=[e],this.value=e,this.isOpen=!1;this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleChipRemove(e,t){t.stopPropagation(),this.selectedValues=this.selectedValues.filter(i=>i!==e),this.value=[...this.selectedValues]}renderDropdown(){return s.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),o=require("lit/decorators.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/icon/icon.js");require("@material/web/checkbox/checkbox.js");require("./pd-chip.cjs.js");var p=Object.defineProperty,c=Object.getOwnPropertyDescriptor,r=(a,e,t,i)=>{for(var l=i>1?void 0:i?c(e,t):e,n=a.length-1,d;n>=0;n--)(d=a[n])&&(l=(i?d(e,t,l):d(l))||l);return i&&l&&p(e,t,l),l};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="",this.multiple=!1,this.showChips=!0,this.chipVariant="input",this.placeholder="",this.searchable=!1,this.isOpen=!1,this.searchQuery="",this.selectedValues=[],this.updatePopoverPosition=()=>{const e=this.popoverEl;if(!e||!this.trigger||!this.isOpen)return;const t=this.trigger.getBoundingClientRect();e.style.left=`${t.left}px`,e.style.top=`${t.bottom+4}px`,e.style.width=`${t.width}px`},this.handleTriggerClick=e=>{this.disabled||(e.stopPropagation(),this.searchQuery="",this.isOpen=!this.isOpen)},this.handleClickOutside=e=>{if(!this.isOpen)return;const t=e.composedPath();t.includes(this)||this.popoverEl&&t.includes(this.popoverEl)||(this.isOpen=!1)},this.handleKeyDown=e=>{e.key==="Escape"&&(this.isOpen=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside),document.addEventListener("keydown",this.handleKeyDown),window.addEventListener("scroll",this.updatePopoverPosition,!0),window.addEventListener("resize",this.updatePopoverPosition)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside),document.removeEventListener("keydown",this.handleKeyDown),window.removeEventListener("scroll",this.updatePopoverPosition,!0),window.removeEventListener("resize",this.updatePopoverPosition)}get useCustomDropdown(){return this.multiple||this.searchable}willUpdate(e){e.has("value")&&this.useCustomDropdown&&(this.selectedValues=Array.isArray(this.value)?[...this.value]:this.value?[this.value]:[])}updated(e){e.has("isOpen")&&(this.isOpen?this.openPopover():this.closePopover()),this.isOpen&&e.has("selectedValues")&&this.updateComplete.then(()=>{requestAnimationFrame(()=>this.updatePopoverPosition())})}getOptionLabel(e){return this.options.find(t=>t.value===e)?.label??e}get filteredOptions(){const e=this.searchQuery.trim().toLowerCase();return e?this.options.filter(t=>t.label.toLowerCase().includes(e)):this.options}openPopover(){const e=this.popoverEl;if(!(!e||!this.trigger)){try{e.showPopover()}catch{}this.updatePopoverPosition()}}closePopover(){const e=this.popoverEl;if(e)try{e.hidePopover()}catch{}}handleOptionClick(e,t){if(t.stopPropagation(),this.multiple){if(this.selectedValues.includes(e))this.selectedValues=this.selectedValues.filter(i=>i!==e);else{if(this.maxSelections&&this.selectedValues.length>=this.maxSelections)return;this.selectedValues=[...this.selectedValues,e]}this.value=[...this.selectedValues]}else this.selectedValues=[e],this.value=e,this.isOpen=!1;this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleChipRemove(e,t){t.stopPropagation(),this.selectedValues=this.selectedValues.filter(i=>i!==e),this.value=[...this.selectedValues]}renderDropdown(){return s.html`
       <div class="dropdown" role="listbox" aria-multiselectable=${this.multiple?"true":"false"}>
         ${this.searchable?s.html`
           <div class="search">
@@ -64,6 +64,14 @@
 
         ${this.supportingText?s.html`<div class="supporting">${this.supportingText}</div>`:s.nothing}
       </div>
+
+      <div
+        id="pd-select-popover"
+        popover="manual"
+        class="popover-overlay"
+      >
+        ${this.renderDropdown()}
+      </div>
     `}handleSingleSelectChange(e){const t=e.target;this.value=t.value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleSingleSelectOpen(){this.trailingIcon?.classList.add("rotated")}handleSingleSelectClose(){this.trailingIcon?.classList.remove("rotated")}renderSingleSelect(){const e=s.html`
       ${this.leadingIcon?s.html`<md-icon slot="leading-icon" class="pd-icon">${this.leadingIcon}</md-icon>`:s.nothing}
       <md-icon slot="trailing-icon" class="pd-icon">keyboard_arrow_down</md-icon>
@@ -98,82 +106,7 @@
             @opening=${this.handleSingleSelectOpen}
             @closed=${this.handleSingleSelectClose}
           >${e}</md-outlined-select>
-        `}render(){return this.useCustomDropdown?this.renderCustomSelect():this.renderSingleSelect()}};exports.PdSelect.overlayStyles=`
-    .dropdown {
-      background: var(--md-sys-color-surface-container, #f3edf7);
-      border-radius: var(--md-sys-shape-corner-medium, 12px);
-      box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
-      overflow: hidden;
-      max-height: 320px;
-      display: flex;
-      flex-direction: column;
-      animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;
-      transform-origin: top left;
-    }
-
-    @keyframes dropdown-open {
-      from { opacity: 0; transform: scaleY(0.8); }
-      to { opacity: 1; transform: scaleY(1); }
-    }
-
-    .search {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
-      background: var(--md-sys-color-surface-container, #f3edf7);
-    }
-
-    .search input {
-      flex: 1;
-      border: none;
-      background: transparent;
-      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
-      font-size: var(--md-sys-typescale-body-large-size, 1rem);
-      color: var(--md-sys-color-on-surface, #1d1b20);
-      outline: none;
-    }
-
-    .options {
-      overflow-y: auto;
-      flex: 1;
-    }
-
-    .option {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
-      cursor: pointer;
-      transition: background-color 100ms ease;
-    }
-
-    .option:hover {
-      background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
-    }
-
-    .option[data-selected="true"] {
-      background-color: var(--md-sys-color-secondary-container, #e8def8);
-    }
-
-    .option[data-disabled="true"] {
-      opacity: 0.38;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    .option span {
-      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
-      font-size: var(--md-sys-typescale-body-large-size, 1rem);
-      color: var(--md-sys-color-on-surface, #1d1b20);
-    }
-
-    .pd-icon {
-      font-size: 24px;
-      color: var(--md-sys-color-on-surface-variant, #49454f);
-    }
-  `;exports.PdSelect.styles=s.css`
+        `}render(){return this.useCustomDropdown?this.renderCustomSelect():this.renderSingleSelect()}};exports.PdSelect.styles=s.css`
   :host {
     display: inline-block;
     width: 100%;
@@ -348,21 +281,32 @@
       var(--md-sys-motion-easing-emphasized, ease);
   }
 
+  /* Popover overlay — promoted to top layer via popover="manual" */
+  .popover-overlay {
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
+    inset: unset;
+  }
+
   .dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: 4px;
-    z-index: 9999;
-    background: var(--md-sys-color-surface-container);
+    background: var(--md-sys-color-surface-container, #f3edf7);
     border-radius: var(--md-sys-shape-corner-medium, 12px);
-    box-shadow: var(--md-sys-elevation-2, 0 1px 2px rgba(0,0,0,0.3),
-      0 2px 6px 2px rgba(0,0,0,0.15));
+    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
     overflow: hidden;
     max-height: 320px;
     display: flex;
     flex-direction: column;
+    animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;
+    transform-origin: top left;
+  }
+
+  @keyframes dropdown-open {
+    from { opacity: 0; transform: scaleY(0.8); }
+    to   { opacity: 1; transform: scaleY(1); }
   }
 
   .search {
@@ -423,4 +367,4 @@
     color: var(--md-sys-color-error);
     margin-left: 2px;
   }
-`;o([r.query("md-filled-select, md-outlined-select")],exports.PdSelect.prototype,"select",2);o([r.query('[slot="trailing-icon"]')],exports.PdSelect.prototype,"trailingIcon",2);o([r.query(".field")],exports.PdSelect.prototype,"trigger",2);o([r.property({type:String,reflect:!0})],exports.PdSelect.prototype,"variant",2);o([r.property({type:String})],exports.PdSelect.prototype,"label",2);o([r.property({type:String,reflect:!0})],exports.PdSelect.prototype,"value",2);o([r.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"disabled",2);o([r.property({type:Boolean})],exports.PdSelect.prototype,"required",2);o([r.property({type:String,attribute:"error-text"})],exports.PdSelect.prototype,"errorText",2);o([r.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"error",2);o([r.property({type:String,attribute:"supporting-text"})],exports.PdSelect.prototype,"supportingText",2);o([r.property({type:Array})],exports.PdSelect.prototype,"options",2);o([r.property({type:String,attribute:"leading-icon"})],exports.PdSelect.prototype,"leadingIcon",2);o([r.property({type:Boolean})],exports.PdSelect.prototype,"multiple",2);o([r.property({type:Number,attribute:"max-selections"})],exports.PdSelect.prototype,"maxSelections",2);o([r.property({type:Boolean,attribute:"show-chips"})],exports.PdSelect.prototype,"showChips",2);o([r.property({type:String,attribute:"chip-variant"})],exports.PdSelect.prototype,"chipVariant",2);o([r.property({type:String})],exports.PdSelect.prototype,"placeholder",2);o([r.property({type:Boolean})],exports.PdSelect.prototype,"searchable",2);o([r.state()],exports.PdSelect.prototype,"isOpen",2);o([r.state()],exports.PdSelect.prototype,"searchQuery",2);o([r.state()],exports.PdSelect.prototype,"selectedValues",2);exports.PdSelect=o([r.customElement("pd-select")],exports.PdSelect);
+`;r([o.query("md-filled-select, md-outlined-select")],exports.PdSelect.prototype,"select",2);r([o.query('[slot="trailing-icon"]')],exports.PdSelect.prototype,"trailingIcon",2);r([o.query(".field")],exports.PdSelect.prototype,"trigger",2);r([o.property({type:String,reflect:!0})],exports.PdSelect.prototype,"variant",2);r([o.property({type:String})],exports.PdSelect.prototype,"label",2);r([o.property({type:String,reflect:!0})],exports.PdSelect.prototype,"value",2);r([o.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"disabled",2);r([o.property({type:Boolean})],exports.PdSelect.prototype,"required",2);r([o.property({type:String,attribute:"error-text"})],exports.PdSelect.prototype,"errorText",2);r([o.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"error",2);r([o.property({type:String,attribute:"supporting-text"})],exports.PdSelect.prototype,"supportingText",2);r([o.property({type:Array})],exports.PdSelect.prototype,"options",2);r([o.property({type:String,attribute:"leading-icon"})],exports.PdSelect.prototype,"leadingIcon",2);r([o.property({type:Boolean})],exports.PdSelect.prototype,"multiple",2);r([o.property({type:Number,attribute:"max-selections"})],exports.PdSelect.prototype,"maxSelections",2);r([o.property({type:Boolean,attribute:"show-chips"})],exports.PdSelect.prototype,"showChips",2);r([o.property({type:String,attribute:"chip-variant"})],exports.PdSelect.prototype,"chipVariant",2);r([o.property({type:String})],exports.PdSelect.prototype,"placeholder",2);r([o.property({type:Boolean})],exports.PdSelect.prototype,"searchable",2);r([o.state()],exports.PdSelect.prototype,"isOpen",2);r([o.state()],exports.PdSelect.prototype,"searchQuery",2);r([o.state()],exports.PdSelect.prototype,"selectedValues",2);r([o.query("#pd-select-popover")],exports.PdSelect.prototype,"popoverEl",2);exports.PdSelect=r([o.customElement("pd-select")],exports.PdSelect);

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

@@ -1,46 +1,50 @@
-import { css as y, LitElement as v, render as h, nothing as n, html as r } from "lit";
-import { query as u, property as a, state as m, customElement as f } from "lit/decorators.js";
+import { css as m, LitElement as v, nothing as d, html as i } from "lit";
+import { query as p, property as r, state as u, customElement as y } from "lit/decorators.js";
 import "@material/web/select/filled-select.js";
 import "@material/web/select/outlined-select.js";
 import "@material/web/select/select-option.js";
 import "@material/web/icon/icon.js";
 import "@material/web/checkbox/checkbox.js";
 import "./pd-chip.es.js";
-var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (e, t, i, l) => {
-  for (var d = l > 1 ? void 0 : l ? b(t, i) : t, c = e.length - 1, p; c >= 0; c--)
-    (p = e[c]) && (d = (l ? p(t, i, d) : p(d)) || d);
-  return l && d && g(t, i, d), d;
+var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, a, l) => {
+  for (var n = l > 1 ? void 0 : l ? g(t, a) : t, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (n = (l ? h(t, a, n) : h(n)) || n);
+  return l && n && f(t, a, n), n;
 };
 let s = class extends v {
   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 = "", this.multiple = !1, this.showChips = !0, this.chipVariant = "input", this.placeholder = "", this.searchable = !1, this.isOpen = !1, this.searchQuery = "", this.selectedValues = [], this.overlayEl = null, this.updateOverlayPosition = () => {
-      if (!this.overlayEl || !this.trigger) return;
-      const e = this.trigger.getBoundingClientRect();
-      this.overlayEl.style.left = `${e.left}px`, this.overlayEl.style.top = `${e.bottom + 4}px`, this.overlayEl.style.width = `${e.width}px`;
+    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 = "", this.multiple = !1, this.showChips = !0, this.chipVariant = "input", this.placeholder = "", this.searchable = !1, this.isOpen = !1, this.searchQuery = "", this.selectedValues = [], this.updatePopoverPosition = () => {
+      const e = this.popoverEl;
+      if (!e || !this.trigger || !this.isOpen) return;
+      const t = this.trigger.getBoundingClientRect();
+      e.style.left = `${t.left}px`, e.style.top = `${t.bottom + 4}px`, e.style.width = `${t.width}px`;
     }, this.handleTriggerClick = (e) => {
       this.disabled || (e.stopPropagation(), this.searchQuery = "", this.isOpen = !this.isOpen);
     }, this.handleClickOutside = (e) => {
       if (!this.isOpen) return;
       const t = e.composedPath();
-      t.includes(this) || this.overlayEl && t.includes(this.overlayEl) || (this.isOpen = !1);
+      t.includes(this) || this.popoverEl && t.includes(this.popoverEl) || (this.isOpen = !1);
     }, this.handleKeyDown = (e) => {
       e.key === "Escape" && (this.isOpen = !1);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleClickOutside), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("scroll", this.updateOverlayPosition, !0), window.addEventListener("resize", this.updateOverlayPosition);
+    super.connectedCallback(), document.addEventListener("click", this.handleClickOutside), document.addEventListener("keydown", this.handleKeyDown), window.addEventListener("scroll", this.updatePopoverPosition, !0), window.addEventListener("resize", this.updatePopoverPosition);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("scroll", this.updateOverlayPosition, !0), window.removeEventListener("resize", this.updateOverlayPosition), this.closeOverlay();
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), document.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("scroll", this.updatePopoverPosition, !0), window.removeEventListener("resize", this.updatePopoverPosition);
   }
   /** Whether to use the custom dropdown (overlay) instead of the native MD select */
   get useCustomDropdown() {
     return this.multiple || this.searchable;
   }
   willUpdate(e) {
-    e.has("value") && this.useCustomDropdown && (this.selectedValues = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : []), e.has("isOpen") && (this.isOpen ? this.openOverlay() : this.closeOverlay()), this.overlayEl && (e.has("searchQuery") || e.has("selectedValues")) && (h(this.renderDropdown(), this.overlayEl), e.has("selectedValues") && this.updateComplete.then(() => {
-      requestAnimationFrame(() => this.updateOverlayPosition());
-    }));
+    e.has("value") && this.useCustomDropdown && (this.selectedValues = Array.isArray(this.value) ? [...this.value] : this.value ? [this.value] : []);
+  }
+  updated(e) {
+    e.has("isOpen") && (this.isOpen ? this.openPopover() : this.closePopover()), this.isOpen && e.has("selectedValues") && this.updateComplete.then(() => {
+      requestAnimationFrame(() => this.updatePopoverPosition());
+    });
   }
   getOptionLabel(e) {
     return this.options.find((t) => t.value === e)?.label ?? e;
@@ -49,20 +53,29 @@ let s = class extends v {
     const e = this.searchQuery.trim().toLowerCase();
     return e ? this.options.filter((t) => t.label.toLowerCase().includes(e)) : this.options;
   }
-  openOverlay() {
-    if (this.overlayEl || !this.trigger) return;
-    const e = this.trigger.getBoundingClientRect(), t = document.createElement("div");
-    t.style.position = "fixed", t.style.left = `${e.left}px`, t.style.top = `${e.bottom + 4}px`, t.style.width = `${e.width}px`, t.style.zIndex = "10000";
-    const i = document.createElement("style");
-    i.textContent = s.overlayStyles, t.appendChild(i), document.body.appendChild(t), this.overlayEl = t, h(this.renderDropdown(), t);
+  /* -------------------- Popover logic -------------------- */
+  openPopover() {
+    const e = this.popoverEl;
+    if (!(!e || !this.trigger)) {
+      try {
+        e.showPopover();
+      } catch {
+      }
+      this.updatePopoverPosition();
+    }
   }
-  closeOverlay() {
-    this.overlayEl && (h(n, this.overlayEl), this.overlayEl.remove(), this.overlayEl = null);
+  closePopover() {
+    const e = this.popoverEl;
+    if (e)
+      try {
+        e.hidePopover();
+      } catch {
+      }
   }
   handleOptionClick(e, t) {
     if (t.stopPropagation(), this.multiple) {
       if (this.selectedValues.includes(e))
-        this.selectedValues = this.selectedValues.filter((i) => i !== e);
+        this.selectedValues = this.selectedValues.filter((a) => a !== e);
       else {
         if (this.maxSelections && this.selectedValues.length >= this.maxSelections) return;
         this.selectedValues = [...this.selectedValues, e];
@@ -77,13 +90,13 @@ let s = class extends v {
     }));
   }
   handleChipRemove(e, t) {
-    t.stopPropagation(), this.selectedValues = this.selectedValues.filter((i) => i !== e), this.value = [...this.selectedValues];
+    t.stopPropagation(), this.selectedValues = this.selectedValues.filter((a) => a !== e), this.value = [...this.selectedValues];
   }
   /* -------------------- Rendering -------------------- */
   renderDropdown() {
-    return r`
+    return i`
       <div class="dropdown" role="listbox" aria-multiselectable=${this.multiple ? "true" : "false"}>
-        ${this.searchable ? r`
+        ${this.searchable ? i`
           <div class="search">
             <md-icon class="pd-icon">search</md-icon>
             <input
@@ -92,19 +105,19 @@ let s = class extends v {
               @input=${(e) => this.searchQuery = e.target.value}
             />
           </div>
-        ` : n}
+        ` : d}
 
         <div class="options">
           ${this.filteredOptions.map((e) => {
-      const t = this.selectedValues.includes(e.value), i = e.disabled ?? !1;
-      return r`
+      const t = this.selectedValues.includes(e.value), a = e.disabled ?? !1;
+      return i`
               <div
                 class="option"
                 data-selected=${t}
-                data-disabled=${i}
-                @click=${(l) => !i && this.handleOptionClick(e.value, l)}
+                data-disabled=${a}
+                @click=${(l) => !a && this.handleOptionClick(e.value, l)}
               >
-                ${this.multiple ? r`<md-checkbox ?checked=${t} ?disabled=${i}></md-checkbox>` : n}
+                ${this.multiple ? i`<md-checkbox ?checked=${t} ?disabled=${a}></md-checkbox>` : d}
                 <span>${e.label}</span>
               </div>
             `;
@@ -115,14 +128,14 @@ let s = class extends v {
   }
   renderCustomSelect() {
     const e = this.selectedValues.length > 0, t = e || this.isOpen;
-    return r`
+    return i`
       <div class="container">
         <div class="wrap">
-          ${this.label ? r`
+          ${this.label ? i`
             <label class="label" data-float=${t}>
-              ${this.label}${this.required ? r`<span class="required">*</span>` : n}
+              ${this.label}${this.required ? i`<span class="required">*</span>` : d}
             </label>
-          ` : n}
+          ` : d}
 
           <div
             class="field"
@@ -131,19 +144,19 @@ let s = class extends v {
             role="combobox"
             @click=${this.handleTriggerClick}
           >
-            ${this.leadingIcon ? r`<md-icon class="pd-icon pd-icon--leading">${this.leadingIcon}</md-icon>` : n}
+            ${this.leadingIcon ? i`<md-icon class="pd-icon pd-icon--leading">${this.leadingIcon}</md-icon>` : d}
 
             <div class="content">
-              ${e ? this.multiple ? r`
+              ${e ? this.multiple ? i`
                       <div class="chips">
-                        ${this.selectedValues.map((i) => r`
+                        ${this.selectedValues.map((a) => i`
                           <pd-chip
-                            label=${this.getOptionLabel(i)}
-                            @chip-remove=${(l) => this.handleChipRemove(i, l)}
+                            label=${this.getOptionLabel(a)}
+                            @chip-remove=${(l) => this.handleChipRemove(a, l)}
                           ></pd-chip>
                         `)}
                       </div>
-                    ` : r`<span class="summary">${this.getOptionLabel(this.selectedValues[0])}</span>` : r`<span class="placeholder">${this.placeholder}</span>`}
+                    ` : i`<span class="summary">${this.getOptionLabel(this.selectedValues[0])}</span>` : i`<span class="placeholder">${this.placeholder}</span>`}
             </div>
 
             <md-icon class="pd-icon pd-icon--trailing" data-rotated=${this.isOpen}>
@@ -152,7 +165,15 @@ let s = class extends v {
           </div>
         </div>
 
-        ${this.supportingText ? r`<div class="supporting">${this.supportingText}</div>` : n}
+        ${this.supportingText ? i`<div class="supporting">${this.supportingText}</div>` : d}
+      </div>
+
+      <div
+        id="pd-select-popover"
+        popover="manual"
+        class="popover-overlay"
+      >
+        ${this.renderDropdown()}
       </div>
     `;
   }
@@ -171,16 +192,16 @@ let s = class extends v {
     this.trailingIcon?.classList.remove("rotated");
   }
   renderSingleSelect() {
-    const e = r`
-      ${this.leadingIcon ? r`<md-icon slot="leading-icon" class="pd-icon">${this.leadingIcon}</md-icon>` : n}
+    const e = i`
+      ${this.leadingIcon ? i`<md-icon slot="leading-icon" class="pd-icon">${this.leadingIcon}</md-icon>` : d}
       <md-icon slot="trailing-icon" class="pd-icon">keyboard_arrow_down</md-icon>
-      ${this.options.map((t) => r`
+      ${this.options.map((t) => i`
         <md-select-option .value=${t.value} ?disabled=${t.disabled}>
           <div slot="headline">${t.label}</div>
         </md-select-option>
       `)}
     `;
-    return this.variant === "filled" ? r`
+    return this.variant === "filled" ? i`
           <md-filled-select
             .label=${this.label}
             .value=${this.value}
@@ -193,7 +214,7 @@ let s = class extends v {
             @opening=${this.handleSingleSelectOpen}
             @closed=${this.handleSingleSelectClose}
           >${e}</md-filled-select>
-        ` : r`
+        ` : i`
           <md-outlined-select
             .label=${this.label}
             .value=${this.value}
@@ -212,83 +233,7 @@ let s = class extends v {
     return this.useCustomDropdown ? this.renderCustomSelect() : this.renderSingleSelect();
   }
 };
-s.overlayStyles = `
-    .dropdown {
-      background: var(--md-sys-color-surface-container, #f3edf7);
-      border-radius: var(--md-sys-shape-corner-medium, 12px);
-      box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
-      overflow: hidden;
-      max-height: 320px;
-      display: flex;
-      flex-direction: column;
-      animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;
-      transform-origin: top left;
-    }
-
-    @keyframes dropdown-open {
-      from { opacity: 0; transform: scaleY(0.8); }
-      to { opacity: 1; transform: scaleY(1); }
-    }
-
-    .search {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
-      border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
-      background: var(--md-sys-color-surface-container, #f3edf7);
-    }
-
-    .search input {
-      flex: 1;
-      border: none;
-      background: transparent;
-      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
-      font-size: var(--md-sys-typescale-body-large-size, 1rem);
-      color: var(--md-sys-color-on-surface, #1d1b20);
-      outline: none;
-    }
-
-    .options {
-      overflow-y: auto;
-      flex: 1;
-    }
-
-    .option {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 16px;
-      cursor: pointer;
-      transition: background-color 100ms ease;
-    }
-
-    .option:hover {
-      background-color: var(--md-sys-color-surface-container-highest, #e6e0e9);
-    }
-
-    .option[data-selected="true"] {
-      background-color: var(--md-sys-color-secondary-container, #e8def8);
-    }
-
-    .option[data-disabled="true"] {
-      opacity: 0.38;
-      cursor: default;
-      pointer-events: none;
-    }
-
-    .option span {
-      font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);
-      font-size: var(--md-sys-typescale-body-large-size, 1rem);
-      color: var(--md-sys-color-on-surface, #1d1b20);
-    }
-
-    .pd-icon {
-      font-size: 24px;
-      color: var(--md-sys-color-on-surface-variant, #49454f);
-    }
-  `;
-s.styles = y`
+s.styles = m`
   :host {
     display: inline-block;
     width: 100%;
@@ -463,21 +408,32 @@ s.styles = y`
       var(--md-sys-motion-easing-emphasized, ease);
   }
 
+  /* Popover overlay — promoted to top layer via popover="manual" */
+  .popover-overlay {
+    position: fixed;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: visible;
+    inset: unset;
+  }
+
   .dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: 4px;
-    z-index: 9999;
-    background: var(--md-sys-color-surface-container);
+    background: var(--md-sys-color-surface-container, #f3edf7);
     border-radius: var(--md-sys-shape-corner-medium, 12px);
-    box-shadow: var(--md-sys-elevation-2, 0 1px 2px rgba(0,0,0,0.3),
-      0 2px 6px 2px rgba(0,0,0,0.15));
+    box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
     overflow: hidden;
     max-height: 320px;
     display: flex;
     flex-direction: column;
+    animation: dropdown-open 200ms cubic-bezier(0.2, 0, 0, 1) forwards;
+    transform-origin: top left;
+  }
+
+  @keyframes dropdown-open {
+    from { opacity: 0; transform: scaleY(0.8); }
+    to   { opacity: 1; transform: scaleY(1); }
   }
 
   .search {
@@ -540,73 +496,76 @@ s.styles = y`
   }
 `;
 o([
-  u("md-filled-select, md-outlined-select")
+  p("md-filled-select, md-outlined-select")
 ], s.prototype, "select", 2);
 o([
-  u('[slot="trailing-icon"]')
+  p('[slot="trailing-icon"]')
 ], s.prototype, "trailingIcon", 2);
 o([
-  u(".field")
+  p(".field")
 ], s.prototype, "trigger", 2);
 o([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], s.prototype, "variant", 2);
 o([
-  a({ type: String })
+  r({ type: String })
 ], s.prototype, "label", 2);
 o([
-  a({ type: String, reflect: !0 })
+  r({ type: String, reflect: !0 })
 ], s.prototype, "value", 2);
 o([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], s.prototype, "required", 2);
 o([
-  a({ type: String, attribute: "error-text" })
+  r({ type: String, attribute: "error-text" })
 ], s.prototype, "errorText", 2);
 o([
-  a({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], s.prototype, "error", 2);
 o([
-  a({ type: String, attribute: "supporting-text" })
+  r({ type: String, attribute: "supporting-text" })
 ], s.prototype, "supportingText", 2);
 o([
-  a({ type: Array })
+  r({ type: Array })
 ], s.prototype, "options", 2);
 o([
-  a({ type: String, attribute: "leading-icon" })
+  r({ type: String, attribute: "leading-icon" })
 ], s.prototype, "leadingIcon", 2);
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], s.prototype, "multiple", 2);
 o([
-  a({ type: Number, attribute: "max-selections" })
+  r({ type: Number, attribute: "max-selections" })
 ], s.prototype, "maxSelections", 2);
 o([
-  a({ type: Boolean, attribute: "show-chips" })
+  r({ type: Boolean, attribute: "show-chips" })
 ], s.prototype, "showChips", 2);
 o([
-  a({ type: String, attribute: "chip-variant" })
+  r({ type: String, attribute: "chip-variant" })
 ], s.prototype, "chipVariant", 2);
 o([
-  a({ type: String })
+  r({ type: String })
 ], s.prototype, "placeholder", 2);
 o([
-  a({ type: Boolean })
+  r({ type: Boolean })
 ], s.prototype, "searchable", 2);
 o([
-  m()
+  u()
 ], s.prototype, "isOpen", 2);
 o([
-  m()
+  u()
 ], s.prototype, "searchQuery", 2);
 o([
-  m()
+  u()
 ], s.prototype, "selectedValues", 2);
+o([
+  p("#pd-select-popover")
+], s.prototype, "popoverEl", 2);
 s = o([
-  f("pd-select")
+  y("pd-select")
 ], s);
 export {
   s as PdSelect

package/dist/types/components/pd-select.d.ts

@@ -34,18 +34,18 @@ export declare class PdSelect extends LitElement {
     private isOpen;
     private searchQuery;
     private selectedValues;
-    private overlayEl;
+    private readonly popoverEl;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** Whether to use the custom dropdown (overlay) instead of the native MD select */
     private get useCustomDropdown();
     willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
     private getOptionLabel;
     private get filteredOptions();
-    private static overlayStyles;
-    private openOverlay;
-    private closeOverlay;
-    private updateOverlayPosition;
+    private openPopover;
+    private closePopover;
+    private updatePopoverPosition;
     private handleTriggerClick;
     private handleClickOutside;
     private handleKeyDown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prioticket/design-system-web",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/prioticket-design-system-web.cjs.js",