@loadsmart/miranda-wc 3.22.0 → 3.23.0-alpha.1

package/dist/{index-D4QJnzFu.js → index-DaIT7YFO.js}

@@ -158,7 +158,7 @@ function isInsideElement(event, element) {
     return element.contains(event.target);
 }
 
-const logger$d = createLogger('miranda');
+const logger$f = createLogger('miranda');
 class Component extends r$5 {
     static define(config) {
         const { name, constructor } = config;
@@ -166,7 +166,7 @@ class Component extends r$5 {
             window.customElements.define(name, constructor);
         }
         catch (error) {
-            logger$d.error(`Failed to define component ${name}: ${error}. Please, ensure definitions are compatible so the application does not break or have bugs due to overridden definitions.`);
+            logger$f.error(`Failed to define component ${name}: ${error}. Please, ensure definitions are compatible so the application does not break or have bugs due to overridden definitions.`);
         }
     }
     constructor() {
@@ -1020,7 +1020,7 @@ function typography(variant) {
     return r$8(`${defaultStyle}\n${variantStyle}`);
 }
 
-function styles$H() {
+function styles$G() {
     return i$9 `
 		:host {
 			background-color: ${getColor('color-background-primary')};
@@ -1388,7 +1388,7 @@ function toCSSValue(token, alpha) {
     return `var(${toCSSVariable(token)}, ${value})`;
 }
 
-function styles$G() {
+function styles$F() {
     return [
         i$3 `
 			:host {
@@ -1426,171 +1426,171 @@ function styles$G() {
 
 function __variableDynamicImportRuntime0__(path) {
   switch (path) {
-    case './icons/add-circle.ts': return import('./add-circle-DUC9alAp-C940lRba.js');
-    case './icons/alarm.ts': return import('./alarm-BaGj0N2--CidXoPb_.js');
-    case './icons/alert-blocked.ts': return import('./alert-blocked-7Pq9aiIm-Coi-KQ9G.js');
-    case './icons/alert-circle.ts': return import('./alert-circle-DPjFhwuE-J1oEBuNQ.js');
-    case './icons/anchor.ts': return import('./anchor-BOowxXQz-BNgVqZ6M.js');
-    case './icons/archive.ts': return import('./archive-DCVFqmKd-CSi4pf1i.js');
-    case './icons/arrow-left.ts': return import('./arrow-left-UQ1azG0M-1ySQqfU8.js');
-    case './icons/arrow-right.ts': return import('./arrow-right-D9ODrfAT-C1MRm_6g.js');
-    case './icons/arrow-sort-down.ts': return import('./arrow-sort-down-DyaC4vSu-D9m_jSlV.js');
-    case './icons/arrow-sort-up-down.ts': return import('./arrow-sort-up-down-BkqHwWw9-5j-8Iodt.js');
-    case './icons/arrow-sort-up.ts': return import('./arrow-sort-up-D3rkqbKD-KK55mwim.js');
-    case './icons/asterisk.ts': return import('./asterisk-ZHV7R7s1-vXRZ2G8I.js');
-    case './icons/attention.ts': return import('./attention-Bktk81gv-BgvOZ7LG.js');
-    case './icons/automatic.ts': return import('./automatic-C_cPnNpn-DFvQyJfw.js');
-    case './icons/bank.ts': return import('./bank-AfsU0_8a-C7Ale006.js');
-    case './icons/bell-cancel.ts': return import('./bell-cancel-Ca9tfyFs-CGAIk-KD.js');
-    case './icons/bell.ts': return import('./bell-BeboL9IG-BofLBMOd.js');
-    case './icons/blind-bol.ts': return import('./blind-bol-buLUijt0-0CpdEh2r.js');
-    case './icons/board.ts': return import('./board-C7-8ym4Q-HqxCpDgX.js');
-    case './icons/bol.ts': return import('./bol-CfGOF64d-DRnnkgXZ.js');
-    case './icons/bolt-off.ts': return import('./bolt-off-BcH48taL-XzYUovpu.js');
-    case './icons/bolt.ts': return import('./bolt-6Jcu4Dlq-5C9dStIh.js');
-    case './icons/box.ts': return import('./box-DCc-Lqkq-D06T_zrH.js');
-    case './icons/broadcast.ts': return import('./broadcast-DycP-JY_-CSgjiu-T.js');
-    case './icons/burguer-menu.ts': return import('./burguer-menu-Asv06-tR-BNJfGmU-.js');
-    case './icons/calendar.ts': return import('./calendar-Dx_9TSsr-Gq1usnJm.js');
-    case './icons/camera.ts': return import('./camera-Czlcg8L7-DF0_rBq1.js');
-    case './icons/canada-flag.ts': return import('./canada-flag-CfJo38yD-DeqyNnGD.js');
-    case './icons/caret-down.ts': return import('./caret-down-BVaLyzKU-e9zYZjYF.js');
-    case './icons/caret-left.ts': return import('./caret-left-BDnpJFoh-CdJ09rqn.js');
-    case './icons/caret-right.ts': return import('./caret-right-iJvAGCHE-4Whc4aGF.js');
-    case './icons/caret-up.ts': return import('./caret-up-9pIV6ltV-BDsE1ki2.js');
-    case './icons/carrier-contract.ts': return import('./carrier-contract-DW2sjcCT-vGBDxsFX.js');
-    case './icons/chat.ts': return import('./chat-DGQ6mScP-yoWc6f-9.js');
-    case './icons/check.ts': return import('./check-Cni8S44c-HpJVrUJ1.js');
-    case './icons/clip.ts': return import('./clip-DM4Wpi9M-FvPXEbod.js');
-    case './icons/clock.ts': return import('./clock-CFBsWldY-DkfUTf3V.js');
-    case './icons/clown.ts': return import('./clown-DFK7bIK4-DBCCc9mo.js');
-    case './icons/code.ts': return import('./code-DmezwyM4-NscqP-o7.js');
-    case './icons/comment.ts': return import('./comment-CjEoGy-K-CC6BSsoK.js');
-    case './icons/company.ts': return import('./company-DqCQwhbF-B9GAc9fJ.js');
-    case './icons/confetti.ts': return import('./confetti-CZEHLeVv-uVXjC_MV.js');
-    case './icons/contract.ts': return import('./contract-BQ6z-O8E-BODVFyjU.js');
-    case './icons/copy.ts': return import('./copy-D5yGaYk7-B1NXMGhJ.js');
-    case './icons/corner-down-r.ts': return import('./corner-down-r-CwJXOJqV-oJkJ_vn-.js');
-    case './icons/corner-down.ts': return import('./corner-down-Qmk_Cqah-B5iRLmrx.js');
-    case './icons/corner-up.ts': return import('./corner-up-PRIgBw5O-BDomxHjq.js');
-    case './icons/credit-card.ts': return import('./credit-card-CPp_LFTs-CVqGIDj0.js');
-    case './icons/delivery.ts': return import('./delivery-BmLufTih-C2eUvYQc.js');
-    case './icons/dislike.ts': return import('./dislike-DMXIEtzt-CUllrJnX.js');
-    case './icons/document-csv.ts': return import('./document-csv-BmSu3fps-qS6jl3KY.js');
-    case './icons/document-file-plus.ts': return import('./document-file-plus-DOQYUKtV-D182pkBJ.js');
-    case './icons/document-file.ts': return import('./document-file-BUqnmujz-DffoFARc.js');
-    case './icons/document-image.ts': return import('./document-image-BgYsKz7H-D7ghjm1t.js');
-    case './icons/dollar-circle.ts': return import('./dollar-circle-BVOsgQj2-ODzXiSP8.js');
-    case './icons/dollar.ts': return import('./dollar-CFykJiF6-CbpZZhHa.js');
-    case './icons/dots-horizontal.ts': return import('./dots-horizontal-Bl3xu7Nf-CQ_lCfUJ.js');
-    case './icons/dots-vertical.ts': return import('./dots-vertical-40mkkgZI-IH1A3ww6.js');
-    case './icons/double-caret-left.ts': return import('./double-caret-left-oyqAcM6D-CBMtjNW6.js');
-    case './icons/double-caret-right.ts': return import('./double-caret-right-CaEFAJUV-CKF-KS-i.js');
-    case './icons/down.ts': return import('./down--KKq0yxa-Dk4hv3ct.js');
-    case './icons/download.ts': return import('./download-CAudqhnU-BpQzWeU3.js');
-    case './icons/drop-trailer.ts': return import('./drop-trailer-DlAJ_vBQ-BLXz1ryO.js');
-    case './icons/dropdown.ts': return import('./dropdown-C28rTIS0-CsqjPb4x.js');
-    case './icons/email-filled.ts': return import('./email-filled-1VNy1i0o-CqqYHBu8.js');
-    case './icons/email.ts': return import('./email-C1bySA3E-D-1ge6GP.js');
-    case './icons/export.ts': return import('./export-CLVug2kl-Dm3uDmL5.js');
-    case './icons/eye.ts': return import('./eye-BMtHMF-7-CMRjO_CR.js');
-    case './icons/fast.ts': return import('./fast-CTEZutx8-B8IRXI9t.js');
-    case './icons/favorite.ts': return import('./favorite-CdnL57Ww-4TNtPevQ.js');
-    case './icons/file.ts': return import('./file-BxDR4QmX-C-n35SZ8.js');
-    case './icons/filter.ts': return import('./filter-Db0Nlr5s-ChTcWltv.js');
-    case './icons/flag.ts': return import('./flag-Doxn1CNj-NVK1dUO8.js');
-    case './icons/folder.ts': return import('./folder-B8oJf4Cn-8cErRA9J.js');
-    case './icons/funnel.ts': return import('./funnel-Srs4aUjO-B8EbKn-9.js');
-    case './icons/gear.ts': return import('./gear-BAAJETHP-GlRZr-0T.js');
-    case './icons/graph.ts': return import('./graph-BE58cOAU-DzEcpMTZ.js');
-    case './icons/hand-tap.ts': return import('./hand-tap-5_UTZG9m-gmjQKkjl.js');
-    case './icons/hand.ts': return import('./hand-BgYtdVrD-DkNgwjbk.js');
-    case './icons/high-signal.ts': return import('./high-signal-B3r2CcQv-DLkqjvrX.js');
-    case './icons/history.ts': return import('./history-CNYIllfK-C607z1nd.js');
-    case './icons/home.ts': return import('./home-Cy8LsN5j-CXYQ4Uxe.js');
-    case './icons/hourglass.ts': return import('./hourglass-1JnprXU6-CKnuTCL_.js');
-    case './icons/import-2.ts': return import('./import-2-CkJjxM_j-B_Qh-Uz3.js');
-    case './icons/import.ts': return import('./import-rhDUm5Dy-Dgj-xhro.js');
-    case './icons/indeterminate.ts': return import('./indeterminate-BZ0acJ1--De2rObvB.js');
-    case './icons/info.ts': return import('./info-CXMYCD_g-CHqPj5bi.js');
-    case './icons/invoice-items.ts': return import('./invoice-items-CGz7rmum-A4fyZcrE.js');
-    case './icons/invoice.ts': return import('./invoice-CugnzNUF-CA_EwyR1.js');
-    case './icons/kanban.ts': return import('./kanban-BW05GStl-B4QdgfI-.js');
-    case './icons/light-bulb.ts': return import('./light-bulb-CJYecBFg-DsWwu4P_.js');
-    case './icons/like.ts': return import('./like-QtHFzoZl-BFkroS6R.js');
-    case './icons/link.ts': return import('./link-C2K5IFfc-M-xu-B_m.js');
-    case './icons/list.ts': return import('./list-qb6yfepc-TCzOzCl8.js');
-    case './icons/loadsmart-logo.ts': return import('./loadsmart-logo-DD7mf5RA-CINxysdS.js');
-    case './icons/log-out.ts': return import('./log-out-D7IEO_4w-CLW_gcgN.js');
-    case './icons/low-signal.ts': return import('./low-signal-CCApieja-OTTKp2qz.js');
-    case './icons/map.ts': return import('./map-DkdQQaHz-D56MG9Ru.js');
-    case './icons/medal.ts': return import('./medal-CFck2Vo9-Di8OBIw8.js');
-    case './icons/megaphone.ts': return import('./megaphone-F4dIKI-R-Fa_jfvCV.js');
-    case './icons/mexico-flag.ts': return import('./mexico-flag-B5V_6xOg-C9P2BAj-.js');
-    case './icons/minus.ts': return import('./minus-BFZ6IG9o-CXDQgduh.js');
-    case './icons/network-signal.ts': return import('./network-signal-Bb_xHR-r-ChW-kylC.js');
-    case './icons/no-awarded.ts': return import('./no-awarded-_pC45l2Z-DDwc6mw6.js');
-    case './icons/notes-lock.ts': return import('./notes-lock-C4iIdCWW-DvCvFVVX.js');
-    case './icons/notes.ts': return import('./notes-D0DnYYDF-C-PTeqZY.js');
-    case './icons/order.ts': return import('./order-D6iD-byD-2aCKaflF.js');
-    case './icons/package-tracking.ts': return import('./package-tracking-VlPDjmKG-Bzi_IkGr.js');
-    case './icons/padlock-open.ts': return import('./padlock-open-l4wBXg6b-Did5CQKv.js');
-    case './icons/padlock.ts': return import('./padlock-Cr-9ZU_A-nPhhCc4a.js');
-    case './icons/pencil.ts': return import('./pencil-ayTIIr8--BeGhDbSB.js');
-    case './icons/phone.ts': return import('./phone-BTCU0Wy1-DiI43W4x.js');
-    case './icons/pin-filled.ts': return import('./pin-filled-DSa95Sh1-ByeaRnwc.js');
-    case './icons/pin-map.ts': return import('./pin-map-BkHB4tNw-CgaydYBb.js');
-    case './icons/pin.ts': return import('./pin-Bn3yTC_u-DYhtrsUA.js');
-    case './icons/plugs.ts': return import('./plugs-zfSg1YW9-DCxMatuv.js');
-    case './icons/plus.ts': return import('./plus-ozGMFMAz-DRwxDC1e.js');
-    case './icons/pod.ts': return import('./pod-ThCZ5RL3-Cc9TcrbZ.js');
-    case './icons/pre-confirmed-load.ts': return import('./pre-confirmed-load-Bwr-dWH2-BEsIK12X.js');
-    case './icons/print.ts': return import('./print-D1P_UCUE-m5CXCP6W.js');
-    case './icons/profile.ts': return import('./profile-BAhtRV-H-Cro5r2rk.js');
-    case './icons/question-dot.ts': return import('./question-dot-gWpkPf6c-C1nlxKtF.js');
-    case './icons/receipt.ts': return import('./receipt-BwBkV8gn-BRe2nmNl.js');
-    case './icons/redo.ts': return import('./redo-ByLKSZcV-qJ0dTPzv.js');
-    case './icons/refresh.ts': return import('./refresh-Dom4yiat-CfRYDybG.js');
-    case './icons/reloading.ts': return import('./reloading-CltA-FOS-B32mFbhR.js');
-    case './icons/road.ts': return import('./road-B0mpmfpO-BcPEPQ9_.js');
-    case './icons/round-trip.ts': return import('./round-trip-CJ6rlpuR-r3ll4Rfm.js');
-    case './icons/satellite.ts': return import('./satellite-B6YyzjV9-DLqBcrjB.js');
-    case './icons/search.ts': return import('./search-CEuIfz1B-D7P3GBOr.js');
-    case './icons/send.ts': return import('./send-DGyddefp-vNgW105y.js');
-    case './icons/share.ts': return import('./share-C6k81f3b-Dj2lNEpn.js');
-    case './icons/ship.ts': return import('./ship-C4UkiVeP-LVK7m2yf.js');
-    case './icons/signal.ts': return import('./signal-DAhLkSYH-CPJqPToX.js');
-    case './icons/sparkle.ts': return import('./sparkle-pS82Zae1-Pnz95g4B.js');
-    case './icons/star.ts': return import('./star-DR6uwE4h-p6jnH9eA.js');
-    case './icons/swap.ts': return import('./swap-BtTQYKMg-CW3daXAJ.js');
-    case './icons/tag-chevron.ts': return import('./tag-chevron-DoDGVtfR-YuAI7Grq.js');
-    case './icons/tag.ts': return import('./tag-IL1JfL1C-CrsNNv-2.js');
-    case './icons/telephone-slash.ts': return import('./telephone-slash-BZap8ZKk-De1ypE_B.js');
-    case './icons/telephone.ts': return import('./telephone-YrI9UwiG-CrYHz0oD.js');
-    case './icons/terminal.ts': return import('./terminal-s52u0ofd-BzEbp9hf.js');
-    case './icons/timer.ts': return import('./timer-Br-HDx_b-DoaQfVHr.js');
-    case './icons/tms-ready.ts': return import('./tms-ready-D0C0lkjm-Cxbrd31y.js');
-    case './icons/train.ts': return import('./train-D4LRq2PY-BAY2vS9d.js');
-    case './icons/trash.ts': return import('./trash-3UNIllFc-Dm77Lk-8.js');
-    case './icons/trend-down.ts': return import('./trend-down-BDR4cf1B-gTokWb2-.js');
-    case './icons/trend-up.ts': return import('./trend-up-B_kfsVbA-CYgBRsWQ.js');
-    case './icons/trophee.ts': return import('./trophee-CAwY7HPq-BomJcGTn.js');
-    case './icons/truck.ts': return import('./truck-JWZ6uNC1-DrkXc2nm.js');
-    case './icons/unarchive.ts': return import('./unarchive-Dk6YxGuz-Ci5-Yp8v.js');
-    case './icons/undo.ts': return import('./undo-D22pWaLw-BV-L87Yv.js');
-    case './icons/united-states-flag.ts': return import('./united-states-flag-CsHL9bsp-CWCvSp98.js');
-    case './icons/up.ts': return import('./up-DO_i3SQ4-Dl9ZIX-7.js');
-    case './icons/upgrade.ts': return import('./upgrade-CnbgCK-Y-CzAYL5c1.js');
-    case './icons/upload.ts': return import('./upload-DtwRfNbp-BOOAcHwF.js');
-    case './icons/user.ts': return import('./user-BePsqno7-BgiYG-Yq.js');
-    case './icons/wallet.ts': return import('./wallet-BWOwCd2Q-CCR5Oadh.js');
-    case './icons/warehouse.ts': return import('./warehouse-CqDssJJV-D4iPS-NV.js');
-    case './icons/wifi-off.ts': return import('./wifi-off-B_p79YVu-DAGIt6C6.js');
-    case './icons/wifi.ts': return import('./wifi-Dt8207Jw-Hvud-dOT.js');
-    case './icons/x-small.ts': return import('./x-small-C9YOZeBE-DE2IwoDG.js');
-    case './icons/x.ts': return import('./x-B2033JKZ-BUY0ekRX.js');
-    case './icons/zoom-in.ts': return import('./zoom-in-CVkDSwyt-gaxzEAhs.js');
-    case './icons/zoom-out.ts': return import('./zoom-out-DqHlySLS-BY0_9Mqh.js');
+    case './icons/add-circle.ts': return import('./add-circle-DUC9alAp-Ctkutyu0.js');
+    case './icons/alarm.ts': return import('./alarm-BaGj0N2--Cfu4UXiK.js');
+    case './icons/alert-blocked.ts': return import('./alert-blocked-7Pq9aiIm-DCnmigRx.js');
+    case './icons/alert-circle.ts': return import('./alert-circle-DPjFhwuE-BHDwRdgh.js');
+    case './icons/anchor.ts': return import('./anchor-BOowxXQz-DR0innL6.js');
+    case './icons/archive.ts': return import('./archive-DCVFqmKd-B_rLyoe7.js');
+    case './icons/arrow-left.ts': return import('./arrow-left-UQ1azG0M-DcM92hhZ.js');
+    case './icons/arrow-right.ts': return import('./arrow-right-D9ODrfAT-JmxAxKvq.js');
+    case './icons/arrow-sort-down.ts': return import('./arrow-sort-down-DyaC4vSu-eb6U4MyY.js');
+    case './icons/arrow-sort-up-down.ts': return import('./arrow-sort-up-down-BkqHwWw9-B-1pqvab.js');
+    case './icons/arrow-sort-up.ts': return import('./arrow-sort-up-D3rkqbKD-qq4serZu.js');
+    case './icons/asterisk.ts': return import('./asterisk-ZHV7R7s1-DiF_TVwM.js');
+    case './icons/attention.ts': return import('./attention-Bktk81gv-DML6s-Jf.js');
+    case './icons/automatic.ts': return import('./automatic-C_cPnNpn-CvhswXY5.js');
+    case './icons/bank.ts': return import('./bank-AfsU0_8a-BGA3FkwI.js');
+    case './icons/bell-cancel.ts': return import('./bell-cancel-Ca9tfyFs-Bt6GSXZe.js');
+    case './icons/bell.ts': return import('./bell-BeboL9IG-D28zokT6.js');
+    case './icons/blind-bol.ts': return import('./blind-bol-buLUijt0-DNVTpLkE.js');
+    case './icons/board.ts': return import('./board-C7-8ym4Q-Cg3lcwyQ.js');
+    case './icons/bol.ts': return import('./bol-CfGOF64d-CQcAMXut.js');
+    case './icons/bolt-off.ts': return import('./bolt-off-BcH48taL-CBm4G2JC.js');
+    case './icons/bolt.ts': return import('./bolt-6Jcu4Dlq-B3U94E3R.js');
+    case './icons/box.ts': return import('./box-DCc-Lqkq-DHy_z_e8.js');
+    case './icons/broadcast.ts': return import('./broadcast-DycP-JY_-ClndtLLH.js');
+    case './icons/burguer-menu.ts': return import('./burguer-menu-Asv06-tR-BVuCMF0m.js');
+    case './icons/calendar.ts': return import('./calendar-Dx_9TSsr-BTlCmP7D.js');
+    case './icons/camera.ts': return import('./camera-Czlcg8L7-CFRyxtSV.js');
+    case './icons/canada-flag.ts': return import('./canada-flag-CfJo38yD-ByEmeJzp.js');
+    case './icons/caret-down.ts': return import('./caret-down-BVaLyzKU-RffKGWan.js');
+    case './icons/caret-left.ts': return import('./caret-left-BDnpJFoh-1rjAWHKD.js');
+    case './icons/caret-right.ts': return import('./caret-right-iJvAGCHE-CiowNQN_.js');
+    case './icons/caret-up.ts': return import('./caret-up-9pIV6ltV-C3MRuW6S.js');
+    case './icons/carrier-contract.ts': return import('./carrier-contract-DW2sjcCT-xrs1cXJe.js');
+    case './icons/chat.ts': return import('./chat-DGQ6mScP-Bxxm32Gl.js');
+    case './icons/check.ts': return import('./check-Cni8S44c-DgtR9k8w.js');
+    case './icons/clip.ts': return import('./clip-DM4Wpi9M-COBBYMI8.js');
+    case './icons/clock.ts': return import('./clock-CFBsWldY-DkTtudeU.js');
+    case './icons/clown.ts': return import('./clown-DFK7bIK4-esEEQUDv.js');
+    case './icons/code.ts': return import('./code-DmezwyM4-bhrz1LoD.js');
+    case './icons/comment.ts': return import('./comment-CjEoGy-K-BJhLaeEW.js');
+    case './icons/company.ts': return import('./company-DqCQwhbF-CsQh03Ye.js');
+    case './icons/confetti.ts': return import('./confetti-CZEHLeVv-CI_o73OB.js');
+    case './icons/contract.ts': return import('./contract-BQ6z-O8E-D9dASOaG.js');
+    case './icons/copy.ts': return import('./copy-D5yGaYk7-B6zcJ3-G.js');
+    case './icons/corner-down-r.ts': return import('./corner-down-r-CwJXOJqV-B0NKbegi.js');
+    case './icons/corner-down.ts': return import('./corner-down-Qmk_Cqah-CLZZk4xc.js');
+    case './icons/corner-up.ts': return import('./corner-up-PRIgBw5O-CqK2tbRG.js');
+    case './icons/credit-card.ts': return import('./credit-card-CPp_LFTs-DgKoFmyu.js');
+    case './icons/delivery.ts': return import('./delivery-BmLufTih-BRjR93HI.js');
+    case './icons/dislike.ts': return import('./dislike-DMXIEtzt-CLgA28z9.js');
+    case './icons/document-csv.ts': return import('./document-csv-BmSu3fps-Dlcarqn_.js');
+    case './icons/document-file-plus.ts': return import('./document-file-plus-DOQYUKtV-vonJyqMU.js');
+    case './icons/document-file.ts': return import('./document-file-BUqnmujz-DMuP94RV.js');
+    case './icons/document-image.ts': return import('./document-image-BgYsKz7H-Ch2cDD2e.js');
+    case './icons/dollar-circle.ts': return import('./dollar-circle-BVOsgQj2-3Mj7Cpkq.js');
+    case './icons/dollar.ts': return import('./dollar-CFykJiF6-MNus7vKJ.js');
+    case './icons/dots-horizontal.ts': return import('./dots-horizontal-Bl3xu7Nf-Dp90vlZY.js');
+    case './icons/dots-vertical.ts': return import('./dots-vertical-40mkkgZI-hrxBYHCb.js');
+    case './icons/double-caret-left.ts': return import('./double-caret-left-oyqAcM6D-DEOJgqt1.js');
+    case './icons/double-caret-right.ts': return import('./double-caret-right-CaEFAJUV-C2IsPG-E.js');
+    case './icons/down.ts': return import('./down--KKq0yxa-BcM4MuB6.js');
+    case './icons/download.ts': return import('./download-CAudqhnU-DW6EIePg.js');
+    case './icons/drop-trailer.ts': return import('./drop-trailer-DlAJ_vBQ-Ck7EN0yS.js');
+    case './icons/dropdown.ts': return import('./dropdown-C28rTIS0-BvGBrqaj.js');
+    case './icons/email-filled.ts': return import('./email-filled-1VNy1i0o-OAu5sjU1.js');
+    case './icons/email.ts': return import('./email-C1bySA3E-EG_ZHEpG.js');
+    case './icons/export.ts': return import('./export-CLVug2kl-CMHi_2FU.js');
+    case './icons/eye.ts': return import('./eye-BMtHMF-7-CUaSlRL2.js');
+    case './icons/fast.ts': return import('./fast-CTEZutx8-ByJQVdRY.js');
+    case './icons/favorite.ts': return import('./favorite-CdnL57Ww-DI1TnxFE.js');
+    case './icons/file.ts': return import('./file-BxDR4QmX-CsE1lR7T.js');
+    case './icons/filter.ts': return import('./filter-Db0Nlr5s-DyM8rY9A.js');
+    case './icons/flag.ts': return import('./flag-Doxn1CNj-CaRdTGRC.js');
+    case './icons/folder.ts': return import('./folder-B8oJf4Cn-DCA-hiDB.js');
+    case './icons/funnel.ts': return import('./funnel-Srs4aUjO-BHAQTjg_.js');
+    case './icons/gear.ts': return import('./gear-BAAJETHP-7vEQENh-.js');
+    case './icons/graph.ts': return import('./graph-BE58cOAU-DdTsJssn.js');
+    case './icons/hand-tap.ts': return import('./hand-tap-5_UTZG9m-UqS7SY2C.js');
+    case './icons/hand.ts': return import('./hand-BgYtdVrD-DLmIWymE.js');
+    case './icons/high-signal.ts': return import('./high-signal-B3r2CcQv-4W-4vOBy.js');
+    case './icons/history.ts': return import('./history-CNYIllfK-DO2V5LpM.js');
+    case './icons/home.ts': return import('./home-Cy8LsN5j-CqkzAESq.js');
+    case './icons/hourglass.ts': return import('./hourglass-1JnprXU6-BObLbaZW.js');
+    case './icons/import-2.ts': return import('./import-2-CkJjxM_j-Lf255DxR.js');
+    case './icons/import.ts': return import('./import-rhDUm5Dy-DZmGJV6I.js');
+    case './icons/indeterminate.ts': return import('./indeterminate-BZ0acJ1--axSk5I8y.js');
+    case './icons/info.ts': return import('./info-CXMYCD_g-CXO89mrj.js');
+    case './icons/invoice-items.ts': return import('./invoice-items-CGz7rmum-Bhy0TYpG.js');
+    case './icons/invoice.ts': return import('./invoice-CugnzNUF-CyvesXB7.js');
+    case './icons/kanban.ts': return import('./kanban-BW05GStl-D88mZ1uL.js');
+    case './icons/light-bulb.ts': return import('./light-bulb-CJYecBFg-BvJzaGIS.js');
+    case './icons/like.ts': return import('./like-QtHFzoZl-ByNxod9X.js');
+    case './icons/link.ts': return import('./link-C2K5IFfc-BJLgNy3b.js');
+    case './icons/list.ts': return import('./list-qb6yfepc-DbCwb8-1.js');
+    case './icons/loadsmart-logo.ts': return import('./loadsmart-logo-DD7mf5RA-CluOgWNu.js');
+    case './icons/log-out.ts': return import('./log-out-D7IEO_4w-ByKaYHyn.js');
+    case './icons/low-signal.ts': return import('./low-signal-CCApieja-DoxGKmkL.js');
+    case './icons/map.ts': return import('./map-DkdQQaHz-DKfXFt5h.js');
+    case './icons/medal.ts': return import('./medal-CFck2Vo9-C7pfNLEO.js');
+    case './icons/megaphone.ts': return import('./megaphone-F4dIKI-R-D2Mt3_H_.js');
+    case './icons/mexico-flag.ts': return import('./mexico-flag-B5V_6xOg-BhclLFWr.js');
+    case './icons/minus.ts': return import('./minus-BFZ6IG9o-nW_lBEqu.js');
+    case './icons/network-signal.ts': return import('./network-signal-Bb_xHR-r-BPLm4LFo.js');
+    case './icons/no-awarded.ts': return import('./no-awarded-_pC45l2Z-CaUJY35X.js');
+    case './icons/notes-lock.ts': return import('./notes-lock-C4iIdCWW-yVuCl4DX.js');
+    case './icons/notes.ts': return import('./notes-D0DnYYDF-BQO7kP2s.js');
+    case './icons/order.ts': return import('./order-D6iD-byD-CTQJvwh_.js');
+    case './icons/package-tracking.ts': return import('./package-tracking-VlPDjmKG-Bv-yuZP0.js');
+    case './icons/padlock-open.ts': return import('./padlock-open-l4wBXg6b-uw-GO5k0.js');
+    case './icons/padlock.ts': return import('./padlock-Cr-9ZU_A-CRg8ucks.js');
+    case './icons/pencil.ts': return import('./pencil-ayTIIr8--BaWHtrdJ.js');
+    case './icons/phone.ts': return import('./phone-BTCU0Wy1-cewlAn1q.js');
+    case './icons/pin-filled.ts': return import('./pin-filled-DSa95Sh1-DymPmEl2.js');
+    case './icons/pin-map.ts': return import('./pin-map-BkHB4tNw-gLWuB7Vy.js');
+    case './icons/pin.ts': return import('./pin-Bn3yTC_u-C9wnB7-L.js');
+    case './icons/plugs.ts': return import('./plugs-zfSg1YW9-BqEk5mMe.js');
+    case './icons/plus.ts': return import('./plus-ozGMFMAz-DQ-c8t1w.js');
+    case './icons/pod.ts': return import('./pod-ThCZ5RL3-BPEzs_Wa.js');
+    case './icons/pre-confirmed-load.ts': return import('./pre-confirmed-load-Bwr-dWH2-BAxCwo9T.js');
+    case './icons/print.ts': return import('./print-D1P_UCUE-CLd1OBvt.js');
+    case './icons/profile.ts': return import('./profile-BAhtRV-H-jVlIJFPY.js');
+    case './icons/question-dot.ts': return import('./question-dot-gWpkPf6c-Df6oW4RR.js');
+    case './icons/receipt.ts': return import('./receipt-BwBkV8gn-CYbcBIjy.js');
+    case './icons/redo.ts': return import('./redo-ByLKSZcV-BYLRRGjW.js');
+    case './icons/refresh.ts': return import('./refresh-Dom4yiat-BGP2kWUA.js');
+    case './icons/reloading.ts': return import('./reloading-CltA-FOS-BQoguQTN.js');
+    case './icons/road.ts': return import('./road-B0mpmfpO-E_icjN68.js');
+    case './icons/round-trip.ts': return import('./round-trip-CJ6rlpuR-CJYnmh0V.js');
+    case './icons/satellite.ts': return import('./satellite-B6YyzjV9-DOI-6Xw6.js');
+    case './icons/search.ts': return import('./search-CEuIfz1B-DhiljDTp.js');
+    case './icons/send.ts': return import('./send-DGyddefp-DFc_4lvT.js');
+    case './icons/share.ts': return import('./share-C6k81f3b-BrbXt8nv.js');
+    case './icons/ship.ts': return import('./ship-C4UkiVeP-BeYgOYUm.js');
+    case './icons/signal.ts': return import('./signal-DAhLkSYH-DaMubJTS.js');
+    case './icons/sparkle.ts': return import('./sparkle-pS82Zae1-D6ZHUoli.js');
+    case './icons/star.ts': return import('./star-DR6uwE4h-Csmiwd7-.js');
+    case './icons/swap.ts': return import('./swap-BtTQYKMg-9ISYqXD4.js');
+    case './icons/tag-chevron.ts': return import('./tag-chevron-DoDGVtfR-CzH_-ZmJ.js');
+    case './icons/tag.ts': return import('./tag-IL1JfL1C-CfkMrgmj.js');
+    case './icons/telephone-slash.ts': return import('./telephone-slash-BZap8ZKk-C0wOmUxT.js');
+    case './icons/telephone.ts': return import('./telephone-YrI9UwiG-y6pEfXiw.js');
+    case './icons/terminal.ts': return import('./terminal-s52u0ofd-C8hA6hUg.js');
+    case './icons/timer.ts': return import('./timer-Br-HDx_b-Du5qJ-S7.js');
+    case './icons/tms-ready.ts': return import('./tms-ready-D0C0lkjm-DIiOX7ps.js');
+    case './icons/train.ts': return import('./train-D4LRq2PY-JKTM_Ph2.js');
+    case './icons/trash.ts': return import('./trash-3UNIllFc-C3PxOS5Z.js');
+    case './icons/trend-down.ts': return import('./trend-down-BDR4cf1B-jsGarK52.js');
+    case './icons/trend-up.ts': return import('./trend-up-B_kfsVbA-CDi-eu3L.js');
+    case './icons/trophee.ts': return import('./trophee-CAwY7HPq-D-nPg_oa.js');
+    case './icons/truck.ts': return import('./truck-JWZ6uNC1-Ci9r7Npj.js');
+    case './icons/unarchive.ts': return import('./unarchive-Dk6YxGuz-yAM9N7_O.js');
+    case './icons/undo.ts': return import('./undo-D22pWaLw-uTPkcxA0.js');
+    case './icons/united-states-flag.ts': return import('./united-states-flag-CsHL9bsp-CvWWbbE4.js');
+    case './icons/up.ts': return import('./up-DO_i3SQ4-BxR4RWhC.js');
+    case './icons/upgrade.ts': return import('./upgrade-CnbgCK-Y-IS-CWzsq.js');
+    case './icons/upload.ts': return import('./upload-DtwRfNbp-BcL4xTMt.js');
+    case './icons/user.ts': return import('./user-BePsqno7-DX0UPGtB.js');
+    case './icons/wallet.ts': return import('./wallet-BWOwCd2Q-B-9iso7p.js');
+    case './icons/warehouse.ts': return import('./warehouse-CqDssJJV-PIr5jujD.js');
+    case './icons/wifi-off.ts': return import('./wifi-off-B_p79YVu-CPNxFyag.js');
+    case './icons/wifi.ts': return import('./wifi-Dt8207Jw-CBA9QF73.js');
+    case './icons/x-small.ts': return import('./x-small-C9YOZeBE-LCAFtW_J.js');
+    case './icons/x.ts': return import('./x-B2033JKZ-BCx65oiR.js');
+    case './icons/zoom-in.ts': return import('./zoom-in-CVkDSwyt-BNbYI4RI.js');
+    case './icons/zoom-out.ts': return import('./zoom-out-DqHlySLS-C2mHlT5x.js');
     default: return new Promise(function(resolve, reject) {
       (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
         reject.bind(null, new Error("Unknown variable dynamic import: " + path))
@@ -1903,7 +1903,7 @@ class Icon extends r$4 {
     }
 }
 _Icon_setError = new WeakMap(), _Icon_loadIcon = new WeakMap();
-Icon.styles = [styles$G()];
+Icon.styles = [styles$F()];
 Icon.define();
 
 var _Accordion_instances, _Accordion_accordionTrigger_get, _Accordion_accordionPanel_get, _Accordion_accordionContent_get, _Accordion_handleExpand, _Accordion_toggle, _Accordion_handleTransition;
@@ -2001,7 +2001,7 @@ _Accordion_handleTransition = new WeakMap(), _Accordion_instances = new WeakSet(
         detail: { name: 'accordion', value: this.expanded },
     });
 };
-Accordion.styles = [styles$H()];
+Accordion.styles = [styles$G()];
 Accordion.define();
 
 class AccordionTitle extends Component {
@@ -2120,7 +2120,7 @@ Avatar.define();
  * SPDX-License-Identifier: BSD-3-Clause
  */const o$3=o=>o??E$1;
 
-function styles$F(selector = '#button') {
+function styles$E(selector = '#button') {
     return i$9 `
 		:host {
 			${typography('button-md')};
@@ -2237,9 +2237,9 @@ function styles$F(selector = '#button') {
 	`;
 }
 
-function styles$E() {
+function styles$D() {
     return [
-        styles$F(),
+        styles$E(),
         i$9 `
 			:host([variant='primary']) {
 				--m-button-background-color: ${getColor('color-primary-60')};
@@ -2512,7 +2512,7 @@ function styles$E() {
 }
 
 const DEFAULT_SIZE$2 = 10;
-function styles$D() {
+function styles$C() {
     return i$9 `
 		:host {
 			color: inherit;
@@ -2588,7 +2588,7 @@ _DotsLoader_instances = new WeakSet(), _DotsLoader_getSize = function _DotsLoade
     }
     return `${parsedSize || DEFAULT_SIZE$2}px`;
 };
-DotsLoader.styles = [styles$D()];
+DotsLoader.styles = [styles$C()];
 DotsLoader.define();
 
 var _Button_handleDisabledChange, _Button_handleClick, _Button_handleLinkClick, _Button_handleSubmit, _Button_handleReset, _Button_isDisabled, _Button_isLink;
@@ -2754,7 +2754,7 @@ Button.shadowRootOptions = {
     ...r$5.shadowRootOptions,
     delegatesFocus: true,
 };
-Button.styles = [styles$E()];
+Button.styles = [styles$D()];
 Button.define();
 
 var _BackButton_handleLabelChange;
@@ -2818,7 +2818,7 @@ const t$1={ATTRIBUTE:1},e$2=t=>(...e)=>({_$litDirective$:t,values:e});let i$2 =
  * SPDX-License-Identifier: BSD-3-Clause
  */const e$1=e$2(class extends i$2{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T$1}});
 
-function styles$C() {
+function styles$B() {
     return i$9 `
 		:host {
 			--m-host-size: 24px;
@@ -2921,7 +2921,7 @@ _Badge_instances = new WeakSet(), _Badge_counter_get = function _Badge_counter_g
     }
     return E$1;
 };
-Badge.styles = [styles$C()];
+Badge.styles = [styles$B()];
 Badge.define();
 
 class BannerActionPrimary extends Button {
@@ -2963,7 +2963,7 @@ class BannerActionSecondary extends Button {
 }
 BannerActionSecondary.define();
 
-function styles$B() {
+function styles$A() {
     return i$9 `
 		:host {
 			display: flex;
@@ -2992,10 +2992,10 @@ class BannerActions extends Component {
 		`;
     }
 }
-BannerActions.styles = [styles$B()];
+BannerActions.styles = [styles$A()];
 BannerActions.define();
 
-function styles$A() {
+function styles$z() {
     return i$9 `
 		:host {
 			${typography('body-md')};
@@ -3020,7 +3020,7 @@ class BannerDescription extends Component {
         return x `<slot></slot>`;
     }
 }
-BannerDescription.styles = [styles$A()];
+BannerDescription.styles = [styles$z()];
 BannerDescription.define();
 
 class BannerIcon extends Component {
@@ -3041,7 +3041,7 @@ class BannerIcon extends Component {
 }
 BannerIcon.define();
 
-function styles$z() {
+function styles$y() {
     return i$9 `
 		:host {
 			${typography('body-md-bold')};
@@ -3077,10 +3077,10 @@ class BannerTitle extends Component {
         return x `<slot></slot>`;
     }
 }
-BannerTitle.styles = [styles$z()];
+BannerTitle.styles = [styles$y()];
 BannerTitle.define();
 
-function styles$y() {
+function styles$x() {
     return i$9 `
 		:host {
 			display: block;
@@ -3202,7 +3202,7 @@ function toRem(value, base = BASE_PIXELS) {
     return r$8(`${parseInt(String(value), 10) / base}rem`);
 }
 
-function styles$x() {
+function styles$w() {
     return i$9 `
 		:host {
 			--m-close-button-base-color: ${getColor('color-text-primary')};
@@ -3378,7 +3378,7 @@ CloseButton.shadowRootOptions = {
     ...r$5.shadowRootOptions,
     delegatesFocus: true,
 };
-CloseButton.styles = [styles$x()];
+CloseButton.styles = [styles$w()];
 CloseButton.define();
 
 /**
@@ -3442,7 +3442,7 @@ const TEXT_CONTENT_HTML_TAGS = [
     'var', // Variables
 ];
 
-function styles$w() {
+function styles$v() {
     return i$9 `
 		:host {
 			--m-text-color: ${getColor('color-text-primary')};
@@ -3636,7 +3636,7 @@ class Text extends Component {
         return u `<slot></slot>`;
     }
 }
-Text.styles = [styles$w()];
+Text.styles = [styles$v()];
 Text.define();
 
 var _Banner_primaryAction, _Banner_handleDismissClick;
@@ -3750,7 +3750,7 @@ class Banner extends Component {
     }
 }
 _Banner_primaryAction = new WeakMap(), _Banner_handleDismissClick = new WeakMap();
-Banner.styles = [styles$y()];
+Banner.styles = [styles$x()];
 Banner.define();
 
 var _BaseLayout_setOrRemoveProperty;
@@ -3856,7 +3856,7 @@ function getBaseLayoutStyles(cssPropertiesPrefix) {
 	`;
 }
 
-function styles$v() {
+function styles$u() {
     return i$9 `
 		:host {
 			--m-body-padding: ${getToken$1('spacing-4')};
@@ -3901,7 +3901,7 @@ class Body extends BaseLayout {
 Body.CSSPropertiesPrefix = 'body';
 Body.styles = [
     getBaseLayoutStyles(Body.CSSPropertiesPrefix),
-    styles$v(),
+    styles$u(),
 ];
 Body.define();
 
@@ -4956,7 +4956,7 @@ class CardTitle extends Component {
 CardTitle.styles = [cardTitleStyles()];
 CardTitle.define();
 
-function styles$u() {
+function styles$t() {
     return i$9 `
 		.m-divider {
 			border: 0;
@@ -4981,7 +4981,7 @@ class Divider extends Component {
         return x `<hr class="m-divider" />`;
     }
 }
-Divider.styles = [styles$u()];
+Divider.styles = [styles$t()];
 Divider.define();
 
 class CardDivider extends Divider {
@@ -5083,7 +5083,7 @@ class CardActionTertiary extends Button {
 }
 CardActionTertiary.define();
 
-function styles$t() {
+function styles$s() {
     return i$9 `
 		:host {
 			--m-caret-button-base-color: ${getColor('color-text-primary')};
@@ -5264,10 +5264,10 @@ CaretButton.shadowRootOptions = {
     ...r$5.shadowRootOptions,
     delegatesFocus: true,
 };
-CaretButton.styles = [styles$t()];
+CaretButton.styles = [styles$s()];
 CaretButton.define();
 
-function styles$s() {
+function styles$r() {
     return i$9 `
 		:host {
 			${typography('body-md')};
@@ -5610,7 +5610,7 @@ Checkbox.shadowRootOptions = {
     ...r$5.shadowRootOptions,
     delegatesFocus: true,
 };
-Checkbox.styles = [styles$s()];
+Checkbox.styles = [styles$r()];
 Checkbox.define();
 
 /**
@@ -5643,7 +5643,7 @@ function attachContextRoot() {
 
 const dialogContext = n$4(Symbol('dialog'));
 
-function styles$r() {
+function styles$q() {
     return i$9 `
 		:host {
 			--margin: ${getToken$1('spacing-6')};
@@ -5890,7 +5890,7 @@ _Dialog_contextProvider = new WeakMap(), _Dialog_handleClick = new WeakMap(), _D
     event.preventDefault();
     __classPrivateFieldGet$1(this, _Dialog_instances, "m", _Dialog_emitCloseEvent).call(this);
 };
-Dialog.styles = [styles$r()];
+Dialog.styles = [styles$q()];
 Dialog.define();
 
 const DIALOG_SIZES = [
@@ -5993,7 +5993,7 @@ class DialogActions extends Group {
 }
 DialogActions.define();
 
-function styles$q() {
+function styles$p() {
     return i$9 `
 		:host {
 			overflow-y: auto;
@@ -6016,7 +6016,7 @@ class DialogBody extends Component {
         return x `<slot></slot>`;
     }
 }
-DialogBody.styles = [styles$q()];
+DialogBody.styles = [styles$p()];
 DialogBody.define();
 
 class DialogClose extends CloseButton {
@@ -6051,7 +6051,7 @@ class DialogFooter extends Component {
 }
 DialogFooter.define();
 
-function styles$p() {
+function styles$o() {
     return i$9 `
 		:host {
 			${typography('heading-md-bold')};
@@ -6129,10 +6129,10 @@ _DialogHeader_context = new WeakMap(), _DialogHeader_instances = new WeakSet(),
 			<m-icon name=${name} color=${color} size="24" aria-hidden="true"></m-icon>
 		`;
 };
-DialogHeader.styles = [styles$p()];
+DialogHeader.styles = [styles$o()];
 DialogHeader.define();
 
-function styles$o() {
+function styles$n() {
     return i$9 `
 		:host {
 			--padding: ${getToken$1('spacing-6')};
@@ -6359,7 +6359,7 @@ _Drawer_handleClick = new WeakMap(), _Drawer_instances = new WeakSet(), _Drawer_
     event.preventDefault();
     __classPrivateFieldGet$1(this, _Drawer_instances, "m", _Drawer_emitCloseEvent).call(this);
 };
-Drawer.styles = [styles$o()];
+Drawer.styles = [styles$n()];
 Drawer.define();
 
 const DRAWER_SIZES = ['small', 'medium', 'large'];
@@ -6406,7 +6406,7 @@ class DrawerActionTertiary extends Button {
 }
 DrawerActionTertiary.define();
 
-function styles$n() {
+function styles$m() {
     return i$9 `
 		:host {
 			margin-top: auto;
@@ -6436,10 +6436,10 @@ class DrawerActions extends Group {
         this.setAttribute('slot', 'actions');
     }
 }
-DrawerActions.styles = [...Group.styles, styles$n()];
+DrawerActions.styles = [...Group.styles, styles$m()];
 DrawerActions.define();
 
-function styles$m() {
+function styles$l() {
     return i$9 `
 		:host {
 			overflow-y: auto;
@@ -6464,7 +6464,7 @@ class DrawerBody extends Component {
         return x `<slot></slot>`;
     }
 }
-DrawerBody.styles = [styles$m()];
+DrawerBody.styles = [styles$l()];
 DrawerBody.define();
 
 class DrawerClose extends CloseButton {
@@ -6485,7 +6485,7 @@ class DrawerClose extends CloseButton {
 }
 DrawerClose.define();
 
-function styles$l() {
+function styles$k() {
     return i$9 `
 		:host {
 			${typography('heading-md-bold')};
@@ -6538,7 +6538,7 @@ class DrawerHeader extends Component {
 		`;
     }
 }
-DrawerHeader.styles = [styles$l()];
+DrawerHeader.styles = [styles$k()];
 DrawerHeader.define();
 
 /**
@@ -7165,6 +7165,90 @@ const hide$1 = function (options) {
   };
 };
 
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
+
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform,
+    elements
+  } = state;
+  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === 'y';
+  const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === 'number' ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === 'number') {
+    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset$1 = function (options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: 'offset',
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+
+      // If the placement is the same and the arrow caused an alignment offset
+      // then we don't need to change the positioning coordinates.
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -8043,6 +8127,15 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -8179,7 +8272,7 @@ const POPOVER_PLACEMENT_VALUES = [
     'bottom-start',
     'bottom-end',
 ];
-const logger$c = createLogger('popover');
+const logger$e = createLogger('popover');
 class Popover extends Component {
     static get properties() {
         return {
@@ -8193,16 +8286,12 @@ class Popover extends Component {
         super();
         _Popover_updateCleanup.set(this, void 0);
         // eslint-disable-next-line class-methods-use-this
-        this.getFloatingOffset = () => {
-            return 10;
-        };
-        // eslint-disable-next-line class-methods-use-this
         this.renderArrow = () => {
             return x `<span id="arrow"></span>`;
         };
         this.reposition = async (reason) => {
             if (this.floating == null || this.reference == null) {
-                logger$c.warn('[popover]', 'both floating and reference elements should be available', { reference: this.reference, floating: this.floating });
+                logger$e.warn('[popover]', 'both floating and reference elements should be available', { reference: this.reference, floating: this.floating });
                 return;
             }
             const { x, y, placement, middlewareData } = await computePosition(this.reference, this.floating, {
@@ -8216,6 +8305,7 @@ class Popover extends Component {
                     },
                 },
                 middleware: [
+                    offset(this.getFloatingOffset()),
                     // to prevent the floating element from overflowing on the main axis of its placement
                     flip(),
                     // preventing overflow while maintaining the desired placement as best as possible.
@@ -8238,21 +8328,22 @@ class Popover extends Component {
             }
             const [side] = placement.split('-');
             const hasArrow = this.arrow != null;
+            const floatingOffset = this.getFloatingOffset();
             const mainSideIncrement = {
                 top: {
                     x: '0px',
-                    y: getPositionOffset(hasArrow, 'top', this.getFloatingOffset()),
+                    y: getPositionOffset(hasArrow, 'top', floatingOffset.mainAxis),
                 },
                 bottom: {
                     x: '0px',
-                    y: getPositionOffset(hasArrow, 'bottom', this.getFloatingOffset()),
+                    y: getPositionOffset(hasArrow, 'bottom', floatingOffset.mainAxis),
                 },
                 right: {
-                    x: getPositionOffset(hasArrow, 'right', this.getFloatingOffset()),
+                    x: getPositionOffset(hasArrow, 'right', floatingOffset.mainAxis),
                     y: '0px',
                 },
                 left: {
-                    x: getPositionOffset(hasArrow, 'left', this.getFloatingOffset()),
+                    x: getPositionOffset(hasArrow, 'left', floatingOffset.mainAxis),
                     y: '0px',
                 },
             };
@@ -8300,7 +8391,8 @@ class Popover extends Component {
         super.disconnectedCallback();
         __classPrivateFieldGet$1(this, _Popover_updateCleanup, "f")?.call(this);
     }
-    firstUpdated() {
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         if (this.asPopover && supportsPopover() && this.floating) {
             /**
              * setting this attribute to manual means the popover must always be explicitly hidden
@@ -8332,6 +8424,13 @@ class Popover extends Component {
     getArrowElement() {
         throw new Error('Method not implemented.');
     }
+    // eslint-disable-next-line class-methods-use-this
+    getFloatingOffset() {
+        return {
+            mainAxis: 4,
+            crossAxis: 0,
+        };
+    }
     get reference() {
         return this.getReferenceElement();
     }
@@ -8349,7 +8448,11 @@ class Popover extends Component {
         if (!this.reference || !this.floating) {
             return;
         }
-        if (isPopover(this.floating)) {
+        /**
+         * Add the isConnected check to prevent us from attempting to show
+         * the popover when the component is not connected to the DOM.
+         */
+        if (isPopover(this.floating) && this.floating.isConnected) {
             this.floating.showPopover();
         }
         this.reposition('auto');
@@ -8362,7 +8465,9 @@ class Popover extends Component {
             return;
         }
         this.open = false;
-        if (this.floating != null && isPopover(this.floating)) {
+        if (this.floating != null &&
+            isPopover(this.floating) &&
+            this.floating.isConnected) {
             this.floating.hidePopover();
         }
         __classPrivateFieldGet$1(this, _Popover_updateCleanup, "f")?.call(this);
@@ -8379,99 +8484,70 @@ class Popover extends Component {
 _Popover_updateCleanup = new WeakMap(), _Popover_getArrowPosition = new WeakMap();
 
 const DEFAULT_SELECTORS = {
-    referenceSelector: "slot[name='reference']::slotted(*),",
     floatingSelector: "slot[name='floating']::slotted(*)",
+    arrowSelector: '#arrow',
 };
-function styles$k(selectors = DEFAULT_SELECTORS) {
-    const { referenceSelector, floatingSelector } = {
-        ...DEFAULT_SELECTORS,
-        ...selectors,
-    };
-    return [
-        i$9 `
-			:host {
-				--m-popover-background-color: ${getColor('color-background-secondary-inverted')};
-				--m-popover-border-radius: ${getToken$1('border-radius-m')};
-				--m-popover-border-width: 0;
-				--m-popover-border-style: none;
-				--m-popover-overflow-x: hidden;
-				--m-popover-overflow-y: visible;
-				--m-popover-border-color: transparent;
-				--m-popover-color: ${getColor('color-text-inverted')};
-				--m-popover-elevation: ${getToken$1('elevation-2')};
-				--m-popover-width: initial;
-				--m-popover-min-width: initial;
-				--m-popover-max-width: initial;
-				--m-popover-z-index: 10;
-				--m-popover-floating-spacing-x: ${getToken$1('spacing-4')};
-				--m-popover-floating-spacing-y: ${getToken$1('spacing-2')};
-				--m-popover-floating-display: none;
-				--m-popover-floating-position: fixed;
-
-				--m-popover-arrow-size: 12px;
-				--m-popover-arrow-offset: calc(-1 * (var(--m-popover-arrow-size) / 2));
-
-				position: relative;
-			}
-
-			${r$8(referenceSelector)} {
-				display: inline-flex;
-			}
-
-			${r$8(floatingSelector)} {
-				${transition([{ property: 'box-shadow' }])};
-				${typography('body-md')};
-
-				padding-inline: var(--m-popover-floating-spacing-x);
-				padding-block: var(--m-popover-floating-spacing-y);
-				margin: 0;
-
-				position: var(--m-popover-floating-position);
-				display: var(--m-popover-floating-display);
-
-				box-sizing: border-box;
-				inline-size: var(--m-popover-width);
-				min-inline-size: var(--m-popover-min-width);
-				max-inline-size: var(--m-popover-max-width);
-
-				overflow-x: var(--m-popover-overflow-x);
-				overflow-y: var(--m-popover-overflow-y);
-
-				border-width: var(--m-popover-border-width);
-				border-style: var(--m-popover-border-style);
-				border-color: var(--m-popover-border-color);
-				border-radius: var(--m-popover-border-radius);
-
-				background-color: var(--m-popover-background-color);
-				color: var(--m-popover-color);
-
-				box-shadow: var(--m-popover-elevation);
-				z-index: var(--m-popover-z-index);
-			}
+function popoverHostStyles() {
+    return i$9 `
+		:host {
+			--m-popover-elevation: ${getToken$1('elevation-2')};
+			--m-popover-floating-position: fixed;
+			--m-popover-z-index: 10;
+			--m-popover-arrow-size: 12px;
+			--m-popover-arrow-offset: calc(-1 * (var(--m-popover-arrow-size) / 2));
 
-			:host([position='absolute']) {
-				--m-popover-floating-position: absolute;
-			}
+			position: relative;
+		}
 
-			:host([position='fixed']) {
-				--m-popover-floating-position: fixed;
-			}
+		:host([position='absolute']) {
+			--m-popover-floating-position: absolute;
+		}
 
-			:host([open]) {
-				--m-popover-floating-display: inline-block;
-			}
+		:host([position='fixed']) {
+			--m-popover-floating-position: fixed;
+		}
+	`;
+}
+function popoverFloatingStyles(options) {
+    const { floatingSelector } = {
+        floatingSelector: DEFAULT_SELECTORS.floatingSelector,
+        ...options,
+    };
+    return i$9 `
+		${r$8(floatingSelector)} {
+			position: var(--m-popover-floating-position);
 
-			#arrow {
-				display: var(--m-popover-floating-display);
-				position: absolute;
-				inline-size: var(--m-popover-arrow-size);
-				block-size: var(--m-popover-arrow-size);
-				background-color: var(--m-popover-background-color);
-				transform: rotate(45deg);
+			box-shadow: var(--m-popover-elevation);
+			z-index: var(--m-popover-z-index);
+		}
+	`;
+}
+function popoverArrowStyles(options) {
+    const { arrowSelector } = {
+        arrowSelector: DEFAULT_SELECTORS.arrowSelector,
+        ...options,
+    };
+    return i$9 `
+		${r$8(arrowSelector)} {
+			position: absolute;
+			inline-size: var(--m-popover-arrow-size);
+			block-size: var(--m-popover-arrow-size);
+			background-color: inherit;
+			transform: rotate(45deg);
 
-				pointer-events: none;
-			}
-		`,
+			pointer-events: none;
+		}
+	`;
+}
+function popoverStyles(selectors = DEFAULT_SELECTORS) {
+    const { floatingSelector, arrowSelector } = {
+        ...DEFAULT_SELECTORS,
+        ...selectors,
+    };
+    return [
+        popoverHostStyles(),
+        popoverFloatingStyles({ floatingSelector }),
+        popoverArrowStyles({ arrowSelector }),
     ];
 }
 
@@ -8606,23 +8682,160 @@ _BoundaryController_handleEvent = new WeakMap(), _BoundaryController_handleBlurE
     window.removeEventListener('blur', __classPrivateFieldGet$1(this, _BoundaryController_handleBlurEvent, "f"), true);
 };
 
-var _FocusManagerController_instances, _FocusManagerController_focusElement, _FocusManagerController_focusIndex, _FocusManagerController_focusPosition, _FocusManagerController_getIndexOfQueried, _FocusManagerController_findQueriedById, _FocusManagerController_handleKeyPress, _FocusManagerController_clearBufferAfterDelay, _FocusManagerController_findMatchInRange;
-const logger$b = createLogger('focus-manager-controller');
-function isDisabled(element) {
-    return (element != null &&
-        typeof element === 'object' &&
-        'disabled' in element &&
-        element.disabled === true);
+const logger$d = createLogger('expandable-controller');
+/**
+ * Simple controller for expandable elements using CSS animations
+ */
+class ExpandableController {
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.wasExpanded = false;
+        this.isInitialized = false;
+        logger$d.info(`expandable controller initialized (${this.host.id || 'no id'})`);
+        host.addController(this);
+    }
+    hostUpdated() {
+        const expandable = this.options.getExpandableElement(this.host);
+        if (!expandable)
+            return;
+        if (!this.isInitialized) {
+            this.isInitialized = true;
+            this.wasExpanded = this.options.isExpanded(this.host);
+            if (!this.wasExpanded) {
+                expandable.style.display = 'none';
+            }
+            return;
+        }
+        const isExpanded = this.options.isExpanded(this.host);
+        if (isExpanded !== this.wasExpanded) {
+            this.wasExpanded = isExpanded;
+            this.updateExpandableState(expandable, isExpanded);
+        }
+    }
+    async updateExpandableState(expandable, isExpanded) {
+        if (isExpanded) {
+            expandable.style.setProperty('overflow', 'hidden');
+            expandable.style.removeProperty('display');
+            this.host.classList.add('is-showing');
+            await waitForAnimations(expandable);
+            this.host.classList.remove('is-showing');
+            expandable.style.removeProperty('overflow');
+        }
+        else {
+            expandable.style.setProperty('overflow', 'hidden');
+            this.host.classList.add('is-hiding');
+            await waitForAnimations(expandable);
+            expandable.style.setProperty('display', 'none');
+            this.host.classList.remove('is-hiding');
+            expandable.style.removeProperty('overflow');
+        }
+    }
+    hostDisconnected() {
+        this.isInitialized = false;
+    }
+}
+
+function expandableHostStyles() {
+    return i$9 `
+		:host {
+			--expandable-animation: none;
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			:host(.is-showing) {
+				--expandable-animation: show-expandable 0.2s ease forwards;
+			}
+
+			:host(.is-hiding) {
+				--expandable-animation: hide-expandable 0.25s ease forwards;
+			}
+		}
+	`;
 }
+function expandableElementStyles(options) {
+    const { expandableSelector, animate } = {
+        expandableSelector: ':host',
+        ...options,
+    };
+    const { opacity: animateOpacity, blur: animateBlur, transform: animateTransform, height: animateHeight, } = {
+        opacity: true,
+        blur: true,
+        transform: true,
+        height: false,
+        ...animate,
+    };
+    return i$9 `
+		${r$8(expandableSelector)} {
+			overflow: hidden;
+
+			${r$8(animateHeight ? 'interpolate-size: allow-keywords;' : '')};
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			${r$8(expandableSelector)} {
+				animation: var(--expandable-animation, none);
+			}
+		}
+
+		@keyframes show-expandable {
+			from {
+				${r$8(animateOpacity ? 'opacity: 0;' : '')};
+				${r$8(animateTransform ? 'transform: translateY(-12px);' : '')};
+				${r$8(animateBlur ? 'filter: blur(4px);' : '')};
+				${r$8(animateHeight ? 'height: 0;' : '')};
+			}
+
+			to {
+				${r$8(animateOpacity ? 'opacity: 1;' : '')};
+				${r$8(animateTransform ? 'transform: translateY(0);' : '')};
+				${r$8(animateBlur ? 'filter: blur(0);' : '')};
+			}
+		}
+
+		@keyframes hide-expandable {
+			from {
+				${r$8(animateOpacity ? 'opacity: 1;' : '')};
+				${r$8(animateTransform ? 'transform: translateY(0);' : '')};
+				${r$8(animateBlur ? 'filter: blur(0);' : '')};
+			}
+
+			to {
+				${r$8(animateOpacity ? 'opacity: 0;' : '')};
+				${r$8(animateTransform ? 'transform: translateY(-12px);' : '')};
+				${r$8(animateBlur ? 'filter: blur(4px);' : '')};
+				${r$8(animateHeight ? 'height: 0;' : '')};
+			}
+		}
+	`;
+}
+function expandableStyles(options) {
+    return [expandableHostStyles(), expandableElementStyles(options)];
+}
+
 /**
  * Check if `keyboardEventKey` is a character, and more specifically, anything
  * other than a space, tab, or newline.
+ * Based on https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/combobox/examples/js/combobox-autocomplete.js
  */
 function isPrintableCharacter(keyboardEventKey) {
     const printableCharacterRegex = /\S/;
     return (keyboardEventKey.length === 1 &&
         printableCharacterRegex.test(keyboardEventKey));
 }
+
+var _FocusManagerController_instances, _FocusManagerController_focusIndex, _FocusManagerController_focusId, _FocusManagerController_focusPosition, _FocusManagerController_getIndexOfQueried, _FocusManagerController_findQueriedById, _FocusManagerController_handleKeyUp, _FocusManagerController_clearBufferAfterDelay, _FocusManagerController_findMatchInRange;
+const logger$c = createLogger('focus-manager-controller');
+const POSITIONAL_FOCUS = ['first', 'last', 'previous', 'next'];
+function isDisabled(element) {
+    return (element != null &&
+        typeof element === 'object' &&
+        'disabled' in element &&
+        element.disabled === true);
+}
+function isPositionalFocus(value) {
+    return POSITIONAL_FOCUS.includes(value);
+}
 /**
  * Manages **virtual/visual** focus, for a11y purposes.
  */
@@ -8630,50 +8843,64 @@ class FocusManagerController {
     constructor(host, options) {
         _FocusManagerController_instances.add(this);
         this.activeDescendant = null;
-        _FocusManagerController_focusElement.set(this, (element) => {
+        /**
+         * Internal method to apply focus state to an element.
+         * Base implementation sets aria-activedescendant and visual styles.
+         * Subclasses can override this to implement different focus mechanisms (e.g., roving tabindex).
+         */
+        this.focusElement = (element, options) => {
             if (!element || isDisabled(element) || !element.id) {
-                logger$b.debug('could not focus element', element, !element?.id ? ' element has no id' : '');
+                logger$c.debug('could not focus element', element, !element?.id ? ' element has no id' : '');
                 return;
             }
-            this.clear();
+            this.clear({
+                onBlur: options?.onBlur,
+            });
             this.activeDescendant = element.id;
             this.getInteractiveElement(this.host).setAttribute('aria-activedescendant', element.id);
             element.classList.add('is-focused');
-            element.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-                behavior: 'smooth',
-            });
+            // Scroll the element into view after the call stack is cleared to allow the browser to update the layout
+            setTimeout(() => {
+                element.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                    behavior: 'smooth',
+                });
+                options?.onFocus?.(element);
+            }, 150);
+        };
+        _FocusManagerController_focusIndex.set(this, (index, options) => {
+            this.focusElement(this.queried.at(index), options);
         });
-        _FocusManagerController_focusIndex.set(this, (index) => {
-            __classPrivateFieldGet$1(this, _FocusManagerController_focusElement, "f").call(this, this.queried.at(index));
+        _FocusManagerController_focusId.set(this, (id, options) => {
+            this.focusElement(__classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_findQueriedById).call(this, id), options);
         });
-        _FocusManagerController_focusPosition.set(this, (position) => {
+        _FocusManagerController_focusPosition.set(this, (position, options) => {
             const currentFocusedIndex = __classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_getIndexOfQueried).call(this, this.focused);
             switch (position) {
                 case 'first':
-                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, 0);
+                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, 0, options);
                     break;
                 case 'last':
-                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, this.queried.length - 1);
+                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, this.queried.length - 1, options);
                     break;
                 case 'previous': {
                     if (currentFocusedIndex === -1) {
-                        logger$b.debug('focus previous, could not get current focused; focusing on last queried instead');
-                        __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, currentFocusedIndex);
+                        logger$c.debug('focus previous, could not get current focused; focusing on last queried instead');
+                        __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, currentFocusedIndex, options);
                         return;
                     }
                     // it's ok to have a negative index here. `Array.prototype.at()` will handle that correctly.
                     const previousItemIndex = (currentFocusedIndex - 1) % this.queried.length;
-                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, previousItemIndex);
+                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, previousItemIndex, options);
                     break;
                 }
                 case 'next': {
                     if (currentFocusedIndex === -1) {
-                        logger$b.debug('focus next, could not get current focused. focusing on first queried instead');
+                        logger$c.debug('focus next, could not get current focused. focusing on first queried instead');
                     }
                     const nextItemIndex = (currentFocusedIndex + 1) % this.queried.length;
-                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, nextItemIndex);
+                    __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, nextItemIndex, options);
                     break;
                 }
             }
@@ -8682,7 +8909,7 @@ class FocusManagerController {
          * Moves focus to the next item with a label that starts with the typed character
          * if such item exists. Otherwise, focus does not move.
          */
-        _FocusManagerController_handleKeyPress.set(this, (event) => {
+        _FocusManagerController_handleKeyUp.set(this, (event) => {
             const { key } = event;
             if (!isPrintableCharacter(key)) {
                 return;
@@ -8740,13 +8967,13 @@ class FocusManagerController {
     }
     hostConnected() {
         if (!this.focusOnType) {
-            logger$b.debug('focus on type is disabled. Controller will not listen to keyup events');
+            logger$c.debug('focus on type is disabled. Controller will not listen to keyup events');
             return;
         }
-        this.host.addEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyPress, "f"));
+        this.host.addEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyUp, "f"));
     }
     hostDisconnected() {
-        this.host.removeEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyPress, "f"));
+        this.host.removeEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyUp, "f"));
     }
     /**
      * Get the list of elements matching the given `options.query`.
@@ -8766,53 +8993,66 @@ class FocusManagerController {
         }
         return __classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_findQueriedById).call(this, this.activeDescendant);
     }
+    get focusedIndex() {
+        if (!this.activeDescendant) {
+            return null;
+        }
+        const index = __classPrivateFieldGet$1(this, _FocusManagerController_instances, "m", _FocusManagerController_getIndexOfQueried).call(this, this.focused);
+        if (index === -1) {
+            return null;
+        }
+        return index;
+    }
     /**
      * If none of the options are selected, the first option receives focus; otherwise, the
      * focus moves to the next option.
      * If we are at the end of the `queried` array, the focus moves to the first option.
      */
-    focusNext() {
-        this.focus('next');
+    focusNext(options) {
+        this.focus('next', options);
     }
     /**
      * If none of the options are selected, the last option receives focus; otherwise, the
      * focus moves to the next option.
      * If we are at the start of the `queried` array, the focus moves to the last option.
      */
-    focusPrevious() {
-        this.focus('previous');
+    focusPrevious(options) {
+        this.focus('previous', options);
     }
     /**
      * Focus the first element in `queried`.
      */
-    focusFirst() {
-        this.focus(0);
+    focusFirst(options) {
+        this.focus(0, options);
     }
     /**
      * Focus the last element in `queried`.
      */
-    focusLast() {
-        this.focus(this.queried.length - 1);
+    focusLast(options) {
+        this.focus(this.queried.length - 1, options);
     }
     /**
      * Focus the given element or the element at the given index or position, based on `queried`.
      */
-    focus(where) {
+    focus(where, options) {
         if (typeof where === 'number') {
-            __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, where);
+            __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, where, options);
+        }
+        else if (where instanceof HTMLElement) {
+            this.focusElement(where, options);
         }
-        else if (typeof where === 'string') {
-            __classPrivateFieldGet$1(this, _FocusManagerController_focusPosition, "f").call(this, where);
+        else if (isPositionalFocus(where)) {
+            __classPrivateFieldGet$1(this, _FocusManagerController_focusPosition, "f").call(this, where, options);
         }
         else {
-            __classPrivateFieldGet$1(this, _FocusManagerController_focusElement, "f").call(this, where);
+            __classPrivateFieldGet$1(this, _FocusManagerController_focusId, "f").call(this, where, options);
         }
     }
     /**
      * Remove the visual focus (`.is-focused` class) from the currently focused element and
      * clear the `activeDescendant` attribute.
      */
-    clear() {
+    clear(options) {
         this.getInteractiveElement(this.host).removeAttribute('aria-activedescendant');
         const element = this.focused;
         this.activeDescendant = null;
@@ -8820,9 +9060,10 @@ class FocusManagerController {
             return;
         }
         element.classList.remove('is-focused');
+        options?.onBlur?.(element);
     }
 }
-_FocusManagerController_focusElement = new WeakMap(), _FocusManagerController_focusIndex = new WeakMap(), _FocusManagerController_focusPosition = new WeakMap(), _FocusManagerController_handleKeyPress = new WeakMap(), _FocusManagerController_clearBufferAfterDelay = new WeakMap(), _FocusManagerController_findMatchInRange = new WeakMap(), _FocusManagerController_instances = new WeakSet(), _FocusManagerController_getIndexOfQueried = function _FocusManagerController_getIndexOfQueried(element) {
+_FocusManagerController_focusIndex = new WeakMap(), _FocusManagerController_focusId = new WeakMap(), _FocusManagerController_focusPosition = new WeakMap(), _FocusManagerController_handleKeyUp = new WeakMap(), _FocusManagerController_clearBufferAfterDelay = new WeakMap(), _FocusManagerController_findMatchInRange = new WeakMap(), _FocusManagerController_instances = new WeakSet(), _FocusManagerController_getIndexOfQueried = function _FocusManagerController_getIndexOfQueried(element) {
     if (!element) {
         return -1;
     }
@@ -8833,6 +9074,90 @@ _FocusManagerController_focusElement = new WeakMap(), _FocusManagerController_fo
     }) ?? null);
 };
 
+var _RovingFocusController_instances, _RovingFocusController_setActiveRovingItem, _RovingFocusController_setInactiveRovingItem;
+const logger$b = createLogger('roving-focus');
+/**
+ * Manages focus for interactive elements within a composite widget using the roving tabindex pattern.
+ * Focus moves directly to the active element by managing tabindex and calling element.focus().
+ * Extends FocusManagerController to reuse common focus logic like type-ahead search.
+ */
+class RovingFocusController extends FocusManagerController {
+    constructor() {
+        super(...arguments);
+        _RovingFocusController_instances.add(this);
+        /**
+         * Initializes the tabindex for all queried elements.
+         * Ensures exactly one element has tabindex="0", others have tabindex="-1".
+         * Should be called by the host when the queried elements are known to be ready.
+         */
+        this.initialize = () => {
+            // eslint-disable-next-line prefer-destructuring
+            const queried = this.queried;
+            const currentFocused = this.focused;
+            queried.forEach((element) => {
+                if (currentFocused && element === currentFocused) {
+                    __classPrivateFieldGet$1(this, _RovingFocusController_instances, "m", _RovingFocusController_setActiveRovingItem).call(this, element);
+                }
+                else {
+                    __classPrivateFieldGet$1(this, _RovingFocusController_instances, "m", _RovingFocusController_setInactiveRovingItem).call(this, element);
+                }
+            });
+        };
+        this.focusElement = (element, options) => {
+            if (!element || isDisabled(element) || !element.id) {
+                logger$b.debug('could not focus element', element, !element?.id ? ' element has no id' : '');
+                return;
+            }
+            this.clear({
+                returnFocusToHost: false,
+                onBlur: options?.onBlur,
+            });
+            __classPrivateFieldGet$1(this, _RovingFocusController_instances, "m", _RovingFocusController_setActiveRovingItem).call(this, element);
+            setTimeout(() => {
+                element.focus();
+                element.scrollIntoView({
+                    block: 'nearest',
+                    inline: 'nearest',
+                    behavior: 'smooth',
+                });
+            }, 150);
+            options?.onFocus?.(element);
+        };
+    }
+    /**
+     * Removes focus from the currently focused element and resets tabindex.
+     * Optionally moves focus back to the host element.
+     */
+    clear(options = { returnFocusToHost: false }) {
+        const element = this.focused;
+        this.activeDescendant = null;
+        this.initialize();
+        if (element) {
+            options?.onBlur?.(element);
+        }
+        if (options.returnFocusToHost) {
+            this.host.focus();
+        }
+    }
+}
+_RovingFocusController_instances = new WeakSet(), _RovingFocusController_setActiveRovingItem = function _RovingFocusController_setActiveRovingItem(element) {
+    if (!element) {
+        return;
+    }
+    // Set tabindex and visual styles for roving focus
+    // eslint-disable-next-line no-param-reassign
+    element.tabIndex = 0;
+    element.classList.add('is-focused');
+    this.activeDescendant = element.id;
+}, _RovingFocusController_setInactiveRovingItem = function _RovingFocusController_setInactiveRovingItem(element) {
+    if (!element) {
+        return;
+    }
+    // eslint-disable-next-line no-param-reassign
+    element.tabIndex = -1;
+    element.classList.remove('is-focused');
+};
+
 var _KeyboardSupportController_instances, _KeyboardSupportController_handleKey, _KeyboardSupportController_subscribe, _KeyboardSupportController_unsubscribe;
 const logger$a = createLogger('keyboard-support-controller');
 function getShortcutKey(shortcut) {
@@ -8905,37 +9230,43 @@ _KeyboardSupportController_handleKey = new WeakMap(), _KeyboardSupportController
     target?.removeEventListener(this.event, __classPrivateFieldGet$1(this, _KeyboardSupportController_handleKey, "f"));
 };
 
-const TRIGGER_SELECTOR$1 = '[aria-haspopup="true"]';
+const TRIGGER_SELECTOR = '[aria-haspopup="true"]';
 const MENU_SELECTOR$1 = '[role="menu"]';
-const ITEM_SELECTOR = '[role="menuitem"]';
-
+const ITEM_SELECTOR$1 = '[role="menuitem"]';
 function dropdownStyles() {
     return [
-        styles$k({
-            referenceSelector: `::slotted(${TRIGGER_SELECTOR$1})`,
-            floatingSelector: `::slotted(${MENU_SELECTOR$1})`,
-        }),
+        popoverHostStyles(),
+        expandableHostStyles(),
         i$9 `
 			:host {
-				--m-popover-floating-spacing-x: ${getToken$1('spacing-2')};
-				--m-popover-floating-spacing-y: ${getToken$1('spacing-2')};
-				/* TODO: figure out a way to avoid layout shift when using narrow triggers */
-				--m-popover-width: max-content;
-				--m-popover-min-width: 16ch;
-
 				display: inline-block;
+				box-sizing: border-box;
 			}
 
-			::slotted(${r$8(MENU_SELECTOR$1)}) {
-				--m-popover-background-color: ${getColor('color-background-primary')};
-
-				outline: none;
+			:host([hidden]) {
+				display: none;
 			}
 
-			:host([open]) ::slotted(${r$8(MENU_SELECTOR$1)}) {
+			::slotted(${r$8(MENU_SELECTOR$1)}) {
+				outline: none;
 				display: inline-flex;
-
 				flex-direction: column;
+
+				padding: ${getToken$1('spacing-2')};
+				margin: 0;
+
+				box-sizing: border-box;
+				inline-size: max-content;
+				min-inline-size: 16ch;
+				max-inline-size: initial;
+
+				overflow: auto;
+
+				border: none;
+				border-radius: ${getToken$1('border-radius-m')};
+
+				background-color: ${getColor('color-background-primary')};
+				color: ${getColor('color-text-secondary')};
 			}
 		`,
     ];
@@ -8944,7 +9275,7 @@ function triggerStyles() {
     return [
         i$9 `
 			:host {
-				--m-dropdown-trigger-background-color: ${getColor('color-background-primary')};
+				--m-dropdown-trigger-background-color: inherit;
 				--m-dropdown-trigger-border-color: ${getColor('color-border-input')};
 				--m-dropdown-trigger-border-radius: ${getToken$1('border-radius-s')};
 				--m-dropdown-trigger-color: ${getColor('color-text-tertiary')};
@@ -9048,6 +9379,14 @@ function triggerStyles() {
 		`,
     ];
 }
+function menuStyles() {
+    return [
+        expandableElementStyles(),
+        popoverFloatingStyles({
+            floatingSelector: ':host',
+        }),
+    ];
+}
 function itemStyles() {
     return [
         i$9 `
@@ -9152,16 +9491,12 @@ class Dropdown extends Popover {
     constructor() {
         super();
         _Dropdown_controllers.set(this, void 0);
-        // eslint-disable-next-line class-methods-use-this
-        this.getFloatingOffset = () => {
-            return 4;
-        };
         _Dropdown_handleClick.set(this, (event) => {
             const { target } = event;
             if (!target) {
                 return;
             }
-            if (target.matches(ITEM_SELECTOR)) {
+            if (target.matches(ITEM_SELECTOR$1)) {
                 /**
                  * we set focus so we can trigger the item click event when the user
                  * presses <Enter> or <Space>, through the KeyboardSupportController.
@@ -9180,7 +9515,7 @@ class Dropdown extends Popover {
              * - https://css-tricks.com/when-a-click-is-not-just-a-click/
              * - https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
              */
-            if (target.matches(TRIGGER_SELECTOR$1) &&
+            if (target.matches(TRIGGER_SELECTOR) &&
                 event.detail > 0) {
                 this.toggle();
             }
@@ -9200,8 +9535,14 @@ class Dropdown extends Popover {
         this.disabled = false;
         __classPrivateFieldSet(this, _Dropdown_controllers, {
             boundary: new BoundaryController(this),
+            expandable: new ExpandableController(this, {
+                getExpandableElement: () => {
+                    return this.getFloatingElement();
+                },
+                isExpanded: () => Boolean(this.open),
+            }),
             focus: new FocusManagerController(this, {
-                query: ITEM_SELECTOR,
+                query: ITEM_SELECTOR$1,
                 getInteractiveElement: () => {
                     return this.getFloatingElement();
                 },
@@ -9216,7 +9557,7 @@ class Dropdown extends Popover {
                         if (!target || this.disabled) {
                             return;
                         }
-                        if (target.matches(TRIGGER_SELECTOR$1)) {
+                        if (target.matches(TRIGGER_SELECTOR)) {
                             this.expand({ position: 'last' });
                             return;
                         }
@@ -9234,7 +9575,7 @@ class Dropdown extends Popover {
                         if (!target || this.disabled) {
                             return;
                         }
-                        if (target.matches(TRIGGER_SELECTOR$1)) {
+                        if (target.matches(TRIGGER_SELECTOR)) {
                             this.expand({ position: 'first' });
                             return;
                         }
@@ -9257,7 +9598,7 @@ class Dropdown extends Popover {
                         if (!target || this.disabled) {
                             return;
                         }
-                        if (target.matches(TRIGGER_SELECTOR$1)) {
+                        if (target.matches(TRIGGER_SELECTOR)) {
                             this.toggle({ position: 'first' });
                             return;
                         }
@@ -9285,7 +9626,7 @@ class Dropdown extends Popover {
                         if (!target) {
                             return;
                         }
-                        if (target.matches(TRIGGER_SELECTOR$1) &&
+                        if (target.matches(TRIGGER_SELECTOR) &&
                             this.open) {
                             __classPrivateFieldGet$1(this, _Dropdown_handleClickOutside, "f").call(this);
                         }
@@ -9298,14 +9639,14 @@ class Dropdown extends Popover {
         this.addEventListener('focusout', __classPrivateFieldGet$1(this, _Dropdown_handleFocusOut, "f"));
         this.addEventListener('interactout', __classPrivateFieldGet$1(this, _Dropdown_handleClickOutside, "f"));
     }
-    firstUpdated() {
+    firstUpdated(changedProperties) {
         if (this.floating?.id) {
             this.reference?.setAttribute('aria-controls', this.floating.id);
         }
         if (this.reference?.id) {
             this.floating?.setAttribute('aria-labelledby', this.reference.id);
         }
-        super.firstUpdated();
+        super.firstUpdated(changedProperties);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -9322,7 +9663,7 @@ class Dropdown extends Popover {
         }
     }
     getReferenceElement() {
-        return this.querySelector(TRIGGER_SELECTOR$1);
+        return this.querySelector(TRIGGER_SELECTOR);
     }
     getFloatingElement() {
         return this.querySelector(MENU_SELECTOR$1);
@@ -9450,6 +9791,7 @@ class DropdownMenu extends WithIdElementMixin(Component) {
         return x `<slot name="menu-item"></slot>`;
     }
 }
+DropdownMenu.styles = [menuStyles()];
 DropdownMenu.define();
 
 class DropdownItem extends WithIdElementMixin(Component) {
@@ -13255,25 +13597,20 @@ _SideNavigationTrigger_handleClick = new WeakMap();
 SideNavigationTrigger.styles = [sideNavigationTriggerStyles()];
 SideNavigationTrigger.define();
 
-const TRIGGER_SELECTOR = '[role="combobox"]';
-const MENU_SELECTOR = '[role="listbox"]';
 const SEARCH_DELAY = 250;
 
+const MENU_SELECTOR = '[role="listbox"]';
+const ITEM_SELECTOR = 'm-option';
 function selectStyles() {
     return [
-        styles$k({
-            referenceSelector: TRIGGER_SELECTOR,
+        expandableStyles({
+            expandableSelector: MENU_SELECTOR,
+        }),
+        popoverStyles({
             floatingSelector: MENU_SELECTOR,
         }),
         i$9 `
 			:host {
-				--m-popover-floating-spacing-x: ${getToken$1('spacing-2')};
-				--m-popover-floating-spacing-y: ${getToken$1('spacing-2')};
-				/* TODO: figure out a way to avoid layout shift when using narrow triggers */
-				--m-popover-width: max-content;
-				--m-popover-min-width: 16ch;
-				--m-popover-color: ${getColor('color-text-secondary')};
-
 				--m-select-min-width: 10ch;
 				--m-select-max-width: 280px;
 				--m-select-max-height: 240px;
@@ -13292,17 +13629,32 @@ function selectStyles() {
 			}
 
 			${r$8(MENU_SELECTOR)} {
-				--m-popover-background-color: ${getColor('color-background-primary')};
-				--m-popover-overflow-y: auto;
+				display: inline-flex;
+				flex-direction: column;
 
-				max-block-size: var(--m-select-max-height);
-				outline: none;
-			}
+				padding-inline: ${getToken$1('spacing-2')};
+				padding-block: ${getToken$1('spacing-2')};
 
-			:host([open]) ${r$8(MENU_SELECTOR)} {
-				display: inline-flex;
+				margin: 0;
 
-				flex-direction: column;
+				box-sizing: border-box;
+				inline-size: max-content;
+				min-inline-size: auto;
+				max-inline-size: initial;
+
+				overflow-x: hidden;
+				overflow-y: auto;
+
+				border: none;
+				border-radius: ${getToken$1('border-radius-m')};
+
+				background-color: ${getColor('color-background-primary')};
+				color: ${getColor('color-text-secondary')};
+
+				contain: none;
+
+				max-block-size: var(--m-select-max-height);
+				outline: none;
 			}
 
 			/**
@@ -13501,7 +13853,7 @@ function pickerStyles() {
 			 */
 			:host([type='single']:not(:focus-within)) #clear,
 			:host([type='single']:focus-within)
-				#trigger-wrapper:has(> #trigger:placeholder-shown)
+				#trigger-wrapper:has(${r$8('> #trigger:placeholder-shown')})
 				~ #clear {
 				visibility: hidden;
 				opacity: 0;
@@ -15106,7 +15458,8 @@ class Select extends WithSelectionControlMixin(Popover) {
             },
             loading: { type: Boolean },
             name: { type: String, reflect: true },
-            placeholder: { type: String },
+            placeholder: { type: String, reflect: true },
+            label: { type: String, reflect: true },
             size: { type: String, reflect: true },
             status: { type: String, reflect: true },
             type: { type: String, reflect: true },
@@ -15161,6 +15514,7 @@ class Select extends WithSelectionControlMixin(Popover) {
             __classPrivateFieldGet$1(this, _Select_instances, "m", _Select_updatePicker).call(this);
             __classPrivateFieldGet$1(this, _Select_controllers, "f").boundary.deactivate();
             __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.clear();
+            this.trigger?.focus();
             this.emit('collapse');
         };
         /**
@@ -15186,13 +15540,23 @@ class Select extends WithSelectionControlMixin(Popover) {
                 this.expand();
             }
             this.loading = true;
-            this.filteredOptions = this.slottedOptions.filter((descendant) => {
-                const itemTextLowerCase = descendant.label.toLowerCase();
-                const matches = itemTextLowerCase.includes(normalizedSearchTerm);
-                descendant.toggleAttribute('hidden', !matches);
-                return matches;
-            });
-            this.loading = false;
+            try {
+                this.filteredOptions = this.slottedOptions.filter((descendant) => {
+                    const itemTextLowerCase = descendant.label.toLowerCase();
+                    const matches = itemTextLowerCase.includes(normalizedSearchTerm);
+                    descendant.toggleAttribute('hidden', !matches);
+                    return matches;
+                });
+            }
+            catch (error) {
+                logger$6.error('Error filtering options', error);
+            }
+            finally {
+                this.loading = false;
+                // Re-initialize focus controller after filtering changes visible options
+                await this.updateComplete;
+                __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.initialize();
+            }
             if (options.emit) {
                 this.emit('search');
             }
@@ -15249,6 +15613,10 @@ class Select extends WithSelectionControlMixin(Popover) {
                 option.toggleAttribute('hidden', false);
             }
             this.filteredOptions = this.slottedOptions;
+            // Re-initialize focus controller after clearing search restores all options
+            requestAnimationFrame(() => {
+                __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.initialize();
+            });
         });
         _Select_clearSearchDebounce.set(this, () => {
             window.clearTimeout(__classPrivateFieldGet$1(this, _Select_searchDebounce, "f"));
@@ -15305,17 +15673,15 @@ class Select extends WithSelectionControlMixin(Popover) {
                         /**
                          * we are only intested when the event happens during the selection of an option,
                          * not, for example, when the user hits enter to remove a tag.
-                         * we check for the trigger selector because that's what the target will be when the user
-                         * is selecting an option.
                          */
-                        if (!element.matches(TRIGGER_SELECTOR)) {
+                        if (!element.matches(ITEM_SELECTOR)) {
                             return;
                         }
                         const option = __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focused;
                         if (!option || option.disabled) {
                             return;
                         }
-                        __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.focus(option);
+                        // at this point, roving focus is already set to the selected option
                         this.toggleOptions(option.value);
                         if (!this.isMultiple) {
                             this.collapse();
@@ -15362,9 +15728,8 @@ class Select extends WithSelectionControlMixin(Popover) {
                 return;
             }
             const element = event.target;
-            if (element.matches('m-option') && element.value) {
+            if (element.matches(ITEM_SELECTOR) && element.value) {
                 this.toggleOptions(element.value);
-                this.trigger?.focus();
                 if (!this.isMultiple) {
                     this.collapse();
                     return;
@@ -15374,7 +15739,6 @@ class Select extends WithSelectionControlMixin(Popover) {
             }
             if (!this.open && !element.matches('m-close-button')) {
                 this.expand();
-                this.trigger?.focus();
             }
         });
         _Select_handleClickOutside.set(this, async () => {
@@ -15405,9 +15769,11 @@ class Select extends WithSelectionControlMixin(Popover) {
                 flatten: true,
             })
                 .filter((descendant) => {
-                return descendant.matches('m-option');
+                return descendant.matches(ITEM_SELECTOR);
             });
             this.slottedOptions = elements;
+            // Initialize focus controller now that options are slotted
+            __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.initialize();
         });
         _Select_handleStatusChange.set(this, (status) => {
             /**
@@ -15460,7 +15826,7 @@ class Select extends WithSelectionControlMixin(Popover) {
          * Sync the `selected` attributes for the queriable options.
          */
         _Select_updateOptions.set(this, () => {
-            for (const element of __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.queried) {
+            for (const element of this.slottedOptions) {
                 element.selected = __classPrivateFieldGet$1(this, _Select_controllers, "f").selection.has(element.value);
             }
         });
@@ -15472,22 +15838,28 @@ class Select extends WithSelectionControlMixin(Popover) {
         this.position = 'absolute';
         this.placement = 'bottom-start';
         this.size = 'default';
+        this.label = 'Select';
         __classPrivateFieldSet(this, _Select_controllers, {
             boundary: new BoundaryController(this),
-            focus: new FocusManagerController(this, {
+            expandable: new ExpandableController(this, {
+                getExpandableElement: () => {
+                    return this.renderRoot?.querySelector(MENU_SELECTOR);
+                },
+                isExpanded: () => Boolean(this.open),
+            }),
+            focus: new RovingFocusController(this, {
                 query: () => {
-                    const selectors = 'm-option:not([hidden])';
+                    const selectors = `${ITEM_SELECTOR}:not([hidden])`;
                     return Array.from(this.querySelectorAll(selectors));
                 },
                 // search on type should happen via the input, not keyboard shortcuts.
                 focusOnType: false,
                 getInteractiveElement: () => {
-                    return this.getFloatingElement();
+                    return this.trigger;
                 },
             }),
             keyboard: new KeyboardSupportController(this, __classPrivateFieldGet$1(this, _Select_getKeyboardShortcuts, "f").call(this), {
                 event: 'keydown',
-                getEventTarget: () => this.renderRoot,
             }),
             selection: new SelectionController$1(this, {
                 getSelectionType: () => this.type,
@@ -15569,11 +15941,13 @@ class Select extends WithSelectionControlMixin(Popover) {
 						type="text"
 						id="trigger"
 						role="combobox"
+						autocomplete="off"
 						aria-haspopup="true"
 						aria-controls="menu"
 						aria-autocomplete="list"
 						aria-expanded=${this.open ? 'true' : 'false'}
 						placeholder="${o$3(this.placeholder)}"
+						aria-label="${o$3(this.label)}"
 						?disabled=${this.disabled}
 						@change=${__classPrivateFieldGet$1(this, _Select_handleTriggerChange, "f")}
 						@input=${__classPrivateFieldGet$1(this, _Select_handleTriggerInput, "f")}
@@ -15648,7 +16022,7 @@ class Select extends WithSelectionControlMixin(Popover) {
     }
 }
 _Select_controllers = new WeakMap(), _Select_searchDebounce = new WeakMap(), _Select_dataSources = new WeakMap(), _Select_searchTerm = new WeakMap(), _Select_contextProvider = new WeakMap(), _Select_clearSearch = new WeakMap(), _Select_clearSearchDebounce = new WeakMap(), _Select_getKeyboardShortcuts = new WeakMap(), _Select_getOptionByValue = new WeakMap(), _Select_handleClear = new WeakMap(), _Select_handleClick = new WeakMap(), _Select_handleClickOutside = new WeakMap(), _Select_handleDisabledChange = new WeakMap(), _Select_handleHandleClick = new WeakMap(), _Select_handleSlotChange = new WeakMap(), _Select_handleStatusChange = new WeakMap(), _Select_handleTagRemove = new WeakMap(), _Select_handleTriggerChange = new WeakMap(), _Select_handleTriggerInput = new WeakMap(), _Select_handleTriggerFocusIn = new WeakMap(), _Select_handleTypeChange = new WeakMap(), _Select_handleValueChange = new WeakMap(), _Select_updateOptions = new WeakMap(), _Select_instances = new WeakSet(), _Select_initialize = function _Select_initialize(value) {
-    const firstOption = __classPrivateFieldGet$1(this, _Select_controllers, "f").focus.queried?.[0];
+    const firstOption = this.slottedOptions.find((option) => option.matches(':not([hidden])'));
     if (!firstOption) {
         logger$6.warn('No options found in the select');
         return;
@@ -17522,7 +17896,7 @@ function tableControlExpandStyles() {
 }
 function tableControlSelectStyles() {
     return [
-        styles$s(),
+        styles$r(),
         i$9 `
 			:host {
 				display: inline-flex;
@@ -20149,7 +20523,7 @@ function toggleGroupStyles() {
 }
 function toggleStyles() {
     return [
-        styles$F(),
+        styles$E(),
         i$9 `
 			:host {
 				${typography('button-md')};
@@ -20458,15 +20832,94 @@ function convertTriggerFromAttribute(value) {
 
 function styles$3() {
     return [
-        styles$k({
-            floatingSelector: ':host', // the  host itself is the floating element
+        popoverStyles({
+            floatingSelector: ':host',
         }),
         i$9 `
 			:host {
-				--m-popover-width: max-content;
-				--m-popover-min-width: 80px;
-				--m-popover-max-width: 240px;
-				--m-popover-overflow-x: visible;
+				${typography('body-md')};
+
+				--m-tooltip-min-width: 80px;
+				--m-tooltip-max-width: 240px;
+
+				padding-inline: ${getToken$1('spacing-4')};
+				padding-block: ${getToken$1('spacing-2')};
+				margin: 0;
+
+				box-sizing: border-box;
+				inline-size: max-content;
+				min-inline-size: var(--m-tooltip-min-width);
+				max-inline-size: var(--m-tooltip-max-width);
+
+				overflow-x: visible;
+				overflow-y: visible;
+
+				border: none;
+				border-radius: ${getToken$1('border-radius-m')};
+
+				background-color: ${getColor('color-background-secondary-inverted')};
+				color: ${getColor('color-text-inverted')};
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				:host {
+					${transition([
+            {
+                property: 'opacity',
+                duration: '150ms',
+                easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+            {
+                property: 'transform',
+                duration: '150ms',
+                easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+        ])};
+				}
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				:host {
+					animation: 150ms ease-in-out forwards;
+
+					will-change: transform, opacity, filter;
+				}
+
+				:host([open]) {
+					animation-name: pop-in;
+				}
+
+				:host(.is-closing) {
+					animation-name: pop-out;
+				}
+			}
+
+			@keyframes pop-in {
+				from {
+					filter: blur(8px);
+					opacity: 0;
+					transform: translateY(8px);
+				}
+
+				to {
+					filter: blur(0);
+					opacity: 1;
+					transform: translateY(0);
+				}
+			}
+
+			@keyframes pop-out {
+				from {
+					filter: blur(0);
+					opacity: 1;
+					transform: translateY(0);
+				}
+
+				to {
+					filter: blur(8px);
+					opacity: 0;
+					transform: translateY(8px);
+				}
 			}
 		`,
     ];
@@ -20562,11 +21015,14 @@ class Tooltip extends WithIdElementMixin(Popover) {
         this.reference.removeEventListener('mouseover', __classPrivateFieldGet$1(this, _Tooltip_handleMouseOver, "f"));
         this.reference.removeEventListener('mouseout', __classPrivateFieldGet$1(this, _Tooltip_handleMouseOut, "f"));
     }
-    firstUpdated() {
-        super.firstUpdated();
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
         if (this.reference) {
             this.reference.setAttribute('aria-describedby', this.id);
         }
+        if (!this.open) {
+            this.style.display = 'none';
+        }
     }
     update(changedProperties) {
         if (changedProperties.has('open')) {
@@ -20596,6 +21052,17 @@ class Tooltip extends WithIdElementMixin(Popover) {
 			${this.renderArrow()}
 		`;
     }
+    show() {
+        this.style.display = 'inline-flex';
+        super.show();
+    }
+    async hide() {
+        this.classList.add('is-closing');
+        await waitForAnimations(this);
+        this.style.display = 'none';
+        this.classList.remove('is-closing');
+        super.hide();
+    }
 }
 _Tooltip_hoverTimeout = new WeakMap(), _Tooltip_focusTimeout = new WeakMap(), _Tooltip_triggers = new WeakMap(), _Tooltip_handleFocus = new WeakMap(), _Tooltip_handleBlur = new WeakMap(), _Tooltip_handleClick = new WeakMap(), _Tooltip_handleKeyDown = new WeakMap(), _Tooltip_handleMouseOver = new WeakMap(), _Tooltip_handleMouseOut = new WeakMap(), _Tooltip_hasTrigger = new WeakMap();
 Tooltip.styles = [styles$3()];