@loadsmart/miranda-wc 3.10.0 → 3.12.0

package/dist/{index-DWzk4VZx.js → index-Bb9zknOP.js}

@@ -158,7 +158,7 @@ function isInsideElement(event, element) {
     return element.contains(event.target);
 }
 
-const logger$c = createLogger('miranda');
+const logger$d = 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$c.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$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.`);
         }
     }
     constructor() {
@@ -698,14 +698,17 @@ skeleton.styles = () => {
 		@keyframes skeleton-loading {
 			0% {
 				background-color: ${getColor('color-background-tertiary')};
+				border-color: ${getColor('color-background-tertiary')};
 				opacity: 0.3;
 			}
 			50% {
 				background-color: ${getColor('color-background-tertiary')};
+				border-color: ${getColor('color-background-tertiary')};
 				opacity: 0.6;
 			}
 			100% {
 				background-color: ${getColor('color-background-tertiary')};
+				border-color: ${getColor('color-background-tertiary')};
 			}
 		}
 	`;
@@ -1423,164 +1426,164 @@ function styles$F() {
 
 function __variableDynamicImportRuntime0__(path) {
   switch (path) {
-    case './icons/add-circle.ts': return import('./add-circle-DG36-47h-Bm28A3AT.js');
-    case './icons/alarm.ts': return import('./alarm-D3R0RR-7-CBFJzreC.js');
-    case './icons/alert-circle.ts': return import('./alert-circle-DO-k51nu-DxggtIm3.js');
-    case './icons/anchor.ts': return import('./anchor-01MxGT3G-Ceu8sKa9.js');
-    case './icons/arrow-left.ts': return import('./arrow-left-D3h-6Nnu-CaoJ0OQp.js');
-    case './icons/arrow-right.ts': return import('./arrow-right-CoZQe9Hm-BIeMa6rs.js');
-    case './icons/arrow-sort-down.ts': return import('./arrow-sort-down-Dv785jwL-Bteu6SWo.js');
-    case './icons/arrow-sort-up-down.ts': return import('./arrow-sort-up-down-PF5U-sjZ-CQZOro4L.js');
-    case './icons/arrow-sort-up.ts': return import('./arrow-sort-up-B3VnMcct-DsGdhA7q.js');
-    case './icons/asterisk.ts': return import('./asterisk-C24115OD-C0_l4B1b.js');
-    case './icons/attention.ts': return import('./attention-B3Np_Hol-DQsOV3YF.js');
-    case './icons/automatic.ts': return import('./automatic-u-oMZ_k5-Ded7xE0b.js');
-    case './icons/bank.ts': return import('./bank-HCEsjrFi-P634oxvL.js');
-    case './icons/bell-cancel.ts': return import('./bell-cancel-BNQ5ZmLn-BUcNZFvI.js');
-    case './icons/bell.ts': return import('./bell-DkNQtQvt-CA9J8qTv.js');
-    case './icons/blind-bol.ts': return import('./blind-bol-B-LirbRQ-CUvHALTJ.js');
-    case './icons/board.ts': return import('./board-D-H79ypG-1tDSRY5Y.js');
-    case './icons/bol.ts': return import('./bol-D4g-4KEx-BL_abLx2.js');
-    case './icons/bolt-off.ts': return import('./bolt-off-C0hy7jpS-DGeWpe15.js');
-    case './icons/bolt.ts': return import('./bolt-BEG2G4oC-B2aPONuu.js');
-    case './icons/box.ts': return import('./box-EjxEPoZE-v_F5PgmI.js');
-    case './icons/broadcast.ts': return import('./broadcast-BqL_4gRz-CTTAnbBw.js');
-    case './icons/burguer-menu.ts': return import('./burguer-menu-CUl15TV7-BfeKuDYm.js');
-    case './icons/calendar.ts': return import('./calendar-D05JqcKp-oZ-kZml0.js');
-    case './icons/camera.ts': return import('./camera-D_PSlfGN-MDWtr2Y9.js');
-    case './icons/canada-flag.ts': return import('./canada-flag-D758a1Lk-p8Eb0-8g.js');
-    case './icons/caret-down.ts': return import('./caret-down-CK6m-cnU-DpF4RyMw.js');
-    case './icons/caret-left.ts': return import('./caret-left-BqVATDWe-B5xsJ3ZY.js');
-    case './icons/caret-right.ts': return import('./caret-right-Cfh4y8T9-7cArWcKc.js');
-    case './icons/caret-up.ts': return import('./caret-up-BHaf2H0u-CAU62FhX.js');
-    case './icons/carrier-contract.ts': return import('./carrier-contract-BB_YXEHR-CstNa_kT.js');
-    case './icons/chat.ts': return import('./chat-DefQC71E-DI3K39mM.js');
-    case './icons/check.ts': return import('./check-B7q--RPk-BTAaLWnm.js');
-    case './icons/clip.ts': return import('./clip-BKAJZECu-DdpgwNWc.js');
-    case './icons/clock.ts': return import('./clock-BVskvrmA-oSaRxmqX.js');
-    case './icons/clown.ts': return import('./clown-BHJAONnK-CaBjDHW6.js');
-    case './icons/code.ts': return import('./code-ZlmHenOn-CseGeqme.js');
-    case './icons/comment.ts': return import('./comment-ClurI3LW-DqweU7MG.js');
-    case './icons/company.ts': return import('./company-2F_1Ojs7-HcJIyX4C.js');
-    case './icons/contract.ts': return import('./contract-Di4W-5RX-Ds4d4CXs.js');
-    case './icons/copy.ts': return import('./copy-C40sxxyL-C6GMyJGX.js');
-    case './icons/corner-down-r.ts': return import('./corner-down-r-DwNjox8J-E1Whlfvf.js');
-    case './icons/corner-down.ts': return import('./corner-down-aiifCHCZ-kIKT-SQa.js');
-    case './icons/corner-up.ts': return import('./corner-up-D72HJl81-C8wzTuMD.js');
-    case './icons/credit-card.ts': return import('./credit-card-Dh7aP2Wc-DdXzMk8N.js');
-    case './icons/delivery.ts': return import('./delivery-BWGNw201-DXPIQiTF.js');
-    case './icons/dislike.ts': return import('./dislike-BM1aSNsI-BnQeVl7X.js');
-    case './icons/document-csv.ts': return import('./document-csv-DPAdZbp1-UcST3PHi.js');
-    case './icons/document-file.ts': return import('./document-file-IubmR4MP-D6YuRro-.js');
-    case './icons/document-image.ts': return import('./document-image-B4SomWir-DZ3x8DuW.js');
-    case './icons/dollar-circle.ts': return import('./dollar-circle-mW6mW_Eu-DrhfkUbB.js');
-    case './icons/dollar.ts': return import('./dollar-fmxqd590-AVQoCSLl.js');
-    case './icons/dots-horizontal.ts': return import('./dots-horizontal-hNtVS-87-BJGN7Xxc.js');
-    case './icons/dots-vertical.ts': return import('./dots-vertical-D0dbwYCm-CRRbfdDj.js');
-    case './icons/double-caret-left.ts': return import('./double-caret-left-B3iOD7-7-Dgyix0X1.js');
-    case './icons/double-caret-right.ts': return import('./double-caret-right-4ToiUsuI-BX84G9yf.js');
-    case './icons/down.ts': return import('./down-ouuAkVow-D8RuHqQq.js');
-    case './icons/download.ts': return import('./download-TrkSIZwr-Bnjd43pA.js');
-    case './icons/dropdown.ts': return import('./dropdown-BFUS8kZn-DOPZjfMM.js');
-    case './icons/email-filled.ts': return import('./email-filled-BGz0fvDN-Bc0zuQXt.js');
-    case './icons/email.ts': return import('./email-Cc4p3npf-Bwa4IkGb.js');
-    case './icons/export.ts': return import('./export-C0_dfu6t-DSMyNipT.js');
-    case './icons/eye.ts': return import('./eye-D4axk2VX-0YuaZAmr.js');
-    case './icons/fast.ts': return import('./fast-BA6wRYse-D2l-tCrw.js');
-    case './icons/favorite.ts': return import('./favorite-Dq8xdgro-DUzefGF2.js');
-    case './icons/file.ts': return import('./file-Dv-SjjZg-BydeMk6k.js');
-    case './icons/filter.ts': return import('./filter-B6ZbXWet-CgmHtuwE.js');
-    case './icons/flag.ts': return import('./flag-DamX8fIF-BTLQOn5T.js');
-    case './icons/folder.ts': return import('./folder-xoHjUGrm-BOFyXWsI.js');
-    case './icons/funnel.ts': return import('./funnel-6oWZ4S4f-DcLOr1HR.js');
-    case './icons/gear.ts': return import('./gear-DsiTbLJ9-verD7nd_.js');
-    case './icons/graph.ts': return import('./graph-VTKEFiWm-C5NPMoI2.js');
-    case './icons/hand-tap.ts': return import('./hand-tap-CRvBr3cu-CLE9rCkL.js');
-    case './icons/hand.ts': return import('./hand-CGcYbrtk-CEQvXo9g.js');
-    case './icons/high-signal.ts': return import('./high-signal-vwuG2ISb-CYRI2jPY.js');
-    case './icons/history.ts': return import('./history-C1VS5w-W-CX5Rrn8M.js');
-    case './icons/home.ts': return import('./home-DvxGYDu3--Bntc-Qf.js');
-    case './icons/hourglass.ts': return import('./hourglass-Bhgd2Yvm-C4DB5U1-.js');
-    case './icons/import-2.ts': return import('./import-2-BUa6BWBd-DiQdGi9y.js');
-    case './icons/import.ts': return import('./import-BHDV1jI8-BTQc2BVZ.js');
-    case './icons/indeterminate.ts': return import('./indeterminate-D-HO5uwr-DC6zrEmV.js');
-    case './icons/info.ts': return import('./info-6gpzPFz3-DzyVn6Ua.js');
-    case './icons/invoice-items.ts': return import('./invoice-items-Bd4lWZRE-ClGdpxLr.js');
-    case './icons/invoice.ts': return import('./invoice-Dz3fkDFy-sm8mJ6_x.js');
-    case './icons/kanban.ts': return import('./kanban-CoIQcEgx-GWRFOdsV.js');
-    case './icons/light-bulb.ts': return import('./light-bulb-BHHuYYvf-35PeFVZe.js');
-    case './icons/like.ts': return import('./like-TmiPdB3y-BZqjlVz6.js');
-    case './icons/link.ts': return import('./link-tJrc2YI3-DgxgeutR.js');
-    case './icons/list.ts': return import('./list-o-8fzVwe-iXCqz22A.js');
-    case './icons/loadsmart-logo.ts': return import('./loadsmart-logo-LVgkO-OY-DU25l7Ab.js');
-    case './icons/log-out.ts': return import('./log-out-62ek3tMd-D7Pc0MrW.js');
-    case './icons/low-signal.ts': return import('./low-signal-BhU6MvJ7-BBQ5LPBW.js');
-    case './icons/map.ts': return import('./map-D3mPWQDw-C_Rup3oO.js');
-    case './icons/medal.ts': return import('./medal-JSPrwii0-hO4kRVLv.js');
-    case './icons/megaphone.ts': return import('./megaphone-Bhew65e_-CTIu3kR4.js');
-    case './icons/mexico-flag.ts': return import('./mexico-flag-C1c8OtNq-u2rqAFTe.js');
-    case './icons/minus.ts': return import('./minus-DOzZEKIF-BBZld6D8.js');
-    case './icons/network-signal.ts': return import('./network-signal-BdwZKSQi-BKjMkTP7.js');
-    case './icons/no-awarded.ts': return import('./no-awarded-CWTLyN5E-CK0yuHSH.js');
-    case './icons/notes-lock.ts': return import('./notes-lock-Do1iPYCI-DNoYh8Zc.js');
-    case './icons/notes.ts': return import('./notes-BoAJAtsx-CJ0cv8yW.js');
-    case './icons/order.ts': return import('./order-DxhUkc8f-9FhMispA.js');
-    case './icons/package-tracking.ts': return import('./package-tracking-BylZrzLV-9GX-AStS.js');
-    case './icons/padlock-open.ts': return import('./padlock-open-C8wNysrM-M2Z8PYBD.js');
-    case './icons/padlock.ts': return import('./padlock-9dPM6z_s-DPYwKDdJ.js');
-    case './icons/pencil.ts': return import('./pencil-BzpSkGCq-DR16gJk0.js');
-    case './icons/phone.ts': return import('./phone-Cwh20wkj-DGPI-Fxy.js');
-    case './icons/pin-filled.ts': return import('./pin-filled-SG8Pn7K--CvzyocCu.js');
-    case './icons/pin-map.ts': return import('./pin-map-CwrFR4nx-DbtHvzuq.js');
-    case './icons/pin.ts': return import('./pin-zSgUzBJz-ChyztJTm.js');
-    case './icons/plugs.ts': return import('./plugs-Cg6fJCLP-DDXLU4mC.js');
-    case './icons/plus.ts': return import('./plus-BozRZtI9-CB750-Es.js');
-    case './icons/pod.ts': return import('./pod-C6zQzc5v-DyqaGuga.js');
-    case './icons/pre-confirmed-load.ts': return import('./pre-confirmed-load-Clmr6f3Z-Dy_NwHb4.js');
-    case './icons/print.ts': return import('./print-nCSFLfAt-DAg-L-6K.js');
-    case './icons/profile.ts': return import('./profile-CfCDOHFO-CqlCOtU4.js');
-    case './icons/question-dot.ts': return import('./question-dot-SH4BtV91-Dc9KjL_A.js');
-    case './icons/receipt.ts': return import('./receipt-W3N4N7BR-HvgesRWr.js');
-    case './icons/redo.ts': return import('./redo-C_ig5IiQ-DV1eT7YJ.js');
-    case './icons/refresh.ts': return import('./refresh-BA1X5WBw-BwaF6m5v.js');
-    case './icons/reloading.ts': return import('./reloading--qP0I2Kp-z-4A8BQY.js');
-    case './icons/road.ts': return import('./road-DcwLA5Nz-D_4VU4gr.js');
-    case './icons/round-trip.ts': return import('./round-trip-v4tpsoDb-BDh2b4Qt.js');
-    case './icons/satellite.ts': return import('./satellite-CpgBwjL_-rhhHDJeZ.js');
-    case './icons/search.ts': return import('./search-BIIUWayo-GhwMiBSh.js');
-    case './icons/send.ts': return import('./send-CBDcAboE-CoWpilqq.js');
-    case './icons/share.ts': return import('./share-CqI6kG7e-DYciYJ25.js');
-    case './icons/ship.ts': return import('./ship-DjlGWJKe-BCuZcrz4.js');
-    case './icons/signal.ts': return import('./signal-CuORWWr--CNQBWLhv.js');
-    case './icons/sparkle.ts': return import('./sparkle-DpbNJZD1-CCwrc2Hx.js');
-    case './icons/star.ts': return import('./star-RutNrvr5-CjmW1gRs.js');
-    case './icons/swap.ts': return import('./swap-CZEx_RXN-DyxgId77.js');
-    case './icons/tag-chevron.ts': return import('./tag-chevron-Bjy4zyjC-DZSG9cT-.js');
-    case './icons/tag.ts': return import('./tag-B_ZrjYsk-BK4GHUi3.js');
-    case './icons/telephone.ts': return import('./telephone-CFO-9HQC-qoO-2BYy.js');
-    case './icons/terminal.ts': return import('./terminal-C-J7E16g-CbyENDNQ.js');
-    case './icons/timer.ts': return import('./timer-C3R38-AJ-CEu57DCq.js');
-    case './icons/tms-ready.ts': return import('./tms-ready-BTW3cb1y-CaBEE__p.js');
-    case './icons/train.ts': return import('./train-DdfqWct7-2t7CVcU-.js');
-    case './icons/trash.ts': return import('./trash-BzxJFQPi-C5SbvxZ6.js');
-    case './icons/trend-down.ts': return import('./trend-down-BbAx8rfH-CbLrZ2WD.js');
-    case './icons/trend-up.ts': return import('./trend-up-BCUJmXNS-BrOLkFq8.js');
-    case './icons/trophee.ts': return import('./trophee-CpFQni4M-CRqY2EQO.js');
-    case './icons/truck.ts': return import('./truck-CBD0w2bS-jRWwMSNM.js');
-    case './icons/undo.ts': return import('./undo-CvlR35i--ZcWS2eMS.js');
-    case './icons/united-states-flag.ts': return import('./united-states-flag-DQoSmeaD-CP5pgq1J.js');
-    case './icons/up.ts': return import('./up-D38a4YKJ-BNIBtUBH.js');
-    case './icons/upgrade.ts': return import('./upgrade-D9Tu6PyV-BtpGvHmk.js');
-    case './icons/upload.ts': return import('./upload-UOSrjt-x-DejpoSSd.js');
-    case './icons/user.ts': return import('./user-D4sehfxu-D-vVQfGn.js');
-    case './icons/wallet.ts': return import('./wallet-gglOXsti-DCI8gxIH.js');
-    case './icons/warehouse.ts': return import('./warehouse-CuDbuM9g-B7WUJ8v8.js');
-    case './icons/wifi-off.ts': return import('./wifi-off-DXEb8fT5-DiYZpgFt.js');
-    case './icons/wifi.ts': return import('./wifi-ml2eHhY5-4DtBX5m9.js');
-    case './icons/x-small.ts': return import('./x-small-JY1ZeBut-BzfvPPuq.js');
-    case './icons/x.ts': return import('./x-lR-J5r80-CCAfv_GW.js');
-    case './icons/zoom-in.ts': return import('./zoom-in-B4acf-r--XhRmx3Iu.js');
-    case './icons/zoom-out.ts': return import('./zoom-out-Cytp3iGv-DNjl0NUB.js');
+    case './icons/add-circle.ts': return import('./add-circle-DG36-47h-CHhnLVUx.js');
+    case './icons/alarm.ts': return import('./alarm-D3R0RR-7-CdK4Y6mr.js');
+    case './icons/alert-circle.ts': return import('./alert-circle-DO-k51nu-D_xQSZfb.js');
+    case './icons/anchor.ts': return import('./anchor-01MxGT3G-Bw1nW0Yf.js');
+    case './icons/arrow-left.ts': return import('./arrow-left-D3h-6Nnu-CdYuIloO.js');
+    case './icons/arrow-right.ts': return import('./arrow-right-CoZQe9Hm-CRNp_6SE.js');
+    case './icons/arrow-sort-down.ts': return import('./arrow-sort-down-Dv785jwL-Dlh6wQz2.js');
+    case './icons/arrow-sort-up-down.ts': return import('./arrow-sort-up-down-PF5U-sjZ-D1qka_AP.js');
+    case './icons/arrow-sort-up.ts': return import('./arrow-sort-up-B3VnMcct-YZaUp0Lg.js');
+    case './icons/asterisk.ts': return import('./asterisk-C24115OD-C2hlf_SE.js');
+    case './icons/attention.ts': return import('./attention-B3Np_Hol-CN_Psp5f.js');
+    case './icons/automatic.ts': return import('./automatic-u-oMZ_k5-Clmgz3IF.js');
+    case './icons/bank.ts': return import('./bank-HCEsjrFi-Bmhgih0G.js');
+    case './icons/bell-cancel.ts': return import('./bell-cancel-BNQ5ZmLn-Bxycf3Bm.js');
+    case './icons/bell.ts': return import('./bell-DkNQtQvt-CVlEDZwS.js');
+    case './icons/blind-bol.ts': return import('./blind-bol-B-LirbRQ-B5VI9-_Q.js');
+    case './icons/board.ts': return import('./board-D-H79ypG-l8QJZPri.js');
+    case './icons/bol.ts': return import('./bol-D4g-4KEx-CBC8XQjj.js');
+    case './icons/bolt-off.ts': return import('./bolt-off-C0hy7jpS-B4FGg2Ib.js');
+    case './icons/bolt.ts': return import('./bolt-BEG2G4oC-U47T4JCf.js');
+    case './icons/box.ts': return import('./box-EjxEPoZE-DcqyE4c6.js');
+    case './icons/broadcast.ts': return import('./broadcast-BqL_4gRz-DOJ6DkxJ.js');
+    case './icons/burguer-menu.ts': return import('./burguer-menu-CUl15TV7-CKnjXpZT.js');
+    case './icons/calendar.ts': return import('./calendar-D05JqcKp-C_DX8n7E.js');
+    case './icons/camera.ts': return import('./camera-D_PSlfGN-DOXVpK-7.js');
+    case './icons/canada-flag.ts': return import('./canada-flag-D758a1Lk-BEfCh2qg.js');
+    case './icons/caret-down.ts': return import('./caret-down-CK6m-cnU-DgzscrTf.js');
+    case './icons/caret-left.ts': return import('./caret-left-BqVATDWe-XCbkfHp2.js');
+    case './icons/caret-right.ts': return import('./caret-right-Cfh4y8T9-C6QBuz4W.js');
+    case './icons/caret-up.ts': return import('./caret-up-BHaf2H0u-CXPw3wxB.js');
+    case './icons/carrier-contract.ts': return import('./carrier-contract-BB_YXEHR-BEwOwF1s.js');
+    case './icons/chat.ts': return import('./chat-DefQC71E-BCWynWdX.js');
+    case './icons/check.ts': return import('./check-B7q--RPk-C25ydcGf.js');
+    case './icons/clip.ts': return import('./clip-BKAJZECu-BaZithEs.js');
+    case './icons/clock.ts': return import('./clock-BVskvrmA-CaKEky4l.js');
+    case './icons/clown.ts': return import('./clown-BHJAONnK-ClSOvZ7t.js');
+    case './icons/code.ts': return import('./code-ZlmHenOn-DHtX0D6Y.js');
+    case './icons/comment.ts': return import('./comment-ClurI3LW-BfwZqlQa.js');
+    case './icons/company.ts': return import('./company-2F_1Ojs7-C-G-Od2R.js');
+    case './icons/contract.ts': return import('./contract-Di4W-5RX-ZbDnBzJk.js');
+    case './icons/copy.ts': return import('./copy-C40sxxyL-C-8sPzFe.js');
+    case './icons/corner-down-r.ts': return import('./corner-down-r-DwNjox8J-VrpGIEL0.js');
+    case './icons/corner-down.ts': return import('./corner-down-aiifCHCZ-BSJr3dE6.js');
+    case './icons/corner-up.ts': return import('./corner-up-D72HJl81-DU8IX3X3.js');
+    case './icons/credit-card.ts': return import('./credit-card-Dh7aP2Wc-vtkPWifJ.js');
+    case './icons/delivery.ts': return import('./delivery-BWGNw201-OhNvbOnE.js');
+    case './icons/dislike.ts': return import('./dislike-BM1aSNsI-DsAl99Ek.js');
+    case './icons/document-csv.ts': return import('./document-csv-DPAdZbp1-YkuGeCEA.js');
+    case './icons/document-file.ts': return import('./document-file-IubmR4MP-BpC_QTUU.js');
+    case './icons/document-image.ts': return import('./document-image-B4SomWir-BN4OaGjZ.js');
+    case './icons/dollar-circle.ts': return import('./dollar-circle-mW6mW_Eu-BjG9TsPE.js');
+    case './icons/dollar.ts': return import('./dollar-fmxqd590-BsAGil8c.js');
+    case './icons/dots-horizontal.ts': return import('./dots-horizontal-hNtVS-87-DOrPfvxc.js');
+    case './icons/dots-vertical.ts': return import('./dots-vertical-D0dbwYCm-DfEaUzvx.js');
+    case './icons/double-caret-left.ts': return import('./double-caret-left-B3iOD7-7-C8EaHTVu.js');
+    case './icons/double-caret-right.ts': return import('./double-caret-right-4ToiUsuI-BGI7BF5d.js');
+    case './icons/down.ts': return import('./down-ouuAkVow-CvPyexpD.js');
+    case './icons/download.ts': return import('./download-TrkSIZwr-S15eeSoj.js');
+    case './icons/dropdown.ts': return import('./dropdown-BFUS8kZn-BckL6fJa.js');
+    case './icons/email-filled.ts': return import('./email-filled-BGz0fvDN-ZFOgCgEN.js');
+    case './icons/email.ts': return import('./email-Cc4p3npf-X22MbwB5.js');
+    case './icons/export.ts': return import('./export-C0_dfu6t-C629-_3Q.js');
+    case './icons/eye.ts': return import('./eye-D4axk2VX-BhZMwfms.js');
+    case './icons/fast.ts': return import('./fast-BA6wRYse-COxeqGjc.js');
+    case './icons/favorite.ts': return import('./favorite-Dq8xdgro-mScKVTbO.js');
+    case './icons/file.ts': return import('./file-Dv-SjjZg-XKjDrGQF.js');
+    case './icons/filter.ts': return import('./filter-B6ZbXWet-BH658Rt0.js');
+    case './icons/flag.ts': return import('./flag-DamX8fIF-DP5wcWFw.js');
+    case './icons/folder.ts': return import('./folder-xoHjUGrm-C1MQxcv2.js');
+    case './icons/funnel.ts': return import('./funnel-6oWZ4S4f-CXvsw2sq.js');
+    case './icons/gear.ts': return import('./gear-DsiTbLJ9-BY4pgVmk.js');
+    case './icons/graph.ts': return import('./graph-VTKEFiWm-CaPaT4MV.js');
+    case './icons/hand-tap.ts': return import('./hand-tap-CRvBr3cu-BtMM-R6S.js');
+    case './icons/hand.ts': return import('./hand-CGcYbrtk-YVr7VoNP.js');
+    case './icons/high-signal.ts': return import('./high-signal-vwuG2ISb-CEIGF8A7.js');
+    case './icons/history.ts': return import('./history-C1VS5w-W-Dqui1Vma.js');
+    case './icons/home.ts': return import('./home-DvxGYDu3-DOawHHbi.js');
+    case './icons/hourglass.ts': return import('./hourglass-Bhgd2Yvm-BtaeEu7u.js');
+    case './icons/import-2.ts': return import('./import-2-BUa6BWBd-B675uQQc.js');
+    case './icons/import.ts': return import('./import-BHDV1jI8-i0VKarIO.js');
+    case './icons/indeterminate.ts': return import('./indeterminate-D-HO5uwr-CJ8ol-Z0.js');
+    case './icons/info.ts': return import('./info-6gpzPFz3-C1i8K0Uh.js');
+    case './icons/invoice-items.ts': return import('./invoice-items-Bd4lWZRE-BM4tzAgb.js');
+    case './icons/invoice.ts': return import('./invoice-Dz3fkDFy-DHEc-YOw.js');
+    case './icons/kanban.ts': return import('./kanban-CoIQcEgx-DtMTbxVV.js');
+    case './icons/light-bulb.ts': return import('./light-bulb-BHHuYYvf-Ca3gSLp_.js');
+    case './icons/like.ts': return import('./like-TmiPdB3y-CQnyD4rL.js');
+    case './icons/link.ts': return import('./link-tJrc2YI3-BAe_b_sV.js');
+    case './icons/list.ts': return import('./list-o-8fzVwe-C3oOa-lf.js');
+    case './icons/loadsmart-logo.ts': return import('./loadsmart-logo-LVgkO-OY-Bljv9Lvx.js');
+    case './icons/log-out.ts': return import('./log-out-62ek3tMd-K2ph0f1K.js');
+    case './icons/low-signal.ts': return import('./low-signal-BhU6MvJ7-Aw5sJZgm.js');
+    case './icons/map.ts': return import('./map-D3mPWQDw-DNYTE4H_.js');
+    case './icons/medal.ts': return import('./medal-JSPrwii0-WmCxy39L.js');
+    case './icons/megaphone.ts': return import('./megaphone-Bhew65e_-DPNMKUmi.js');
+    case './icons/mexico-flag.ts': return import('./mexico-flag-C1c8OtNq-yZZIOhIc.js');
+    case './icons/minus.ts': return import('./minus-DOzZEKIF-B4TjhjdN.js');
+    case './icons/network-signal.ts': return import('./network-signal-BdwZKSQi-BXvR5FBv.js');
+    case './icons/no-awarded.ts': return import('./no-awarded-CWTLyN5E-D6GGH0VZ.js');
+    case './icons/notes-lock.ts': return import('./notes-lock-Do1iPYCI-CMalzFFl.js');
+    case './icons/notes.ts': return import('./notes-BoAJAtsx-DfPGMb3J.js');
+    case './icons/order.ts': return import('./order-DxhUkc8f-CdIAasM-.js');
+    case './icons/package-tracking.ts': return import('./package-tracking-BylZrzLV-Brdw1XIO.js');
+    case './icons/padlock-open.ts': return import('./padlock-open-C8wNysrM-Bo0Tl423.js');
+    case './icons/padlock.ts': return import('./padlock-9dPM6z_s-sNg8OksM.js');
+    case './icons/pencil.ts': return import('./pencil-BzpSkGCq-B7WQUyZh.js');
+    case './icons/phone.ts': return import('./phone-Cwh20wkj-C8coe-ib.js');
+    case './icons/pin-filled.ts': return import('./pin-filled-SG8Pn7K--D053vkQK.js');
+    case './icons/pin-map.ts': return import('./pin-map-CwrFR4nx-DB0K9FTk.js');
+    case './icons/pin.ts': return import('./pin-zSgUzBJz-lvjlQKrB.js');
+    case './icons/plugs.ts': return import('./plugs-Cg6fJCLP-BntAGPhv.js');
+    case './icons/plus.ts': return import('./plus-BozRZtI9-Bag-05JO.js');
+    case './icons/pod.ts': return import('./pod-C6zQzc5v-DR1MQvVU.js');
+    case './icons/pre-confirmed-load.ts': return import('./pre-confirmed-load-Clmr6f3Z-CoXk9SS7.js');
+    case './icons/print.ts': return import('./print-nCSFLfAt-BYN5Su7R.js');
+    case './icons/profile.ts': return import('./profile-CfCDOHFO-D6L8AMFC.js');
+    case './icons/question-dot.ts': return import('./question-dot-SH4BtV91-BctoO7lO.js');
+    case './icons/receipt.ts': return import('./receipt-W3N4N7BR-DZKoJSWt.js');
+    case './icons/redo.ts': return import('./redo-C_ig5IiQ-DQs53gU1.js');
+    case './icons/refresh.ts': return import('./refresh-BA1X5WBw-5L1IlE0R.js');
+    case './icons/reloading.ts': return import('./reloading--qP0I2Kp-BKQhwI3C.js');
+    case './icons/road.ts': return import('./road-DcwLA5Nz-CSXr78Ov.js');
+    case './icons/round-trip.ts': return import('./round-trip-v4tpsoDb-BK1fNC0k.js');
+    case './icons/satellite.ts': return import('./satellite-CpgBwjL_-CnEmD0dy.js');
+    case './icons/search.ts': return import('./search-BIIUWayo-DG9U0ym6.js');
+    case './icons/send.ts': return import('./send-CBDcAboE-k1-RAzQR.js');
+    case './icons/share.ts': return import('./share-CqI6kG7e-CzBUmr2w.js');
+    case './icons/ship.ts': return import('./ship-DjlGWJKe-B2OrPFdd.js');
+    case './icons/signal.ts': return import('./signal-CuORWWr--B4Fj3ysq.js');
+    case './icons/sparkle.ts': return import('./sparkle-DpbNJZD1-C-Gu2A_S.js');
+    case './icons/star.ts': return import('./star-RutNrvr5-BxFfFtIu.js');
+    case './icons/swap.ts': return import('./swap-CZEx_RXN-Ccfhiync.js');
+    case './icons/tag-chevron.ts': return import('./tag-chevron-Bjy4zyjC-BT5T-Qz2.js');
+    case './icons/tag.ts': return import('./tag-B_ZrjYsk-BhHe9iyt.js');
+    case './icons/telephone.ts': return import('./telephone-CFO-9HQC-f5wnFMkD.js');
+    case './icons/terminal.ts': return import('./terminal-C-J7E16g-DnjSQhtL.js');
+    case './icons/timer.ts': return import('./timer-C3R38-AJ-DN3dlZlN.js');
+    case './icons/tms-ready.ts': return import('./tms-ready-BTW3cb1y-Bl9w9LXG.js');
+    case './icons/train.ts': return import('./train-DdfqWct7-DZ2ayze9.js');
+    case './icons/trash.ts': return import('./trash-BzxJFQPi-w7ankaCM.js');
+    case './icons/trend-down.ts': return import('./trend-down-BbAx8rfH-Dv54Gc7a.js');
+    case './icons/trend-up.ts': return import('./trend-up-BCUJmXNS-DYKFOnud.js');
+    case './icons/trophee.ts': return import('./trophee-CpFQni4M-D8kOcAAC.js');
+    case './icons/truck.ts': return import('./truck-CBD0w2bS-jhcwgCr6.js');
+    case './icons/undo.ts': return import('./undo-CvlR35i--BtKeBgcN.js');
+    case './icons/united-states-flag.ts': return import('./united-states-flag-DQoSmeaD-Cq8feIOR.js');
+    case './icons/up.ts': return import('./up-D38a4YKJ-okfgOGZD.js');
+    case './icons/upgrade.ts': return import('./upgrade-D9Tu6PyV-ClCmCCEe.js');
+    case './icons/upload.ts': return import('./upload-UOSrjt-x-BVn-OvfL.js');
+    case './icons/user.ts': return import('./user-D4sehfxu-D2F7Yk6J.js');
+    case './icons/wallet.ts': return import('./wallet-gglOXsti-Awf_yQSK.js');
+    case './icons/warehouse.ts': return import('./warehouse-CuDbuM9g-ItqzbkUA.js');
+    case './icons/wifi-off.ts': return import('./wifi-off-DXEb8fT5-CiXwrqvH.js');
+    case './icons/wifi.ts': return import('./wifi-ml2eHhY5-B058fOzO.js');
+    case './icons/x-small.ts': return import('./x-small-JY1ZeBut-DC5eHawm.js');
+    case './icons/x.ts': return import('./x-lR-J5r80-CRM8zsgT.js');
+    case './icons/zoom-in.ts': return import('./zoom-in-B4acf-r--CzzvnWa_.js');
+    case './icons/zoom-out.ts': return import('./zoom-out-Cytp3iGv-CPERu3AO.js');
     default: return new Promise(function(resolve, reject) {
       (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
         reject.bind(null, new Error("Unknown variable dynamic import: " + path))
@@ -2982,7 +2985,7 @@ function styles$z() {
     return i$9 `
 		:host {
 			${typography('body-md')};
-			color: ${getColor('color-text-secondary')};
+			color: ${getColor('color-text-primary')};
 		}
 	`;
 }
@@ -3029,7 +3032,7 @@ function styles$y() {
 		:host {
 			${typography('body-md-bold')};
 			line-height: normal;
-			color: ${getColor('color-text-secondary')};
+			color: ${getColor('color-text-primary')};
 		}
 
 		::slotted(*) {
@@ -3107,6 +3110,39 @@ function styles$x() {
 			--m-banner-icon-color: ${getColor('color-danger-60')};
 		}
 
+		.banner.-marketing {
+			--m-banner-background-color: transparent;
+			--m-banner-icon-color: ${getColor('color-primary-60')};
+			background-image: repeating-linear-gradient(
+				10deg,
+				rgba(0, 215, 215, 0.15) 0%,
+				rgba(0, 215, 215, 0.15) 20%,
+				rgba(132, 241, 30, 0.15) 40%,
+				rgba(0, 215, 215, 0.15) 60%,
+				rgba(132, 241, 30, 0.15) 80%,
+				rgba(0, 215, 215, 0.15) 100%
+			);
+			background-size: 200% 100%;
+			background-position: 100% 0;
+			border: none;
+			border-radius: ${getToken$1('border-radius-m')};
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
+			.banner.-marketing {
+				animation: banner-glow-scroll 5s linear infinite;
+			}
+
+			@keyframes banner-glow-scroll {
+				0% {
+					background-position: 100% 0;
+				}
+				100% {
+					background-position: 0 0;
+				}
+			}
+		}
+
 		.banner.-with-description {
 			flex-direction: column;
 		}
@@ -3185,17 +3221,14 @@ function styles$w() {
 
 		:host([size='small']) {
 			--button-size: ${toRem('12px')};
-			--icon-size: ${toRem('8px')};
 		}
 
 		:host([size='default']) {
 			--button-size: ${toRem('16px')};
-			--icon-size: ${toRem('12px')};
 		}
 
 		:host([size='large']) {
 			--button-size: ${toRem('20px')};
-			--icon-size: ${toRem('16px')};
 		}
 
 		button {
@@ -3227,7 +3260,7 @@ function styles$w() {
 		}
 
 		m-icon {
-			--m-icon-size: var(--icon-size);
+			--m-icon-size: 0.75em;
 		}
 
 		:host(:not([disabled]):focus) {
@@ -3600,6 +3633,9 @@ function getIcon(variant) {
         case 'danger': {
             return 'attention';
         }
+        case 'marketing': {
+            return 'star';
+        }
         case 'neutral':
         default: {
             return 'alert-circle';
@@ -3614,6 +3650,7 @@ function getPrimaryActionVariant(variant) {
         case 'danger': {
             return 'danger';
         }
+        case 'marketing':
         case 'success':
         case 'neutral':
         default: {
@@ -3679,6 +3716,7 @@ class Banner extends Component {
             '-success': this.variant === 'success',
             '-warning': this.variant === 'warning',
             '-danger': this.variant === 'danger',
+            '-marketing': this.variant === 'marketing',
             '-with-description': hasDescription,
         })}
 			>
@@ -5066,17 +5104,14 @@ function styles$s() {
 
 		:host([size='small']) {
 			--button-size: ${toRem('12px')};
-			--icon-size: ${toRem('8px')};
 		}
 
 		:host([size='default']) {
 			--button-size: ${toRem('16px')};
-			--icon-size: ${toRem('12px')};
 		}
 
 		:host([size='large']) {
 			--button-size: ${toRem('20px')};
-			--icon-size: ${toRem('16px')};
 		}
 
 		button {
@@ -5108,7 +5143,7 @@ function styles$s() {
 		}
 
 		m-icon {
-			--m-icon-size: var(--icon-size);
+			--m-icon-size: 0.75em;
 		}
 
 		:host(:not([disabled]):focus) {
@@ -8130,7 +8165,7 @@ const POPOVER_PLACEMENT_VALUES = [
     'bottom-start',
     'bottom-end',
 ];
-const logger$b = createLogger('popover');
+const logger$c = createLogger('popover');
 class Popover extends Component {
     static get properties() {
         return {
@@ -8153,7 +8188,7 @@ class Popover extends Component {
         };
         this.reposition = async (reason) => {
             if (this.floating == null || this.reference == null) {
-                logger$b.warn('[popover]', 'both floating and reference elements should be available', { reference: this.reference, floating: this.floating });
+                logger$c.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, {
@@ -8491,7 +8526,7 @@ _BoundaryController_handleEvent = new WeakMap(), _BoundaryController_handleBlurE
 };
 
 var _FocusManagerController_instances, _FocusManagerController_focusElement, _FocusManagerController_focusIndex, _FocusManagerController_focusPosition, _FocusManagerController_getIndexOfQueried, _FocusManagerController_findQueriedById, _FocusManagerController_handleKeyPress, _FocusManagerController_clearBufferAfterDelay, _FocusManagerController_findMatchInRange;
-const logger$a = createLogger('focus-manager-controller');
+const logger$b = createLogger('focus-manager-controller');
 function isDisabled(element) {
     return (element != null &&
         typeof element === 'object' &&
@@ -8516,7 +8551,7 @@ class FocusManagerController {
         this.activeDescendant = null;
         _FocusManagerController_focusElement.set(this, (element) => {
             if (!element || isDisabled(element) || !element.id) {
-                logger$a.debug('could not focus element', element, !element?.id ? ' element has no id' : '');
+                logger$b.debug('could not focus element', element, !element?.id ? ' element has no id' : '');
                 return;
             }
             this.clear();
@@ -8543,7 +8578,7 @@ class FocusManagerController {
                     break;
                 case 'previous': {
                     if (currentFocusedIndex === -1) {
-                        logger$a.debug('focus previous, could not get current focused; focusing on last queried instead');
+                        logger$b.debug('focus previous, could not get current focused; focusing on last queried instead');
                         __classPrivateFieldGet$1(this, _FocusManagerController_focusIndex, "f").call(this, currentFocusedIndex);
                         return;
                     }
@@ -8554,7 +8589,7 @@ class FocusManagerController {
                 }
                 case 'next': {
                     if (currentFocusedIndex === -1) {
-                        logger$a.debug('focus next, could not get current focused. focusing on first queried instead');
+                        logger$b.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);
@@ -8624,7 +8659,7 @@ class FocusManagerController {
     }
     hostConnected() {
         if (!this.focusOnType) {
-            logger$a.debug('focus on type is disabled. Controller will not listen to keyup events');
+            logger$b.debug('focus on type is disabled. Controller will not listen to keyup events');
             return;
         }
         this.host.addEventListener('keyup', __classPrivateFieldGet$1(this, _FocusManagerController_handleKeyPress, "f"));
@@ -8718,7 +8753,7 @@ _FocusManagerController_focusElement = new WeakMap(), _FocusManagerController_fo
 };
 
 var _KeyboardSupportController_handleKey;
-const logger$9 = createLogger('keyboard-support-controller');
+const logger$a = createLogger('keyboard-support-controller');
 function getShortcutKey(shortcut) {
     const keys = [
         shortcut.alt ? 'alt' : '',
@@ -8748,7 +8783,7 @@ class KeyboardSupportController {
                 handler(event);
                 return;
             }
-            logger$9.debug('no handler for shortcut', shortcut);
+            logger$a.debug('no handler for shortcut', shortcut);
         });
         this.keymap = new Map(toArray(keymap).reduce((map, { shortcut, handler }) => {
             return map.concat(toArray(shortcut).map((s) => {
@@ -10339,7 +10374,7 @@ function createSelectionStrategy(props) {
     return MultipleSelectionStrategy();
 }
 
-const logger$8 = createLogger('selection-controller');
+const logger$9 = createLogger('selection-controller');
 function isValidSingleStrictValue(values) {
     const array = toArray(values);
     return array.length > 0 && array.every((value) => value.trim().length > 0);
@@ -10353,17 +10388,17 @@ let SelectionController$1 = class SelectionController {
         this.init = (values) => {
             const type = this.getSelectionType(this.host);
             if (this.strategy == null) {
-                logger$8.debug(`creating strategy "${type ?? 'multiple (default fallback)'}" with value`, values);
+                logger$9.debug(`creating strategy "${type ?? 'multiple (default fallback)'}" with value`, values);
                 this.strategy = createSelectionStrategy({
                     type: type ?? 'multiple',
                 });
             }
             if (this.strategy.type === 'single-strict' &&
                 !isValidSingleStrictValue(values)) {
-                logger$8.warn('You cannot clear a single-strict selection (received', values, ')');
+                logger$9.warn('You cannot clear a single-strict selection (received', values, ')');
             }
             else {
-                logger$8.debug(`initializing strategy "${this.strategy.type}" with value`, values);
+                logger$9.debug(`initializing strategy "${this.strategy.type}" with value`, values);
                 this.selection = this.strategy.init(values);
             }
             return Array.from(this.selection);
@@ -10373,11 +10408,11 @@ let SelectionController$1 = class SelectionController {
          */
         this.select = (values) => {
             if (this.strategy != null) {
-                logger$8.debug('selecting values', toArray(values), ` in strategy "${this.strategy.type}"`);
+                logger$9.debug('selecting values', toArray(values), ` in strategy "${this.strategy.type}"`);
                 this.selection = this.strategy.select(toArray(values), this.selection);
             }
             else {
-                logger$8.warn('Strategy has not been initialized');
+                logger$9.warn('Strategy has not been initialized');
             }
             return Array.from(this.selection);
         };
@@ -10386,11 +10421,11 @@ let SelectionController$1 = class SelectionController {
          */
         this.unselect = (values) => {
             if (this.strategy != null) {
-                logger$8.debug('unselecting values', toArray(values), ` in strategy "${this.strategy.type}"`);
+                logger$9.debug('unselecting values', toArray(values), ` in strategy "${this.strategy.type}"`);
                 this.selection = this.strategy.unselect(toArray(values), this.selection);
             }
             else {
-                logger$8.warn('Strategy has not been initialized');
+                logger$9.warn('Strategy has not been initialized');
             }
             return Array.from(this.selection);
         };
@@ -10399,11 +10434,11 @@ let SelectionController$1 = class SelectionController {
          */
         this.toggle = (values) => {
             if (this.strategy != null) {
-                logger$8.debug('toggling values', toArray(values), ` in strategy "${this.strategy.type}"`);
+                logger$9.debug('toggling values', toArray(values), ` in strategy "${this.strategy.type}"`);
                 this.selection = this.strategy.toggle(toArray(values), this.selection);
             }
             else {
-                logger$8.warn('Strategy has not been initialized');
+                logger$9.warn('Strategy has not been initialized');
             }
             return Array.from(this.selection);
         };
@@ -10415,7 +10450,7 @@ let SelectionController$1 = class SelectionController {
                 this.selection = this.strategy.init([]);
             }
             else {
-                logger$8.warn('Strategy has not been initialized');
+                logger$9.warn('Strategy has not been initialized');
             }
             return Array.from(this.selection);
         };
@@ -11730,7 +11765,7 @@ Radio.define();
 
 var _RadioGroup_instances, _RadioGroup_controllers, _RadioGroup_contextProvider, _RadioGroup_initialize, _RadioGroup_handleDisabledChange, _RadioGroup_handleValueChange, _RadioGroup_handleFocusIn, _RadioGroup_handleFocusOut, _RadioGroup_handleOptionClick, _RadioGroup_reflectValue, _RadioGroup_toggleValue, _RadioGroup_updateRadios;
 attachContextRoot();
-const logger$7 = createLogger('radio-group');
+const logger$8 = createLogger('radio-group');
 class RadioGroup extends WithSelectionControlMixin(Component) {
     static get properties() {
         return {
@@ -11904,7 +11939,7 @@ _RadioGroup_controllers = new WeakMap(), _RadioGroup_contextProvider = new WeakM
     // TODO: should we check if it's not hidden or disabled?
     const firstRadio = __classPrivateFieldGet$1(this, _RadioGroup_controllers, "f").focus.queried?.[0];
     if (!firstRadio) {
-        logger$7.warn('No radio found in the group');
+        logger$8.warn('No radio found in the group');
         return;
     }
     const consolidatedValue = toArray(value ?? this.initialValue ?? firstRadio.value).filter(Boolean);
@@ -13089,31 +13124,57 @@ function optionStyles() {
 
 const selectContext = n$4(Symbol('select'));
 
-function baseTagStyles() {
+function tagStyles() {
     return [
         skeleton.styles(),
         i$9 `
 			:host {
 				--m-tag-skeleton-width: 100px;
-				display: inline-block;
-			}
 
-			.tag {
 				--m-tag-padding-block: ${getToken$1('spacing-2')};
 				--m-tag-padding-inline: ${getToken$1('spacing-3')};
+				--m-tag-size: ${getToken$1('global-height-small')};
+
+				--m-tag-color: ${getColor('color-text-tertiary')};
+				--m-tag-background-color: ${getColor('color-background-tertiary')};
+				--m-tag-border-color: ${getColor('color-background-tertiary')};
+				--m-tag-button-base-color: var(--m-tag-color);
+
+				--m-tag-outline-color: transparent;
+				--m-tag-outline-offset: 2px;
+
+				display: inline-block;
+				outline: 1px solid transparent;
 
 				box-sizing: border-box;
-				max-width: 200px;
-				border-radius: 100px;
-				line-height: ${getToken$1('line-height-1')};
-				cursor: default;
+				block-size: var(--m-tag-size);
+			}
 
-				display: flex;
+			.tag {
+				contain: layout style;
+
+				display: inline-flex;
 				align-items: center;
+				justify-content: center;
 				gap: ${getToken$1('spacing-1')};
 
+				box-sizing: border-box;
+				block-size: var(--m-tag-size);
+				min-inline-size: var(--m-tag-size);
+				max-inline-size: 200px;
+				border-radius: calc(var(--m-tag-size) / 2);
+				line-height: ${getToken$1('line-height-1')};
+				cursor: default;
+
 				padding-block: 0;
 				padding-inline: var(--m-tag-padding-inline);
+
+				color: var(--m-tag-color);
+				background-color: var(--m-tag-background-color);
+				border: 1px solid var(--m-tag-border-color);
+
+				outline: 1px solid var(--m-tag-outline-color);
+				outline-offset: var(--m-tag-outline-offset);
 			}
 
 			.tag-content {
@@ -13129,7 +13190,12 @@ function baseTagStyles() {
 
 			@media (prefers-reduced-motion: no-preference) {
 				.tag {
-					${transition([{ property: 'background-color' }])};
+					${transition([
+            { property: 'background-color' },
+            { property: 'color' },
+            { property: 'border-color' },
+            { property: 'outline-color' },
+        ])};
 				}
 
 				.tag-content,
@@ -13138,77 +13204,347 @@ function baseTagStyles() {
 				}
 			}
 
-			.-size-small {
+			:host([size='small']) {
 				--m-tag-padding-block: ${getToken$1('spacing-1')};
 				--m-tag-padding-inline: ${getToken$1('spacing-2')};
+				--m-tag-size: ${toRem('18px')};
+			}
 
+			:host([size='small']) .tag {
 				${typography('chips-sm')};
-				block-size: ${toRem('18px')};
 			}
 
-			.-size-default {
+			:host([size='default']) {
 				--m-tag-padding-block: ${getToken$1('spacing-2')};
 				--m-tag-padding-inline: ${getToken$1('spacing-3')};
+				--m-tag-size: ${getToken$1('global-height-small')};
+			}
 
+			:host([size='default']) .tag {
 				${typography('chips-md')};
-				block-size: ${getToken$1('global-height-small')};
 			}
 
-			.-size-large {
+			:host([size='large']) {
 				--m-tag-padding-block: ${getToken$1('spacing-3')};
 				--m-tag-padding-inline: ${getToken$1('spacing-4')};
+				--m-tag-size: ${getToken$1('global-height-default')};
+			}
 
+			:host([size='large']) .tag {
 				${typography('button-lg')};
-				block-size: ${getToken$1('global-height-default')};
 			}
 
-			.-is-skeleton {
+			:host([is-skeleton]) .tag,
+			:host([isSkeleton]) .tag {
 				${skeleton()};
 				width: var(--m-tag-skeleton-width);
 			}
 		`,
-    ];
-}
+        i$9 `
+			:host([variant='default']),
+			:host([variant='neutral']) {
+				--m-tag-color: ${getColor('color-text-tertiary')};
+				--m-tag-background-color: ${getColor('color-background-tertiary')};
+				--m-tag-border-color: ${getColor('color-background-tertiary')};
+			}
 
-function tagStyles() {
-    return [
-        skeleton.styles(),
-        baseTagStyles(),
+			:host([variant='accent']),
+			:host([variant='info']) {
+				--m-tag-color: ${getColor('color-text-highlight')};
+				--m-tag-background-color: ${getColor('color-accent-20')};
+				--m-tag-border-color: ${getColor('color-accent-20')};
+			}
+
+			:host([variant='danger']) {
+				--m-tag-color: ${getColor('color-danger-60')};
+				--m-tag-background-color: ${getColor('color-danger-20')};
+				--m-tag-border-color: ${getColor('color-danger-20')};
+			}
+
+			:host([variant='subtle']) {
+				--m-tag-color: ${getColor('color-neutral-60')};
+				--m-tag-background-color: ${getColor('color-background-primary')};
+				--m-tag-border-color: ${getColor('color-border')};
+			}
+
+			:host([variant='success']) {
+				--m-tag-color: ${getColor('color-success-60')};
+				--m-tag-background-color: ${getColor('color-success-20')};
+				--m-tag-border-color: ${getColor('color-success-20')};
+			}
+
+			:host([variant='warning']) {
+				--m-tag-color: ${getColor('color-warning-100')};
+				--m-tag-background-color: ${getColor('color-warning-20')};
+				--m-tag-border-color: ${getColor('color-warning-20')};
+			}
+		`,
         i$9 `
-			.-success {
-				color: ${getColor('color-success-60')};
-				background: ${getColor('color-success-20')};
+			:host([interactive]:not([disabled])) .tag,
+			:host([selectable]:not([disabled])) .tag {
+				cursor: pointer;
 			}
 
-			.-neutral {
-				color: ${getColor('color-text-tertiary')};
-				background: ${getColor('color-background-tertiary')};
+			:host([variant='default'][interactive]:not([disabled]):hover),
+			:host([variant='neutral'][interactive]:not([disabled]):hover),
+			:host([variant='default'][selectable]:not([disabled]):hover),
+			:host([variant='neutral'][selectable]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-text-primary')};
+				--m-tag-background-color: ${getColor('color-background-tertiary')};
+				--m-tag-border-color: ${getColor('color-background-tertiary')};
 			}
 
-			.-warning {
-				color: ${getColor('color-warning-100')};
-				background: ${getColor('color-warning-20')};
+			:host([variant='accent'][interactive]:not([disabled]):hover),
+			:host([variant='info'][interactive]:not([disabled]):hover),
+			:host([variant='accent'][selectable]:not([disabled]):hover),
+			:host([variant='info'][selectable]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-accent-100')};
+				--m-tag-background-color: ${getColor('color-accent-20')};
+				--m-tag-border-color: ${getColor('color-accent-20')};
 			}
 
-			.-danger {
-				color: ${getColor('color-danger-60')};
-				background: ${getColor('color-danger-20')};
+			:host([variant='danger'][interactive]:not([disabled]):hover),
+			:host([variant='danger'][selectable]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-danger-100')};
+				--m-tag-background-color: ${getColor('color-danger-20')};
+				--m-tag-border-color: ${getColor('color-danger-20')};
 			}
 
-			.-info {
-				color: ${getColor('color-text-highlight')};
-				background: ${getColor('color-accent-20')};
+			:host([variant='subtle'][interactive]:not([disabled]):hover),
+			:host([variant='subtle'][selectable]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-neutral-80')};
+				--m-tag-background-color: ${getColor('color-background-primary')};
+				--m-tag-border-color: ${getColor('color-border')};
+			}
+
+			:host([variant='success'][interactive]:not([disabled]):hover),
+			:host([variant='success'][selectable]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-success-100')};
+				--m-tag-background-color: ${getColor('color-success-20')};
+				--m-tag-border-color: ${getColor('color-success-20')};
+			}
+
+			:host([variant='warning'][interactive]:not([disabled]):hover),
+			:host([variant='warning'][selectable]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-warning-100')};
+				--m-tag-background-color: ${getColor('color-warning-20')};
+				--m-tag-border-color: ${getColor('color-warning-20')};
+			}
+
+			:host([variant='default'][interactive]:not([disabled]):focus-within),
+			:host([variant='neutral'][interactive]:not([disabled]):focus-within),
+			:host([variant='default'][selectable]:not([disabled]):focus-within),
+			:host([variant='neutral'][selectable]:not([disabled]):focus-within) {
+				--m-tag-outline-color: ${getColor('color-neutral-60')};
+			}
+
+			:host([variant='accent'][interactive]:not([disabled]):focus-within),
+			:host([variant='info'][interactive]:not([disabled]):focus-within),
+			:host([variant='accent'][selectable]:not([disabled]):focus-within),
+			:host([variant='info'][selectable]:not([disabled]):focus-within) {
+				--m-tag-outline-color: ${getColor('color-accent-60')};
+			}
+
+			:host([variant='danger'][interactive]:not([disabled]):focus-within),
+			:host([variant='danger'][selectable]:not([disabled]):focus-within) {
+				--m-tag-outline-color: ${getColor('color-danger-60')};
+			}
+
+			:host([variant='subtle'][interactive]:not([disabled]):focus-within),
+			:host([variant='subtle'][selectable]:not([disabled]):focus-within) {
+				--m-tag-outline-color: ${getColor('color-neutral-60')};
+			}
+
+			:host([variant='success'][interactive]:not([disabled]):focus-within),
+			:host([variant='success'][selectable]:not([disabled]):focus-within) {
+				--m-tag-outline-color: ${getColor('color-success-60')};
+			}
+
+			:host([variant='warning'][interactive]:not([disabled]):focus-within),
+			:host([variant='warning'][selectable]:not([disabled]):focus-within) {
+				--m-tag-outline-color: ${getColor('color-warning-100')};
+			}
+
+			:host([variant='default'][selectable][selected]),
+			:host([variant='neutral'][selectable][selected]) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-primary-60')};
+				--m-tag-border-color: ${getColor('color-primary-60')};
+
+				--m-tag-button-base-color: ${getColor('color-primary-60')};
+			}
+
+			:host([variant='default'][selectable][selected]:not([disabled]):hover),
+			:host([variant='neutral'][selectable][selected]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-primary-100')};
+				--m-tag-border-color: ${getColor('color-primary-100')};
+
+				--m-tag-button-base-color: ${getColor('color-primary-100')};
+			}
+
+			:host([variant='accent'][selectable][selected]),
+			:host([variant='info'][selectable][selected]) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-accent-60')};
+				--m-tag-border-color: ${getColor('color-accent-60')};
+
+				--m-tag-button-base-color: ${getColor('color-accent-60')};
+			}
+
+			:host([variant='accent'][selectable][selected]:not([disabled]):hover),
+			:host([variant='info'][selectable][selected]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-accent-100')};
+				--m-tag-border-color: ${getColor('color-accent-100')};
+
+				--m-tag-button-base-color: ${getColor('color-accent-100')};
+			}
+
+			:host([variant='danger'][selectable][selected]) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-danger-60')};
+				--m-tag-border-color: ${getColor('color-danger-60')};
+
+				--m-tag-button-base-color: ${getColor('color-danger-60')};
+			}
+
+			:host([variant='danger'][selectable][selected]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-danger-100')};
+				--m-tag-border-color: ${getColor('color-danger-100')};
+
+				--m-tag-button-base-color: ${getColor('color-danger-100')};
+			}
+
+			:host([variant='subtle'][selectable][selected]) {
+				--m-tag-color: ${getColor('color-neutral-60')};
+				--m-tag-background-color: ${getColor('color-background-tertiary')};
+				--m-tag-border-color: ${getColor('color-border-input')};
+			}
+
+			:host([variant='subtle'][selectable][selected]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-neutral-60')};
+				--m-tag-background-color: ${getColor('color-background-tertiary')};
+				--m-tag-border-color: ${getColor('color-neutral-60')};
+			}
+
+			:host([variant='success'][selectable][selected]) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-success-60')};
+				--m-tag-border-color: ${getColor('color-success-60')};
+
+				--m-tag-button-base-color: ${getColor('color-success-60')};
+			}
+
+			:host([variant='success'][selectable][selected]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-success-100')};
+				--m-tag-border-color: ${getColor('color-success-100')};
+
+				--m-tag-button-base-color: ${getColor('color-success-100')};
+			}
+
+			:host([variant='warning'][selectable][selected]) {
+				--m-tag-color: ${getColor('color-text-primary')};
+				--m-tag-background-color: ${getColor('color-warning-60')};
+				--m-tag-border-color: ${getColor('color-warning-60')};
+
+				--m-tag-button-base-color: ${getColor('color-text-primary')};
+			}
+
+			:host([variant='warning'][selectable][selected]:not([disabled]):hover) {
+				--m-tag-color: ${getColor('color-text-inverted')};
+				--m-tag-background-color: ${getColor('color-warning-100')};
+				--m-tag-border-color: ${getColor('color-warning-100')};
+
+				--m-tag-button-base-color: ${getColor('color-warning-100')};
+			}
+
+			:host([disabled]) {
+				cursor: default;
+			}
+
+			:host([disabled]) *,
+			:host([disabled]) ::slotted(*) {
+				pointer-events: none;
+			}
+
+			:host([variant='default'][disabled]),
+			:host([variant='neutral'][disabled]) {
+				--m-tag-color: ${getColor('color-text-disabled')};
+				--m-tag-background-color: ${getColor('color-background-tertiary')};
+				--m-tag-border-color: ${getColor('color-background-tertiary')};
+			}
+
+			:host([variant='accent'][disabled]),
+			:host([variant='info'][disabled]) {
+				--m-tag-color: ${getColor('color-text-disabled')};
+				--m-tag-background-color: ${getColor('color-accent-20')};
+				--m-tag-border-color: ${getColor('color-accent-20')};
+			}
+
+			:host([variant='danger'][disabled]) {
+				--m-tag-color: ${getColor('color-text-disabled')};
+				--m-tag-background-color: ${getColor('color-danger-20')};
+				--m-tag-border-color: ${getColor('color-danger-20')};
+			}
+
+			:host([variant='subtle'][disabled]) {
+				--m-tag-color: ${getColor('color-text-disabled')};
+				--m-tag-background-color: ${getColor('color-background-primary')};
+				--m-tag-border-color: ${getColor('color-border')};
+			}
+
+			:host([variant='success'][disabled]) {
+				--m-tag-color: ${getColor('color-text-disabled')};
+				--m-tag-background-color: ${getColor('color-success-20')};
+				--m-tag-border-color: ${getColor('color-success-20')};
+			}
+
+			:host([variant='warning'][disabled]) {
+				--m-tag-color: ${getColor('color-text-disabled')};
+				--m-tag-background-color: ${getColor('color-warning-20')};
+				--m-tag-border-color: ${getColor('color-warning-20')};
+			}
+
+			slot[name='trailing']::slotted(m-caret-button) {
+				--m-caret-button-base-color: var(--m-tag-button-base-color);
+			}
+
+			slot[name='trailing']::slotted(m-close-button),
+			slot[name='trailing']::slotted(m-tag-remove) {
+				--m-close-button-base-color: var(--m-tag-button-base-color);
 			}
 		`,
     ];
 }
+const tagExpandStyles = () => {
+    return [
+        i$9 `
+			:host {
+				--m-icon-size: 0.75em;
+			}
+
+			:host([rotated]) {
+				transform: rotate(180deg);
+			}
+		`,
+    ];
+};
 
+var _Tag_instances, _Tag_isInteractive, _Tag_isSelectable, _Tag_isSelected, _Tag_isDisabled, _Tag_toggle, _Tag_handleClick, _Tag_updateSlottedButtonInvertedState;
+const logger$7 = createLogger('Tag');
 class Tag extends Component {
     static get properties() {
         return {
-            variant: { type: String },
-            size: { type: String },
-            isSkeleton: { type: Boolean, attribute: 'is-skeleton' },
+            disabled: { type: Boolean, reflect: true },
+            interactive: { type: Boolean, reflect: true },
+            isSkeleton: { type: Boolean, attribute: 'is-skeleton', reflect: true },
+            selectable: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+            size: { type: String, reflect: true },
+            variant: { type: String, reflect: true },
         };
     }
     static define() {
@@ -13216,39 +13552,156 @@ class Tag extends Component {
     }
     constructor() {
         super();
+        _Tag_instances.add(this);
+        _Tag_isInteractive.set(this, () => Boolean(this.interactive));
+        _Tag_isSelectable.set(this, () => Boolean(this.selectable));
+        _Tag_isSelected.set(this, () => Boolean(this.selected));
+        _Tag_isDisabled.set(this, () => Boolean(this.disabled));
+        _Tag_handleClick.set(this, (event) => {
+            const actionButton = this.querySelector('m-close-button, m-caret-button, m-tag-remove');
+            const isActionButtonClicked = actionButton && event.composedPath().includes(actionButton);
+            if (this.disabled ||
+                isActionButtonClicked ||
+                (!__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) && !__classPrivateFieldGet$1(this, _Tag_isInteractive, "f").call(this))) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            if (__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this)) {
+                __classPrivateFieldGet$1(this, _Tag_instances, "m", _Tag_toggle).call(this);
+            }
+        });
         this.variant = 'neutral';
         this.size = 'default';
+        this.interactive = false;
+        this.selectable = false;
+        this.selected = false;
         this.isSkeleton = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', __classPrivateFieldGet$1(this, _Tag_handleClick, "f"));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', __classPrivateFieldGet$1(this, _Tag_handleClick, "f"));
+    }
+    update(changedProperties) {
+        /**
+         * Selectable tags are rendered as buttons, that's why we don't
+         * need to set tabindex for them.
+         */
+        if (__classPrivateFieldGet$1(this, _Tag_isInteractive, "f").call(this) && !__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) && !__classPrivateFieldGet$1(this, _Tag_isDisabled, "f").call(this)) {
+            this.setAttribute('tabindex', '0');
+        }
+        else {
+            this.removeAttribute('tabindex');
+        }
+        if (changedProperties.has('disabled')) {
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.removeAttribute('aria-disabled');
+        }
+        super.update(changedProperties);
+    }
+    updated(changedProperties) {
+        /**
+         * Update inverted state of slotted action buttons when selected state changes.
+         */
+        if (changedProperties.has('selected') || changedProperties.has('variant')) {
+            __classPrivateFieldGet$1(this, _Tag_instances, "m", _Tag_updateSlottedButtonInvertedState).call(this);
+        }
+        super.updated(changedProperties);
+    }
+    /**
+     * Which HTML tag should be used to render this element.
+     */
+    get tag() {
+        const as = __classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? 'button' : 'span';
+        return i$1 `${s(as)}`;
+    }
     render() {
-        return x `
-			<span
-				class=${e$1({
-            tag: true,
-            '-success': this.variant === 'success',
-            '-neutral': this.variant === 'neutral',
-            '-warning': this.variant === 'warning',
-            '-danger': this.variant === 'danger',
-            '-info': this.variant === 'info',
-            '-is-skeleton': this.isSkeleton,
-            '-size-small': this.size === 'small',
-            '-size-default': this.size === 'default',
-            '-size-large': this.size === 'large',
-        })}
+        return u `
+			<${this.tag}
+				class="tag"
+				?disabled="${__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? __classPrivateFieldGet$1(this, _Tag_isDisabled, "f").call(this) : E$1}"
+				type=${__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? 'button' : E$1}
+				aria-pressed=${__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this) ? __classPrivateFieldGet$1(this, _Tag_isSelected, "f").call(this) : E$1}
 			>
 				${this.isSkeleton
-            ? x ``
-            : x `<slot name="leading"></slot>
-							<span class="tag-content">
-								<slot></slot>
-							</span>`}
-			</span>
+            ? u ``
+            : u `<slot name="leading"></slot>
+								<span class="tag-content">
+									<slot></slot>
+								</span>
+								<slot name="trailing"></slot>`}
+			</${this.tag}>
 		`;
     }
 }
+_Tag_isInteractive = new WeakMap(), _Tag_isSelectable = new WeakMap(), _Tag_isSelected = new WeakMap(), _Tag_isDisabled = new WeakMap(), _Tag_handleClick = new WeakMap(), _Tag_instances = new WeakSet(), _Tag_toggle = function _Tag_toggle() {
+    if (this.disabled || !__classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this)) {
+        return;
+    }
+    this.selected = !this.selected;
+    this.emit('change');
+}, _Tag_updateSlottedButtonInvertedState = function _Tag_updateSlottedButtonInvertedState() {
+    const actionButtons = this.querySelectorAll('m-close-button, m-caret-button, m-tag-remove, m-tag-expand');
+    if (actionButtons.length > 0 && __classPrivateFieldGet$1(this, _Tag_isSelectable, "f").call(this)) {
+        logger$7.warn('Tag is selectable but has slotted action buttons, which is not recommended. See https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI for more information.');
+    }
+    /**
+     * These variants, when selected, have a lighter background color,
+     * so we don't need to update the inverted state of the slotted
+     * action buttons.
+     */
+    if (['subtle', 'warning'].includes(this.variant)) {
+        return;
+    }
+    actionButtons.forEach((button) => {
+        button.toggleAttribute('inverted', __classPrivateFieldGet$1(this, _Tag_isSelected, "f").call(this));
+    });
+};
 Tag.styles = [tagStyles()];
 Tag.define();
 
+class TagRemove extends CloseButton {
+    static get properties() {
+        return {
+            ...super.properties,
+            slot: { type: String, reflect: true },
+        };
+    }
+    static define() {
+        Component.define({ name: 'm-tag-remove', constructor: TagRemove });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.label = this.label || 'Remove tag';
+    }
+}
+TagRemove.define();
+
+class TagExpand extends Icon {
+    static get properties() {
+        return {
+            ...super.properties,
+            slot: { type: String, reflect: true },
+            rotated: { type: Boolean, reflect: true },
+        };
+    }
+    static define() {
+        Component.define({ name: 'm-tag-expand', constructor: TagExpand });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.name = 'caret-down';
+    }
+}
+TagExpand.styles = [...Icon.styles, tagExpandStyles()];
+TagExpand.define();
+
 function handleConditionObject(condition) {
     const keys = Object.keys(condition || {});
     const res = keys.reduce((acc, key) => {
@@ -13289,6 +13742,91 @@ function conditional(...conditions) {
     return classes.join(' ');
 }
 
+function baseTagStyles() {
+    return [
+        skeleton.styles(),
+        i$9 `
+			:host {
+				--m-tag-skeleton-width: 100px;
+				display: inline-block;
+			}
+
+			.tag {
+				--m-tag-padding-block: ${getToken$1('spacing-2')};
+				--m-tag-padding-inline: ${getToken$1('spacing-3')};
+
+				box-sizing: border-box;
+				max-width: 200px;
+				border-radius: 100px;
+				line-height: ${getToken$1('line-height-1')};
+				cursor: default;
+
+				display: flex;
+				align-items: center;
+				gap: ${getToken$1('spacing-1')};
+
+				padding-block: 0;
+				padding-inline: var(--m-tag-padding-inline);
+			}
+
+			.tag-content {
+				display: inline-block;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				flex: 1;
+
+				padding-block: var(--m-tag-padding-block);
+				padding-inline: 0;
+			}
+
+			@media (prefers-reduced-motion: no-preference) {
+				.tag {
+					${transition([{ property: 'background-color' }])};
+				}
+
+				.tag-content,
+				slot[name='leading']::slotted(*) {
+					${transition([{ property: 'color' }])};
+				}
+			}
+
+			.-size-small {
+				--m-tag-padding-block: ${getToken$1('spacing-1')};
+				--m-tag-padding-inline: ${getToken$1('spacing-2')};
+
+				${typography('chips-sm')};
+				block-size: ${toRem('18px')};
+			}
+
+			.-size-default {
+				--m-tag-padding-block: ${getToken$1('spacing-2')};
+				--m-tag-padding-inline: ${getToken$1('spacing-3')};
+
+				${typography('chips-md')};
+				block-size: ${getToken$1('global-height-small')};
+			}
+
+			.-size-large {
+				--m-tag-padding-block: ${getToken$1('spacing-3')};
+				--m-tag-padding-inline: ${getToken$1('spacing-4')};
+
+				${typography('button-lg')};
+				block-size: ${getToken$1('global-height-default')};
+			}
+
+			.-is-skeleton {
+				${skeleton()};
+				width: var(--m-tag-skeleton-width);
+			}
+		`,
+    ];
+}
+
+/**
+ * TODO: WHEN REMOVING THIS COMPONENT, PLEASE,
+ * REMOVE THE BASE TAG STYLES!
+ */
 function actionableTagStyles() {
     return [
         skeleton.styles(),
@@ -13350,23 +13888,16 @@ function actionableTagStyles() {
 				background: ${getColor('color-accent-20')};
 			}
 
-			.-accent:not(.-selected) ${on('m-close-button').not.disabled.hover} {
-				--m-close-button-color: ${getColor('color-accent-100')};
-				--m-close-button-icon-color: ${getColor('color-text-inverted')};
+			.-accent m-close-button {
+				--m-close-button-base-color: ${getColor('color-accent-100')};
 			}
 
-			.-accent:not(.-selected) ${on('m-close-button').not.disabled} {
-				--m-close-button-icon-color: ${getColor('color-accent-100')};
+			.-default.-selected m-close-button {
+				--m-close-button-base-color: ${getColor('color-primary-60')};
 			}
 
-			.-selected ${on('m-close-button').not.disabled.hover} {
-				--m-close-button-color: ${getColor('color-text-inverted')};
-			}
-			.-selected.-default ${on('m-close-button').not.disabled.hover} {
-				--m-close-button-icon-color: ${getColor('color-primary-60')};
-			}
-			.-selected.-accent ${on('m-close-button').not.disabled.hover} {
-				--m-close-button-icon-color: ${getColor('color-accent-100')};
+			.-default:not(.-selected) m-close-button {
+				--m-close-button-base-color: ${getColor('color-text-primary')};
 			}
 
 			.-size-large.-removable {
@@ -20254,4 +20785,4 @@ _FilePicker_instances = new WeakSet(), _FilePicker_input_get = function _FilePic
 FilePicker.styles = [styles$1()];
 FilePicker.define();
 
-export { DropdownItem as $, Accordion as A, BackButton as B, Card as C, Dialog as D, DIALOG_SIZES as E, DIALOG_VARIANTS as F, DialogActionPrimary as G, DialogActionSecondary as H, DialogActionTertiary as I, DialogActions as J, DialogBody as K, DialogClose as L, DialogFooter as M, DialogHeader as N, Divider as O, Drawer as P, DRAWER_SIZES as Q, DrawerActionPrimary as R, DrawerActionSecondary as S, DrawerActionTertiary as T, DrawerActions as U, DrawerBody as V, DrawerClose as W, DrawerHeader as X, Dropdown as Y, DropdownTrigger as Z, DropdownMenu as _, AccordionTitle as a, SpinnerWheel as a$, DropdownDivider as a0, EmptyStateAction as a1, EmptyStateHeader as a2, EmptyStateIllustration as a3, EmptyStateMessage as a4, EmptyState as a5, EMPTY_STATE_VARIANTS as a6, Field as a7, FieldHint as a8, FieldLabel as a9, defaultSidebarProps as aA, Switcher as aB, defaultSwitcherProps as aC, Container as aD, Row as aE, Column as aF, Link as aG, PageContent as aH, Pagination as aI, ProgressBar as aJ, ProgressBarCountdown as aK, Radio as aL, RadioGroup as aM, Section as aN, SectionTitle as aO, SideNavigation as aP, SideNavigationHeader as aQ, SideNavigationBody as aR, SideNavigationItem as aS, SideNavigationDivider as aT, SideNavigationSubNav as aU, SideNavigationSubNavContent as aV, SideNavigationSubNavItem as aW, SideNavigationSubNavTitle as aX, SideNavigationFooter as aY, Select as aZ, SelectOption as a_, FIELD_STATUSES as aa, Header as ab, HeaderActions as ac, HeaderContent as ad, HeaderTabs as ae, HeaderTitle as af, SubHeader as ag, AVAILABLE_ICONS as ah, DEPRECATED_OR_ALIAS_ICONS as ai, Icon as aj, Label as ak, defaultLabeledValueProps as al, LabeledValue as am, LabeledValueLabel as an, LabeledValueValue as ao, ALIGN_ITEMS_VALUES as ap, JUSTIFY_CONTENT_VALUES as aq, Box as ar, defaultBoxProps as as, Group as at, defaultGroupProps as au, Stack as av, defaultStackProps as aw, Grid as ax, defaultGridProps as ay, Sidebar as az, b, Steps as b0, Step as b1, Switch as b2, Table$1 as b3, defaultTableProps$1 as b4, TableHead$1 as b5, TableHeadCell$1 as b6, defaultTableHeadCellProps$1 as b7, TableBody$1 as b8, TableFoot$1 as b9, ActionableTag as bA, Text as bB, TextArea as bC, TextField as bD, Timeline as bE, TimelineExpandableItem as bF, TimelineItem as bG, TimelineItemBody as bH, TimelineItemFooter as bI, TimelineItemHeader as bJ, TimelineItemHeaderSubtitle as bK, TimelineItemHeaderTitle as bL, TimelineItemIcon as bM, ToggleGroup as bN, Toggle as bO, Tooltip as bP, TOOLTIP_PLACEMENT_VALUES as bQ, TopNavigation as bR, TopNavigationActions as bS, TopNavigationItem as bT, LogoLoader as bU, DotsLoader as bV, FilePicker as bW, FileItem as bX, TableRow$1 as ba, TableCell$1 as bb, defaultTableCellProps$1 as bc, TableToolbar as bd, TableFeedback as be, TableActions as bf, TableSelectionCell as bg, Table as bh, defaultTableProps as bi, TableHead as bj, TableBody as bk, TableFoot as bl, TableRow as bm, TableCell as bn, defaultTableCellProps as bo, TableHeadCell as bp, TableRowSelect as bq, TableRowExpand as br, TableLayoutToolbar as bs, TableLayoutFeedback as bt, TableLayoutActions as bu, TableLayout as bv, Tabs as bw, Tab as bx, TabPanel as by, Tag as bz, AccordionContent as c, Avatar as d, Badge as e, BannerActionPrimary as f, BannerActionSecondary as g, BannerActions as h, BannerDescription as i, BannerIcon as j, BannerTitle as k, Banner as l, Body as m, Button as n, CardBody as o, CardSubtitle as p, CardTitle as q, CardDivider as r, CardFooter as s, typographyVariants as t, CardActionPrimary as u, CardActionSecondary as v, CardActionTertiary as w, CaretButton as x, Checkbox as y, CloseButton as z };
+export { DropdownItem as $, Accordion as A, BackButton as B, Card as C, Dialog as D, DIALOG_SIZES as E, DIALOG_VARIANTS as F, DialogActionPrimary as G, DialogActionSecondary as H, DialogActionTertiary as I, DialogActions as J, DialogBody as K, DialogClose as L, DialogFooter as M, DialogHeader as N, Divider as O, Drawer as P, DRAWER_SIZES as Q, DrawerActionPrimary as R, DrawerActionSecondary as S, DrawerActionTertiary as T, DrawerActions as U, DrawerBody as V, DrawerClose as W, DrawerHeader as X, Dropdown as Y, DropdownTrigger as Z, DropdownMenu as _, AccordionTitle as a, SpinnerWheel as a$, DropdownDivider as a0, EmptyStateAction as a1, EmptyStateHeader as a2, EmptyStateIllustration as a3, EmptyStateMessage as a4, EmptyState as a5, EMPTY_STATE_VARIANTS as a6, Field as a7, FieldHint as a8, FieldLabel as a9, defaultSidebarProps as aA, Switcher as aB, defaultSwitcherProps as aC, Container as aD, Row as aE, Column as aF, Link as aG, PageContent as aH, Pagination as aI, ProgressBar as aJ, ProgressBarCountdown as aK, Radio as aL, RadioGroup as aM, Section as aN, SectionTitle as aO, SideNavigation as aP, SideNavigationHeader as aQ, SideNavigationBody as aR, SideNavigationItem as aS, SideNavigationDivider as aT, SideNavigationSubNav as aU, SideNavigationSubNavContent as aV, SideNavigationSubNavItem as aW, SideNavigationSubNavTitle as aX, SideNavigationFooter as aY, Select as aZ, SelectOption as a_, FIELD_STATUSES as aa, Header as ab, HeaderActions as ac, HeaderContent as ad, HeaderTabs as ae, HeaderTitle as af, SubHeader as ag, AVAILABLE_ICONS as ah, DEPRECATED_OR_ALIAS_ICONS as ai, Icon as aj, Label as ak, defaultLabeledValueProps as al, LabeledValue as am, LabeledValueLabel as an, LabeledValueValue as ao, ALIGN_ITEMS_VALUES as ap, JUSTIFY_CONTENT_VALUES as aq, Box as ar, defaultBoxProps as as, Group as at, defaultGroupProps as au, Stack as av, defaultStackProps as aw, Grid as ax, defaultGridProps as ay, Sidebar as az, b, Steps as b0, Step as b1, Switch as b2, Table$1 as b3, defaultTableProps$1 as b4, TableHead$1 as b5, TableHeadCell$1 as b6, defaultTableHeadCellProps$1 as b7, TableBody$1 as b8, TableFoot$1 as b9, TagRemove as bA, TagExpand as bB, ActionableTag as bC, Text as bD, TextArea as bE, TextField as bF, Timeline as bG, TimelineExpandableItem as bH, TimelineItem as bI, TimelineItemBody as bJ, TimelineItemFooter as bK, TimelineItemHeader as bL, TimelineItemHeaderSubtitle as bM, TimelineItemHeaderTitle as bN, TimelineItemIcon as bO, ToggleGroup as bP, Toggle as bQ, Tooltip as bR, TOOLTIP_PLACEMENT_VALUES as bS, TopNavigation as bT, TopNavigationActions as bU, TopNavigationItem as bV, LogoLoader as bW, DotsLoader as bX, FilePicker as bY, FileItem as bZ, TableRow$1 as ba, TableCell$1 as bb, defaultTableCellProps$1 as bc, TableToolbar as bd, TableFeedback as be, TableActions as bf, TableSelectionCell as bg, Table as bh, defaultTableProps as bi, TableHead as bj, TableBody as bk, TableFoot as bl, TableRow as bm, TableCell as bn, defaultTableCellProps as bo, TableHeadCell as bp, TableRowSelect as bq, TableRowExpand as br, TableLayoutToolbar as bs, TableLayoutFeedback as bt, TableLayoutActions as bu, TableLayout as bv, Tabs as bw, Tab as bx, TabPanel as by, Tag as bz, AccordionContent as c, Avatar as d, Badge as e, BannerActionPrimary as f, BannerActionSecondary as g, BannerActions as h, BannerDescription as i, BannerIcon as j, BannerTitle as k, Banner as l, Body as m, Button as n, CardBody as o, CardSubtitle as p, CardTitle as q, CardDivider as r, CardFooter as s, typographyVariants as t, CardActionPrimary as u, CardActionSecondary as v, CardActionTertiary as w, CaretButton as x, Checkbox as y, CloseButton as z };