From 72772ca2a0901a889d4b39e7666b603560e51663 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 30 Nov 2023 11:20:22 -0500
Subject: [PATCH 1/7] feat(createLayerInterface): add download button

---
 .../dist/referenceUIMachineOptions.js         | 31 ++++++++++++++++++-
 .../src/Layers/createLayerInterface.js        | 30 +++++++++++++++++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index 471ac063..041fbdce 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -8009,12 +8009,41 @@ function createLayerEntry(context, name, layer) {
   spinner.innerHTML = '<div></div><div></div><div></div><div></div>'
   imageIcons.appendChild(spinner)
   layer.spinner = spinner
+  var downloadImage = document.createElement('div')
+  downloadImage.innerHTML = '\n  <input type="checkbox" id='
+    .concat(context.id, '-download-image" class="')
+    .concat(
+      style.toggleInput,
+      '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="'
+    )
+    .concat(style.toggleButton, '" for="')
+    .concat(context.id, '-download-image">\n    <img src="')
+    .concat(optimizedSVGDataUri$t, '" />\n  </label>\n  ')
+  var downloadImageLabel = downloadImage.children[1]
+  downloadImage.style.height = '23px'
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    downloadImageLabel
+  )
+  imageIcons.appendChild(downloadImage)
+  downloadImage.addEventListener('click', function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    context.service.send({
+      type: 'DOWNLOAD_IMAGE',
+      data: {
+        name: context.images.selectedName,
+        layerName: name,
+      },
+    })
+  })
   var layerBBoxButton = document.createElement('div')
   layerBBoxButton.innerHTML = '<input id="'
     .concat(context.id, '-layerBBoxButton" type="checkbox" class="')
     .concat(
       style.toggleInput,
-      '"><label itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Label BBox" class="'
+      '"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="'
     )
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-layerBBoxButton"><img src="')
diff --git a/src/UI/reference-ui/src/Layers/createLayerInterface.js b/src/UI/reference-ui/src/Layers/createLayerInterface.js
index 7e867d92..bf904f70 100644
--- a/src/UI/reference-ui/src/Layers/createLayerInterface.js
+++ b/src/UI/reference-ui/src/Layers/createLayerInterface.js
@@ -73,8 +73,36 @@ function createLayerEntry(context, name, layer) {
 
   layer.spinner = spinner
 
+  const downloadImage = document.createElement('div')
+  downloadImage.innerHTML = `
+  <input type="checkbox" id=${context.id}-download-image" class="${style.toggleInput}" />
+  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="${style.toggleButton}" for="${context.id}-download-image">
+    <img src="${boundingBoxIconDataUri}" />
+  </label>
+  `
+
+  const downloadImageLabel = downloadImage.children[1]
+  downloadImage.style.height = '23px'
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    downloadImageLabel
+  )
+  imageIcons.appendChild(downloadImage)
+  downloadImage.addEventListener('click', event => {
+    event.preventDefault()
+    event.stopPropagation()
+    context.service.send({
+      type: 'DOWNLOAD_IMAGE',
+      data: {
+        name: context.images.selectedName,
+        layerName: name,
+      },
+    })
+  })
+
   const layerBBoxButton = document.createElement('div')
-  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
+  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
   const layerBBoxButtonInput = layerBBoxButton.children[0]
   const layerBBoxLabel = layerBBoxButton.children[1]
   layerBBoxButton.style.height = '23px'

From f97de628104895b83e956cc44d3f4db8b6fb0aa2 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 1 Dec 2023 15:18:33 -0500
Subject: [PATCH 2/7] feat(viewerMachineOptions): emit saveRoi event on
 download button

---
 src/createViewer.js         |  3 +++
 src/createViewerMachine.js  |  6 ++++++
 src/viewerMachineOptions.js | 11 +++++++++++
 3 files changed, 20 insertions(+)

diff --git a/src/createViewer.js b/src/createViewer.js
index ea3f2a02..1995eb7f 100644
--- a/src/createViewer.js
+++ b/src/createViewer.js
@@ -183,6 +183,9 @@ const createViewer = async (
             break
           case 'TAKE_SCREENSHOT':
             break
+          case 'SAVE_ROI':
+            eventEmitter.emit('saveRoi', event.data)
+            break
           default:
             throw new Error(`Unexpected event type: ${event.type}`)
         }
diff --git a/src/createViewerMachine.js b/src/createViewerMachine.js
index 1d4d9222..2ae133e6 100644
--- a/src/createViewerMachine.js
+++ b/src/createViewerMachine.js
@@ -362,6 +362,12 @@ const createViewerMachine = (options, context, eventEmitterCallback) => {
             TOGGLE_LAYER_BBOX: {
               actions: [forwardTo('ui'), forwardTo('rendering')],
             },
+            DOWNLOAD_IMAGE: {
+              actions: ['downloadImage'],
+            },
+            SAVE_ROI: {
+              actions: [forwardTo('eventEmitter')],
+            },
           },
         },
       },
diff --git a/src/viewerMachineOptions.js b/src/viewerMachineOptions.js
index 3cd3a201..b48c82a1 100644
--- a/src/viewerMachineOptions.js
+++ b/src/viewerMachineOptions.js
@@ -8,6 +8,17 @@ const ViewerMachineOptions = {
   actions: {
     createRenderingViewContainers,
     styleRenderingViewContainers,
+    downloadImage: (context, event) => {
+      const { croppingPlanes } = context.main
+      context.service.send({
+        type: 'SAVE_ROI',
+        data: {
+          name: event.data.name,
+          layerName: event.data.layerName,
+          croppingPlanes,
+        },
+      })
+    },
   },
 
   ui: referenceUIMachineOptions,

From 7eac58ac8b0f3145a747c51df3413f735f2a5430 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 1 Dec 2023 15:48:43 -0500
Subject: [PATCH 3/7] feat(createLayerInterface): use download icon

---
 .../dist/referenceUIMachineOptions.js         | 242 +++++++++---------
 src/UI/reference-ui/package-lock.json         |  11 +
 src/UI/reference-ui/package.json              |   1 +
 .../src/Layers/createLayerInterface.js        |  60 ++---
 4 files changed, 163 insertions(+), 151 deletions(-)

diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index 041fbdce..fb2fb1d5 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -113,103 +113,100 @@ var style = {
 }
 styleInject(css_248z$1)
 
-const optimizedSVGDataUri$w =
+const optimizedSVGDataUri$z =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1536'%3e%3cpath d='M725 431L555 881q33 0 136.5 2t160.5 2q19 0 57-2-87-253-184-452zM0 1536l2-79q23-7 56-12.5t57-10.5 49.5-14.5 44.5-29 31-50.5l237-616L757 0h128q8 14 11 21l205 480q33 78 106 257.5t114 274.5q15 34 58 144.5t72 168.5q20 45 35 57 19 15 88 29.5t84 20.5q6 38 6 57 0 4-.5 13t-.5 13q-63 0-190-8t-191-8q-76 0-215 7t-178 8q0-43 4-78l131-28q1 0 12.5-2.5t15.5-3.5 14.5-4.5 15-6.5 11-8 9-11 2.5-14q0-16-31-96.5t-72-177.5-42-100l-450-2q-26 58-76.5 195.5T382 1361q0 22 14 37.5t43.5 24.5 48.5 13.5 57 8.5 41 4q1 19 1 58 0 9-2 27-58 0-174.5-10T236 1514q-8 0-26.5 4t-21.5 4q-80 14-188 14z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$v =
+const optimizedSVGDataUri$y =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 41.91699981689453'%3e%3cpath d='M15 24.089V7.375L9 13V7.5L17 0l8 7.5V13l-6-5.625v15.542h16.625l-5.625-6h5.5l7.5 8-7.5 8H30l5.625-6H17.828l-11 11H15l-4 4H0v-11l4-4v8.172l11-11zm6.253 8.361L18.8 37.262v2.655h-1.707v-2.625l-2.346-4.842h1.921l1.195 2.785.17.61h.022l.165-.588 1.252-2.807h1.781zm8.267-10.533h-2.03l-1.308-2.432-.154-.5h-.021l-.175.522-1.314 2.41H22.48l2.42-3.733-2.207-3.734h2.079l1.083 2.239.227.63h.021l.235-.65 1.194-2.219h1.881l-2.235 3.702 2.342 3.765zm-16.48 1H6.96v-.985l3.875-5.095H7.28V15.45h5.76v.955L9.248 21.53h3.792v1.387z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$u =
+const optimizedSVGDataUri$x =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3csvg viewBox='0 0 1763.3333740234375 1792' version='1.1' id='svg113' sodipodi:docname='blendMode.svg' inkscape:version='1.2 (1:1.2%2b202206011326%2bfc4e4096c5)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3e %3cdefs id='defs117' /%3e %3csodipodi:namedview id='namedview115' pagecolor='white' bordercolor='black' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='0.27047836' inkscape:cx='763.46218' inkscape:cy='1454.8299' inkscape:window-width='1846' inkscape:window-height='1136' inkscape:window-x='74' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='svg113' /%3e %3cellipse style='fill:none%3bfill-opacity:1%3bstroke:black%3bstroke-width:149.145%3bstroke-dasharray:none%3bstroke-opacity:1' id='path223' cx='601' cy='899.99982' rx='525.42761' ry='525.42743' /%3e %3ccircle style='fill:black%3bfill-opacity:1%3bstroke:none%3bstroke-width:100%3bstroke-dasharray:none%3bstroke-opacity:1' id='path223-3' cx='1163' cy='900' r='600' /%3e %3c/svg%3e"
 
-const optimizedSVGDataUri$t =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M17 22v-2h3v-3h2v3.5c0 .39-.16.74-.46 1.04c-.3.3-.65.46-1.04.46H17M7 22H3.5c-.39 0-.74-.16-1.04-.46c-.3-.3-.46-.65-.46-1.04V17h2v3h3v2M17 2h3.5c.39 0 .74.16 1.04.46c.3.3.46.65.46 1.04V7h-2V4h-3V2M7 2v2H4v3H2V3.5c0-.39.16-.74.46-1.04c.3-.3.65-.46 1.04-.46H7m6 15.25l4-2.3v-4.59l-4 2.3v4.59m-1-6.33l4-2.29l-4-2.35l-4 2.35l4 2.29m-5 4.03l4 2.3v-4.59l-4-2.3v4.59m11.23-7.36c.5.32.77.75.77 1.32v6.32c0 .57-.27 1-.77 1.32l-5.48 3.18c-.5.32-1 .32-1.5 0l-5.48-3.18c-.5-.32-.77-.75-.77-1.32V8.91c0-.57.27-1 .77-1.32l5.48-3.18c.25-.13.5-.19.75-.19s.5.06.75.19l5.48 3.18Z'/%3e%3c/svg%3e"
-
-const optimizedSVGDataUri$s =
+const optimizedSVGDataUri$w =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'%3e%3cpath d='M64 0h32v48H64zm32 288V112H64v208h208v-32zm240 0h48v32h-48z'/%3e%3cpath d='M0 64v32h288v288h32V64z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$r =
+const optimizedSVGDataUri$v =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M1283 413L928 768l355 355 144-144q29-31 70-14 39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l144-144-355-355-355 355 144 144q31 30 14 69-17 40-59 40H64q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l144 144 355-355-355-355-144 144q-19 19-45 19-12 0-24-5-40-17-40-59V64q0-26 19-45T64 0h448q42 0 59 40 17 39-14 69L413 253l355 355 355-355-144-144q-31-30-14-69 17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59-13 5-25 5-26 0-45-19z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$q =
+const optimizedSVGDataUri$u =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3e%3cpath d='M16 12h4v4h-4zm-4 4h4v4h-4zm8 0h4v4h-4zm4-4h4v4h-4zM8 12h4v4H8zM32 0H4C1.8 0 0 1.8 0 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zM12 30H8v-4h4v4zm8 0h-4v-4h4v4zm8 0h-4v-4h4v4zm4-14h-4v4h4v4h-4v-4h-4v4h-4v-4h-4v4h-4v-4H8v4H4v-4h4v-4H4V4h28v12z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$p =
+const optimizedSVGDataUri$t =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='13.909765010254631 15.20464974120776 126.4822541859144 128.7097615525036' width='122.48' height='124.71'%3e%3cdefs%3e%3cpath d='M76.43 16.2L130.98 47.58L76.43 75.4L21.89 47.58L76.43 16.2Z' id='bhsnPtSOa'%3e%3c/path%3e%3cpath d='M69.91 140.91L14.91 114.08L15 60L70 87.88L69.91 140.91Z' id='agS5SeOOL'%3e%3c/path%3e%3cpath d='M137.39 113.62L136.4 59.17L82.61 87.3L83.59 140.83L137.39 113.62Z' id='c3paZhyh3s'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23bhsnPtSOa' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23agS5SeOOL' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23c3paZhyh3s' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$o =
+const optimizedSVGDataUri$s =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1536'%3e%3cpath d='M640 448q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448H256v-192l320-320 160 160 512-512zm96-704H160q-13 0-22.5 9.5T128 160v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5V160q0-13-9.5-22.5T1760 128zm160 32v1216q0 66-47 113t-113 47H160q-66 0-113-47T0 1376V160Q0 94 47 47T160 0h1600q66 0 113 47t47 113z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$n =
+const optimizedSVGDataUri$r =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='24.474820143884916 11.75539568345329 107.73381294964032 102.35251798561154' width='102.73' height='97.35'%3e%3cdefs%3e%3cpath d='M26.47 13.76L129.21 13.76L129.21 111.11L26.47 111.11L26.47 13.76Z' id='a3ZYhJlju'%3e%3c/path%3e%3clinearGradient id='gradientbexcZGM80' gradientUnits='userSpaceOnUse' x1='27.65' y1='13.76' x2='129.21' y2='111.57'%3e%3cstop style='stop-color: white%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %23010000%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23a3ZYhJlju' opacity='1' fill='url(%23gradientbexcZGM80)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23a3ZYhJlju' opacity='1' fill-opacity='0' stroke='white' stroke-width='4' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$m =
+const optimizedSVGDataUri$q =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1344'%3e%3cpath d='M555 1047l78-141q-87-63-136-159t-49-203q0-121 61-225-229 117-381 353 167 258 427 375zm389-759q0-20-14-34t-34-14q-125 0-214.5 89.5T592 544q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm363-191q0 7-1 9-105 188-315 566t-316 567l-49 89q-10 16-28 16-12 0-134-70-16-10-16-28 0-12 44-87-143-65-263.5-173T20 741Q0 710 0 672t20-69q153-235 380-371T896 96q89 0 180 17l54-97q10-16 28-16 5 0 18 6t31 15.5 33 18.5 31.5 18.5T1291 70q16 10 16 27zm37 447q0 139-79 253.5T1056 962l280-502q8 45 8 84zm448 128q0 35-20 69-39 64-109 145-150 172-347.5 267T896 1248l74-132q212-18 392.5-137T1664 672q-115-179-282-294l63-112q95 64 182.5 153T1772 603q20 34 20 69z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$l =
+const optimizedSVGDataUri$p =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100%3b' xml:space='preserve'%3e %3ccircle cx='59.6' cy='42.7' r='4.9'/%3e %3cpath d='M41.1%2c84.2c-1%2c0-2-0.4-2.7-1.3l-22-26.7c-1.2-1.5-1-3.7%2c0.5-4.9l31.9-26.4c0.6-0.5%2c1.4-0.8%2c2.2-0.8c0%2c0%2c0%2c0%2c0%2c0l27.1%2c0.1 c1%2c0%2c2%2c0.5%2c2.7%2c1.3c0.7%2c0.8%2c0.9%2c1.9%2c0.7%2c2.9L76.5%2c55c-0.2%2c0.8-0.6%2c1.5-1.2%2c2L43.3%2c83.4C42.7%2c83.9%2c41.9%2c84.2%2c41.1%2c84.2z M24%2c54.5 l17.6%2c21.3l28.3-23.3l4-21.2l-21.6-0.1L24%2c54.5z'/%3e %3c/svg%3e"
 
-const optimizedSVGDataUri$k =
+const optimizedSVGDataUri$o =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' id='svg2' viewBox='0 0 62.221396 60.130392' height='16.970133mm' width='17.560261mm'%3e %3cdefs id='defs4' /%3e %3cmetadata id='metadata7'%3e %3crdf:RDF%3e %3ccc:Work rdf:about=''%3e %3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e %3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e %3cdc:title%3e%3c/dc:title%3e %3c/cc:Work%3e %3c/rdf:RDF%3e %3c/metadata%3e %3cg transform='translate(-204.3732%2c-426.67465)' id='layer1'%3e %3crect transform='matrix(0.67893789%2c0.73419571%2c-0.73419571%2c0.67893789%2c0%2c0)' y='107.51627' x='484.44534' height='59.38089' width='21.540062' id='rect4140' style='fill:none%3bfill-opacity:1%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-dashoffset:0%3bstroke-opacity:1' /%3e %3cpath id='path4148' d='m 243.29116%2c434.92064 c 3.16419%2c3.42172 6.32839%2c6.84344 9.49258%2c10.26516' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-3-5' d='m 236.26734%2c441.53481 c 1.96377%2c2.12361 3.92755%2c4.24722 5.89132%2c6.37082' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-3' d='m 228.61436%2c448.49077 c 3.16419%2c3.42172 6.32839%2c6.84345 9.49259%2c10.26516' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-3-5-5' d='m 220.76246%2c455.75236 c 1.96378%2c2.12361 3.92756%2c4.24721 5.89133%2c6.37081' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-6' d='m 213.55887%2c462.41313 c 3.16419%2c3.42173 6.32839%2c6.84345 9.49258%2c10.26518' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3c/g%3e %3c/svg%3e"
 
-const optimizedSVGDataUri$j =
+const optimizedSVGDataUri$n =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M768 1312V224q-148 0-273 73T297 495t-73 273 73 273 198 198 273 73zm768-544q0 209-103 385.5T1153.5 1433 768 1536t-385.5-103T103 1153.5 0 768t103-385.5T382.5 103 768 0t385.5 103T1433 382.5 1536 768z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$i =
+const optimizedSVGDataUri$m =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M768 0q209 0 385.5 103T1433 382.5 1536 768t-103 385.5-279.5 279.5T768 1536t-385.5-103T103 1153.5 0 768t103-385.5T382.5 103 768 0zm0 1312q148 0 273-73t198-198 73-273-73-273-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73zm96-224q-14 0-23-9t-9-23V480q0-14 9-23t23-9h192q14 0 23 9t9 23v576q0 14-9 23t-23 9H864zm-384 0q-14 0-23-9t-9-23V480q0-14 9-23t23-9h192q14 0 23 9t9 23v576q0 14-9 23t-23 9H480z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$h =
+const optimizedSVGDataUri$l =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M1184 768q0 37-32 55l-544 320q-15 9-32 9-16 0-32-8-32-19-32-56V448q0-37 32-56 33-18 64 1l544 320q32 18 32 55zm128 0q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5T1153.5 1433 768 1536t-385.5-103T103 1153.5 0 768t103-385.5T382.5 103 768 0t385.5 103T1433 382.5 1536 768z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$g =
+const optimizedSVGDataUri$k =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='23.526450466849894 25.20464974120776 126.86556872931914 128.62412323660308' width='122.87' height='124.62'%3e%3cdefs%3e%3cpath d='M85.45 26.2L140 57.58L85.45 85.4L30.91 57.58L85.45 26.2Z' id='bljQJJOjU'%3e%3c/path%3e%3cpath d='M79.53 149.62L24.53 122.78L24.62 68.7L79.62 96.58L79.53 149.62Z' id='a2OxwluQL6'%3e%3c/path%3e%3cpath d='M147.39 123.62L146.4 69.17L92.61 97.3L93.59 150.83L147.39 123.62Z' id='a4nIltkDon'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23bljQJJOjU' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a2OxwluQL6' opacity='1' fill='%23ff7b7b' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a4nIltkDon' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$f =
+const optimizedSVGDataUri$j =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3e%3cpath d='M224 144c-44.004 0-80.001 36-80.001 80 0 44.004 35.997 80 80.001 80 44.005 0 79.999-35.996 79.999-80 0-44-35.994-80-79.999-80zm190.938 58.667c-9.605-88.531-81.074-160-169.605-169.599V0h-42.666v33.067c-88.531 9.599-160 81.068-169.604 169.599H0v42.667h33.062c9.604 88.531 81.072 160 169.604 169.604V448h42.666v-33.062c88.531-9.604 160-81.073 169.605-169.604H448v-42.667h-33.062zM224 373.333c-82.137 0-149.334-67.198-149.334-149.333 0-82.136 67.197-149.333 149.334-149.333 82.135 0 149.332 67.198 149.332 149.333S306.135 373.333 224 373.333z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$e =
+const optimizedSVGDataUri$i =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'%3e%3cpath d='M332.795 332.8H256V384h128V256h-51.205zm.005-281.595V128H384V0H256v51.205zM51.205 51.2H128V0H0v128h51.205zM51.2 332.795V256H0v128h128v-51.205z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$d =
+const optimizedSVGDataUri$h =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M3 9V3h2v3.35Q6.25 4.8 8.063 3.9T12 3q2.95 0 5.263 1.675T20.5 9h-2.175q-.85-1.8-2.525-2.9T12 5q-1.425 0-2.688.525T7.1 7H9v2H3Zm3 9h12l-3.75-5l-3 4L9 14l-3 4Zm-1 4q-.825 0-1.413-.588T3 20v-8h2v8h14v-8h2v8q0 .825-.588 1.413T19 22H5Z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$c =
+const optimizedSVGDataUri$g =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath d='M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$b =
+const optimizedSVGDataUri$f =
   "data:image/svg+xml,%3csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='black' stroke-width='10' fill='none' fill-rule='evenodd' stroke-linecap='square'%3e%3cpath d='M10 90h160M10 133.488V47M170 133.488V47M90 133.488V47'/%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$a =
+const optimizedSVGDataUri$e =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1763.3333740234375 1792'%3e%3cpath d='M707.333 1440q0 12-10 24l-319 319q-10 9-23 9-12 0-23-9l-320-320q-15-16-7-35 8-20 30-20h192V32q0-14 9-23t23-9h192q14 0 23 9t9 23v1376h192q14 0 23 9t9 23zm1056 128v192q0 14-9 23t-23 9h-832q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h832q14 0 23 9t9 23zm-192-512v192q0 14-9 23t-23 9h-640q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h640q14 0 23 9t9 23zm-192-512v192q0 14-9 23t-23 9h-448q-14 0-23-9t-9-23V544q0-14 9-23t23-9h448q14 0 23 9t9 23zm-192-512v192q0 14-9 23t-23 9h-256q-14 0-23-9t-9-23V32q0-14 9-23t23-9h256q14 0 23 9t9 23z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$9 =
+const optimizedSVGDataUri$d =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1664'%3e%3cpath d='M960 672q119 0 203.5 84.5T1248 960t-84.5 203.5T960 1248t-203.5-84.5T672 960t84.5-203.5T960 672zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75H256q-106 0-181-75T0 1408V512q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5T704 0h512q53 0 103.5 35.5T1389 120l51 136h224zM960 1408q185 0 316.5-131.5T1408 960t-131.5-316.5T960 512 643.5 643.5 512 960t131.5 316.5T960 1408z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$8 =
+const optimizedSVGDataUri$c =
   "data:image/svg+xml,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3ctitle%3eSVG_Artboards%3c/title%3e%3crect x='17.52' y='15.45' width='28.97' height='49.1' transform='translate(72 8) rotate(90)' style='fill:%23a7d28c%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3crect x='8.56' y='26.62' width='2.96' height='26.71' style='fill:%23603c89'/%3e%3crect x='11.52' y='26.62' width='2.96' height='26.71' style='fill:%2346449b'/%3e%3crect x='14.42' y='26.62' width='2.96' height='26.71' style='fill:%232a5aa8'/%3e%3crect x='17.38' y='26.62' width='2.96' height='26.71' style='fill:%230c71b8'/%3e%3crect x='20.36' y='26.62' width='2.96' height='26.71' style='fill:%230d7fc2'/%3e%3crect x='23.32' y='26.62' width='2.96' height='26.71' style='fill:%23198ece'/%3e%3crect x='26.22' y='26.62' width='2.96' height='26.71' style='fill:%2325a1db'/%3e%3crect x='29.18' y='26.62' width='2.96' height='26.71' style='fill:%2312b2d2'/%3e%3crect x='32.19' y='26.62' width='2.96' height='26.71' style='fill:%234bb88e'/%3e%3crect x='23.21' y='38.49' width='26.71' height='2.96' transform='translate(76.54 3.41) rotate(90)' style='fill:%2398c37e'/%3e%3crect x='26.17' y='38.49' width='26.71' height='2.96' transform='translate(79.5 0.45) rotate(90)' style='fill:%23a4c661'/%3e%3crect x='29.07' y='38.49' width='26.71' height='2.96' transform='translate(82.4 -2.45) rotate(90)' style='fill:%23c6c835'/%3e%3crect x='32.03' y='38.49' width='26.71' height='2.96' transform='translate(85.36 -5.41) rotate(90)' style='fill:%23e8c61d'/%3e%3crect x='35.01' y='38.49' width='26.71' height='2.96' transform='translate(88.34 -8.39) rotate(90)' style='fill:%23e2ae27'/%3e%3crect x='37.97' y='38.49' width='26.71' height='2.96' transform='translate(91.3 -11.35) rotate(90)' style='fill:%23dc9a2a'/%3e%3crect x='40.87' y='38.49' width='26.71' height='2.96' transform='translate(94.2 -14.25) rotate(90)' style='fill:%23c58338'/%3e%3cline x1='23.49' y1='34.89' x2='23.49' y2='46.71' style='fill:none%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3cline x1='39.95' y1='34.89' x2='39.95' y2='46.71' style='fill:none%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3cline x1='56.07' y1='40.8' x2='8.94' y2='40.8' style='fill:none%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3ccircle cx='21.12' cy='20.63' r='15.5' style='fill:%23a7d28c%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$7 =
+const optimizedSVGDataUri$b =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='15 15 75.15107913669064 70.19424460431657' width='61.15' height='59.19'%3e%3cdefs%3e%3cpath d='M15 15L76.15 15L76.15 74.19L15 74.19L15 15Z' id='a28rcsTDH'%3e%3c/path%3e%3cclipPath id='clipa5ipCW0hFw'%3e%3cuse xlink:href='%23a28rcsTDH' opacity='1'%3e%3c/use%3e%3c/clipPath%3e%3c/defs%3e%3cg%3e%3cg%3e%3cg%3e%3cfilter id='shadow11528463' x='-5' y='-5' width='113.15' height='108.19' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse'%3e%3cfeFlood%3e%3c/feFlood%3e%3cfeComposite in2='SourceAlpha' operator='in'%3e%3c/feComposite%3e%3cfeGaussianBlur stdDeviation='1'%3e%3c/feGaussianBlur%3e%3cfeOffset dx='12' dy='9' result='afterOffset'%3e%3c/feOffset%3e%3cfeFlood flood-color='black' flood-opacity='0.5'%3e%3c/feFlood%3e%3cfeComposite in2='afterOffset' operator='in'%3e%3c/feComposite%3e%3cfeMorphology operator='dilate' radius='1'%3e%3c/feMorphology%3e%3cfeComposite in2='SourceAlpha' operator='out'%3e%3c/feComposite%3e%3c/filter%3e%3cpath d='M15 15L76.15 15L76.15 74.19L15 74.19L15 15Z' id='ciVjyGjh3' fill='white' fill-opacity='1' filter='url(%23shadow11528463)'%3e%3c/path%3e%3c/g%3e%3cuse xlink:href='%23a28rcsTDH' opacity='1' fill='white' fill-opacity='0'%3e%3c/use%3e%3cg clip-path='url(%23clipa5ipCW0hFw)'%3e%3cuse xlink:href='%23a28rcsTDH' opacity='1' fill-opacity='0' stroke='black' stroke-width='8' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$6 =
+const optimizedSVGDataUri$a =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 320'%3e%3cpath d='M353.4 128H30.6C13.7 128 0 142.3 0 160s13.7 32 30.6 32h322.8c16.9 0 30.6-14.3 30.6-32s-13.7-32-30.6-32zm0-128H30.6C13.7 0 0 14.3 0 32s13.7 32 30.6 32h322.8c16.9 0 30.6-14.3 30.6-32S370.3 0 353.4 0zm0 256H30.6C13.7 256 0 270.3 0 288s13.7 32 30.6 32h322.8c16.9 0 30.6-14.3 30.6-32s-13.7-32-30.6-32z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$5 =
+const optimizedSVGDataUri$9 =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='31.654362741230607 28.850229150738443 113.67896134435179 115.80278931174794' width='109.68' height='111.8'%3e%3cdefs%3e%3cpath d='M87.79 29.85L142.33 61.23L87.79 89.05L33.24 61.23L87.79 29.85Z' id='b6gn5Ph4a'%3e%3c/path%3e%3clinearGradient id='gradientc5ieAzTlrB' gradientUnits='userSpaceOnUse' x1='87.79' y1='88.11' x2='86.79' y2='15.31'%3e%3cstop style='stop-color: %238dbee6%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M87.79 141.63L33.24 115L33.24 61.17L87.79 88.83L87.79 141.63Z' id='bcpTLWFe1'%3e%3c/path%3e%3clinearGradient id='gradienta1vdPb9Tx' gradientUnits='userSpaceOnUse' x1='86.52' y1='89.05' x2='58.85' y2='125.96'%3e%3cstop style='stop-color: %237bb2de%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233789cb%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M142.33 115.48L142.31 61.17L87.77 88.26L87.8 141.65L142.33 115.48Z' id='doqFZ6o0V'%3e%3c/path%3e%3clinearGradient id='gradientb6QK8E71A' gradientUnits='userSpaceOnUse' x1='87.77' y1='89.05' x2='125.07' y2='123.31'%3e%3cstop style='stop-color: %237db2dd%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M87.2 58.24L141.75 89.62L87.2 117.43L32.65 89.62L87.2 58.24Z' id='dDpnVVPsa'%3e%3c/path%3e%3cpath d='M117.39 102.02L116.4 47.72L62.36 75.78L63.33 129.16L117.39 102.02Z' id='b2LmEtWKW7'%3e%3c/path%3e%3cpath d='M111.39 129L54.95 100.95L56.3 47.13L112.71 76.21L111.39 129Z' id='a2vWKwK9hV'%3e%3c/path%3e%3cpath d='M87.18 91.77L87.39 62.98L63.46 77.15L63.25 105.45L87.18 91.77Z' id='blEPHXHzV'%3e%3c/path%3e%3cpath d='M87.7 91.5L112.05 105.3L87.7 117.53L63.35 105.3L87.7 91.5Z' id='d10FgvNsKq'%3e%3c/path%3e%3cpath d='M53.45 81.07L63.41 91.93L63.21 105.2L53.84 95.8L53.45 81.07Z' id='b4fb7ce3g6'%3e%3c/path%3e%3cpath d='M54.34 78L63.46 82.93L63.26 92.41L54.68 88.36L54.34 78Z' id='b4t14UEF2B'%3e%3c/path%3e%3cpath d='M45.58 84.93L58.54 91.93L62.69 104.55L50.76 98.72L45.58 84.93Z' id='b7nuEYAotU'%3e%3c/path%3e%3cpath d='M117.88 95.3L117.38 101.98L112.01 104.88L112.16 98.78L117.88 95.3Z' id='cbfwgDbHI'%3e%3c/path%3e%3cpath d='M118.38 75.8L117.88 82.48L112.51 85.38L112.66 79.28L118.38 75.8Z' id='a7u7rrS51C'%3e%3c/path%3e%3cpath d='M118.08 83.3L117.58 89.98L112.21 92.88L112.36 86.78L118.08 83.3Z' id='b2cAudVEyd'%3e%3c/path%3e%3cpath d='M117.98 89.2L117.48 95.88L112.11 98.78L112.26 92.68L117.98 89.2Z' id='hMEdWtW14'%3e%3c/path%3e%3cpath d='M112.44 88.87L118.08 85.26L118.09 79.16L112.79 82.18L112.44 88.87Z' id='d6AqxDBdCj'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23b6gn5Ph4a' opacity='0.4' fill='url(%23gradientc5ieAzTlrB)'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23bcpTLWFe1' opacity='0.4' fill='url(%23gradienta1vdPb9Tx)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23bcpTLWFe1' opacity='0.4' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23doqFZ6o0V' opacity='0.4' fill='url(%23gradientb6QK8E71A)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23doqFZ6o0V' opacity='0.4' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23dDpnVVPsa' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b2LmEtWKW7' opacity='1' fill='%23ffff72' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a2vWKwK9hV' opacity='1' fill='%23ff7b7b' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23blEPHXHzV' opacity='1' fill='%23ffff72' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23d10FgvNsKq' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b4fb7ce3g6' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b4t14UEF2B' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b7nuEYAotU' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23cbfwgDbHI' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a7u7rrS51C' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b2cAudVEyd' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23hMEdWtW14' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23d6AqxDBdCj' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$4 =
+const optimizedSVGDataUri$8 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1152'%3e%3cpath d='M1664 576q-152-236-381-353 61 104 61 225 0 185-131.5 316.5T896 896 579.5 764.5 448 448q0-121 61-225-229 117-381 353 133 205 333.5 326.5T896 1024t434.5-121.5T1664 576zM944 192q0-20-14-34t-34-14q-125 0-214.5 89.5T592 448q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5T896 1152t-499.5-139T20 645Q0 610 0 576t20-69q140-229 376.5-368T896 0t499.5 139T1772 507q20 35 20 69z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$3 =
+const optimizedSVGDataUri$7 =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='17.242414994673346 15 113.09090909090907 115.80278931174797' width='109.09' height='111.8'%3e%3cdefs%3e%3cpath d='M72.79 16L127.33 47.38L72.79 75.19L18.24 47.38L72.79 16Z' id='ahuegR4Z7'%3e%3c/path%3e%3clinearGradient id='gradientg1v0yQ7cPQ' gradientUnits='userSpaceOnUse' x1='72.79' y1='74.26' x2='71.79' y2='1.46'%3e%3cstop style='stop-color: %238dbee6%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M72.79 127.78L18.24 101.15L18.24 47.32L72.79 74.98L72.79 127.78Z' id='apgu3VIlv'%3e%3c/path%3e%3clinearGradient id='gradientbx3q582Ag' gradientUnits='userSpaceOnUse' x1='71.52' y1='75.19' x2='43.85' y2='112.11'%3e%3cstop style='stop-color: %237bb2de%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233789cb%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M127.33 101.63L127.31 47.32L72.77 74.41L72.8 127.8L127.33 101.63Z' id='czTPGmX6c'%3e%3c/path%3e%3clinearGradient id='gradiente44kLH46ez' gradientUnits='userSpaceOnUse' x1='72.77' y1='75.19' x2='110.07' y2='109.46'%3e%3cstop style='stop-color: %237db2dd%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23ahuegR4Z7' opacity='0.7' fill='url(%23gradientg1v0yQ7cPQ)'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23apgu3VIlv' opacity='0.7' fill='url(%23gradientbx3q582Ag)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23apgu3VIlv' opacity='0.7' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23czTPGmX6c' opacity='0.7' fill='url(%23gradiente44kLH46ez)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23czTPGmX6c' opacity='0.7' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$2 =
+const optimizedSVGDataUri$6 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2304 1000'%3e%3cpath d='M784 976l16-241-16-523q-1-10-7.5-17t-16.5-7q-9 0-16 7t-7 17l-14 523 14 241q1 10 7.5 16.5T760 999q22 0 24-23zm296-29l11-211-12-586q0-16-13-24-8-5-16-5t-16 5q-13 8-13 24l-1 6-10 579q0 1 11 236v1q0 10 6 17 9 11 23 11 11 0 20-9 9-7 9-20zM35 607l20 128-20 126q-2 9-9 9t-9-9L0 735l17-128q2-9 9-9t9 9zm86-79l26 207-26 203q-2 9-10 9-9 0-9-10L79 735l23-207q0-9 9-9 8 0 10 9zm280 453zM213 490l25 245-25 237q0 11-11 11-10 0-12-11l-21-237 21-245q2-12 12-12 11 0 11 12zm94-7l23 252-23 244q-2 13-14 13-13 0-13-13l-21-244 21-252q0-13 13-13 12 0 14 13zm94 18l21 234-21 246q-2 16-16 16-6 0-10.5-4.5T370 981l-20-246 20-234q0-6 4.5-10.5T385 486q14 0 16 15zm383 475zM495 355l21 380-21 246q0 7-5 12.5t-12 5.5q-16 0-18-18l-18-246 18-380q2-18 18-18 7 0 12 5.5t5 12.5zm94-86l19 468-19 244q0 8-5.5 13.5T570 1000q-18 0-20-19l-16-244 16-468q2-19 20-19 8 0 13.5 5.5T589 269zm98-40l18 506-18 242q-2 21-22 21-19 0-21-21l-16-242 16-506q0-9 6.5-15.5T665 207q9 0 15 6.5t7 15.5zm392 742zM881 225l15 510-15 239q0 10-7.5 17.5T856 999t-17-7-8-18l-14-239 14-510q0-11 7.5-18t17.5-7 17.5 7 7.5 18zm99 19l14 492-14 236q0 11-8 19t-19 8-19-8-9-19l-12-236 12-492q1-12 9-20t19-8 18.5 8 8.5 20zm212 492l-14 231q0 13-9 22t-22 9-22-9-10-22l-6-114-6-117 12-636v-3q2-15 12-24 9-7 20-7 8 0 15 5 14 8 16 26zm1112-19q0 117-83 199.5T2021 999h-786q-13-2-22-11t-9-22V67q0-23 28-33 85-34 181-34 195 0 338 131.5T1911 455q53-22 110-22 117 0 200 83t83 201z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$1 =
+const optimizedSVGDataUri$5 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3e%3cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24ZM40 128a88 88 0 0 1 150.2-62.2L65.8 190.2A87.7 87.7 0 0 1 40 128Z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri =
+const optimizedSVGDataUri$4 =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='23.90976501025463 25.20464974120776 126.4822541859144 128.7097615525036' width='122.48' height='124.71'%3e%3cdefs%3e%3cpath d='M85.45 26.2L140 57.58L85.45 85.4L30.91 57.58L85.45 26.2Z' id='a1uePnz4ps'%3e%3c/path%3e%3cpath d='M79.91 150.91L24.91 124.08L25 70L80 97.88L79.91 150.91Z' id='e2gEmj1vzg'%3e%3c/path%3e%3cpath d='M147.39 123.62L146.4 69.17L92.61 97.3L93.59 150.83L147.39 123.62Z' id='flL3aFB8'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23a1uePnz4ps' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23e2gEmj1vzg' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23flL3aFB8' opacity='1' fill='%23ffff72' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
 function applyContrastSensitiveStyleToElement(context, cssClass, element) {
@@ -236,7 +233,7 @@ function createScreenshotButton(context, mainUIRow) {
     .concat(style.screenshotButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-screenshotButton"><img src="')
-    .concat(optimizedSVGDataUri$9, '" alt="screenshot" /></label>')
+    .concat(optimizedSVGDataUri$d, '" alt="screenshot" /></label>')
   screenshotButton.children[0]
   var screenshotLabel = screenshotButton.children[1]
   applyContrastSensitiveStyleToElement(
@@ -313,7 +310,6 @@ var arrayLikeToArray$1 = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(arrayLikeToArray$1)
-
 ;(function(module) {
   var arrayLikeToArray = arrayLikeToArray$1.exports
 
@@ -375,7 +371,6 @@ var nonIterableSpread$1 = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableSpread$1)
-
 ;(function(module) {
   var arrayWithoutHoles = arrayWithoutHoles$1.exports
 
@@ -449,7 +444,7 @@ function createFullscreenButton(context, mainUIRow) {
       .concat(style.fullscreenButton, ' ')
       .concat(style.toggleButton, '" for="')
       .concat(context.id, '-toggleFullscreenButton"><img src="')
-      .concat(optimizedSVGDataUri$r, '" alt="fullscreen"/></label>')
+      .concat(optimizedSVGDataUri$v, '" alt="fullscreen"/></label>')
     fullscreenButton.children[0]
     fullscreenButton.children[1]
     applyContrastSensitiveStyleToElement(
@@ -494,7 +489,7 @@ function createRotateButton(context, mainUIRow) {
     .concat(style.rotateButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleRotateButton"><img src="')
-    .concat(optimizedSVGDataUri$c, '" alt="rotate"/></label>')
+    .concat(optimizedSVGDataUri$g, '" alt="rotate"/></label>')
   var rotateButtonInput = rotateButton.children[0]
   var rotateButtonLabel = rotateButton.children[1]
   context.main.rotateButtonLabel = rotateButtonLabel
@@ -531,7 +526,7 @@ function createAnnotationsButton(context, mainUIRow) {
     .concat(style.annotationsButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleAnnotationsButton"><img src="')
-    .concat(optimizedSVGDataUri$w, '" alt="annotations"/></label>')
+    .concat(optimizedSVGDataUri$z, '" alt="annotations"/></label>')
   var annotationsButtonInput = annotationsButton.children[0]
   var annotationsButtonLabel = annotationsButton.children[1]
   context.main.annotationsButtonLabel = annotationsButtonLabel
@@ -567,7 +562,7 @@ function createAxesButton(context, mainUIRow) {
     .concat(style.axesButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleAxesButton"><img src="')
-    .concat(optimizedSVGDataUri$v, '" alt="axes"/></label>')
+    .concat(optimizedSVGDataUri$y, '" alt="axes"/></label>')
   var axesButtonInput = axesButton.children[0]
   var axesButtonLabel = axesButton.children[1]
   context.main.axesButtonLabel = axesButtonLabel
@@ -598,7 +593,7 @@ function createViewPlanesToggle(context, volumeRow) {
     .concat(style.viewPlanesButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-toggleSlicingPlanesButton"><img src="')
-    .concat(optimizedSVGDataUri$5, '" alt="view planes" /></label>')
+    .concat(optimizedSVGDataUri$9, '" alt="view planes" /></label>')
   var viewPlanesButtonInput = viewPlanesButton.children[0]
   var viewPlanesButtonLabel = viewPlanesButton.children[1]
   context.main.viewPlanesButton = viewPlanesButton
@@ -713,7 +708,6 @@ var arrayLikeToArray = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(arrayLikeToArray)
-
 ;(function(module) {
   var arrayLikeToArray$1 = arrayLikeToArray.exports
 
@@ -745,7 +739,6 @@ var nonIterableRest$1 = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableRest$1)
-
 ;(function(module) {
   var arrayWithHoles = arrayWithHoles$1.exports
 
@@ -868,7 +861,6 @@ var nonIterableSpread = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableSpread)
-
 ;(function(module) {
   var arrayWithoutHoles$1 = arrayWithoutHoles.exports
 
@@ -936,7 +928,6 @@ var isNativeReflectConstruct = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(isNativeReflectConstruct)
-
 ;(function(module) {
   var setPrototypeOf$1 = setPrototypeOf.exports
 
@@ -1342,7 +1333,6 @@ var getPrototypeOf = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(getPrototypeOf)
-
 ;(function(module) {
   var getPrototypeOf$1 = getPrototypeOf.exports
 
@@ -1359,7 +1349,6 @@ var getPrototypeOf = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(superPropBase)
-
 ;(function(module) {
   var superPropBase$1 = superPropBase.exports
 
@@ -1439,7 +1428,6 @@ var assertThisInitialized = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(assertThisInitialized)
-
 ;(function(module) {
   var _typeof$1 = _typeof.exports['default']
 
@@ -1475,7 +1463,6 @@ var isNativeFunction = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(isNativeFunction)
-
 ;(function(module) {
   var getPrototypeOf$1 = getPrototypeOf.exports
 
@@ -1598,7 +1585,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$4, '" alt="visible" /></label>')
+    .concat(optimizedSVGDataUri$8, '" alt="visible" /></label>')
   xPlaneVisibleButton.children[0]
   xPlaneVisibleButton.children[1]
   xPlaneRow.appendChild(xPlaneVisibleButton)
@@ -1615,7 +1602,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlaneInvisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$m, '" alt="invisible" /></label>')
+    .concat(optimizedSVGDataUri$q, '" alt="invisible" /></label>')
   xPlaneInvisibleButton.children[0]
   xPlaneInvisibleButton.children[1]
   xPlaneRow.appendChild(xPlaneInvisibleButton)
@@ -1664,7 +1651,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlanePauseButton"><img src="')
-    .concat(optimizedSVGDataUri$i, '" alt="pause" /></label>')
+    .concat(optimizedSVGDataUri$m, '" alt="pause" /></label>')
   xPlanePauseButton.children[0]
   xPlanePauseButton.children[1]
   xPlaneRow.appendChild(xPlanePauseButton)
@@ -1681,7 +1668,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlanePlayButton"><img src="')
-    .concat(optimizedSVGDataUri$h, '" alt="play"/></label>')
+    .concat(optimizedSVGDataUri$l, '" alt="play"/></label>')
   xPlanePlayButton.children[0]
   xPlanePlayButton.children[1]
   xPlaneRow.appendChild(xPlanePlayButton)
@@ -1759,7 +1746,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$4, '" alt="visible"/></label>')
+    .concat(optimizedSVGDataUri$8, '" alt="visible"/></label>')
   yPlaneVisibleButton.children[0]
   yPlaneVisibleButton.children[1]
   yPlaneRow.appendChild(yPlaneVisibleButton)
@@ -1775,7 +1762,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlaneInvisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$m, '" alt="invisible" /></label>')
+    .concat(optimizedSVGDataUri$q, '" alt="invisible" /></label>')
   yPlaneInvisibleButton.children[0]
   yPlaneInvisibleButton.children[1]
   yPlaneRow.appendChild(yPlaneInvisibleButton)
@@ -1824,7 +1811,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlanePauseButton"><img src="')
-    .concat(optimizedSVGDataUri$i, '" alt="pause" /></label>')
+    .concat(optimizedSVGDataUri$m, '" alt="pause" /></label>')
   yPlanePauseButton.children[0]
   yPlanePauseButton.children[1]
   yPlaneRow.appendChild(yPlanePauseButton)
@@ -1841,7 +1828,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlanePlayButton"><img src="')
-    .concat(optimizedSVGDataUri$h, '" alt="play"/></label>')
+    .concat(optimizedSVGDataUri$l, '" alt="play"/></label>')
   yPlanePlayButton.children[0]
   yPlanePlayButton.children[1]
   yPlaneRow.appendChild(yPlanePlayButton)
@@ -1919,7 +1906,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$4, '" alt="visible" /></label>')
+    .concat(optimizedSVGDataUri$8, '" alt="visible" /></label>')
   zPlaneVisibleButton.children[0]
   zPlaneVisibleButton.children[1]
   zPlaneRow.appendChild(zPlaneVisibleButton)
@@ -1935,7 +1922,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlaneInvisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$m, '" alt="invisible" /></label>')
+    .concat(optimizedSVGDataUri$q, '" alt="invisible" /></label>')
   zPlaneInvisibleButton.children[0]
   zPlaneInvisibleButton.children[1]
   zPlaneRow.appendChild(zPlaneInvisibleButton)
@@ -1984,7 +1971,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlanePauseButton"><img src="')
-    .concat(optimizedSVGDataUri$i, '" alt="pause" /></label>')
+    .concat(optimizedSVGDataUri$m, '" alt="pause" /></label>')
   zPlanePauseButton.children[0]
   zPlanePauseButton.children[1]
   zPlaneRow.appendChild(zPlanePauseButton)
@@ -2001,7 +1988,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlanePlayButton"><img src="')
-    .concat(optimizedSVGDataUri$h, '" alt="play" /></label>')
+    .concat(optimizedSVGDataUri$l, '" alt="play" /></label>')
   zPlanePlayButton.children[0]
   zPlanePlayButton.children[1]
   zPlaneRow.appendChild(zPlanePlayButton)
@@ -2084,7 +2071,7 @@ function createBackgroundColorButton(context, mainUIRow) {
     .concat(style.bgColorButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-bgColorButton"><img src="')
-    .concat(optimizedSVGDataUri$8, '" alt="select color" /></label>')
+    .concat(optimizedSVGDataUri$c, '" alt="select color" /></label>')
   var bgColorButtonInput = bgColorButton.children[0]
   var bgColorButtonLabel = bgColorButton.children[1]
   context.main.bgColorButtonLabel = bgColorButtonLabel
@@ -2125,7 +2112,7 @@ function createCroppingButtons(context, mainUIRow) {
     .concat(style.cropButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-toggleCroppingPlanesButton"><img src="')
-    .concat(optimizedSVGDataUri$s, '" alt="crop"/></label>')
+    .concat(optimizedSVGDataUri$w, '" alt="crop"/></label>')
   var cropButtonInput = cropButton.children[0]
   var cropButtonLabel = cropButton.children[1]
   context.main.cropButtonLabel = cropButtonLabel
@@ -2152,7 +2139,7 @@ function createCroppingButtons(context, mainUIRow) {
     .concat(style.resetCropButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-resetCroppingPlanesButton"><img src="')
-    .concat(optimizedSVGDataUri$e, '" alt="reset crop"/></label>')
+    .concat(optimizedSVGDataUri$i, '" alt="reset crop"/></label>')
   var resetCropButtonLabel = resetCropButton.children[1]
   context.main.resetCropButtonLabel = resetCropButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2188,7 +2175,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-xPlaneButton"><img src="')
-    .concat(optimizedSVGDataUri$g, '" alt="x plane"/></label>')
+    .concat(optimizedSVGDataUri$k, '" alt="x plane"/></label>')
   var xPlaneButtonLabel = xPlaneButton.children[1]
   context.main.xPlaneButtonLabel = xPlaneButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2216,7 +2203,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-yPlaneButton"><img src="')
-    .concat(optimizedSVGDataUri, '" alt="y plane" /></label>')
+    .concat(optimizedSVGDataUri$4, '" alt="y plane" /></label>')
   var yPlaneButtonLabel = yPlaneButton.children[1]
   context.main.yPlaneButtonLabel = yPlaneButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2244,7 +2231,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-zPlaneButton"><img src="')
-    .concat(optimizedSVGDataUri$p, '" alt="z plane" /></label>')
+    .concat(optimizedSVGDataUri$t, '" alt="z plane" /></label>')
   var zPlaneButtonLabel = zPlaneButton.children[1]
   context.main.zPlaneButtonLabel = zPlaneButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2272,7 +2259,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-volumeButton"><img src="')
-    .concat(optimizedSVGDataUri$3, '" alt="volume" /></label>')
+    .concat(optimizedSVGDataUri$7, '" alt="volume" /></label>')
   var volumeButtonLabel = volumeButton.children[1]
   context.main.volumeButtonLabel = volumeButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2303,7 +2290,7 @@ function createResetCameraButton(context, mainUIRow) {
     .concat(style.resetCameraButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-resetCameraButton"><img src="')
-    .concat(optimizedSVGDataUri$f, '" alt="reset camera" /></label>')
+    .concat(optimizedSVGDataUri$j, '" alt="reset camera" /></label>')
   var resetCameraButtonLabel = resetCameraButton.children[1]
   context.main.resetCameraButtonLabel = resetCameraButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2693,6 +2680,18 @@ function createLayersInterface(context) {
   context.layers.compareContainer = compareContainer
 }
 
+const optimizedSVGDataUri$3 =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M17 22v-2h3v-3h2v3.5c0 .39-.16.74-.46 1.04c-.3.3-.65.46-1.04.46H17M7 22H3.5c-.39 0-.74-.16-1.04-.46c-.3-.3-.46-.65-.46-1.04V17h2v3h3v2M17 2h3.5c.39 0 .74.16 1.04.46c.3.3.46.65.46 1.04V7h-2V4h-3V2M7 2v2H4v3H2V3.5c0-.39.16-.74.46-1.04c.3-.3.65-.46 1.04-.46H7m6 15.25l4-2.3v-4.59l-4 2.3v4.59m-1-6.33l4-2.29l-4-2.35l-4 2.35l4 2.29m-5 4.03l4 2.3v-4.59l-4-2.3v4.59m11.23-7.36c.5.32.77.75.77 1.32v6.32c0 .57-.27 1-.77 1.32l-5.48 3.18c-.5.32-1 .32-1.5 0l-5.48-3.18c-.5-.32-.77-.75-.77-1.32V8.91c0-.57.27-1 .77-1.32l5.48-3.18c.25-.13.5-.19.75-.19s.5.06.75.19l5.48 3.18Z'/%3e%3c/svg%3e"
+
+const optimizedSVGDataUri$2 =
+  "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e %3csvg fill='black' width='800px' height='800px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.293%2c13.707a1%2c1%2c0%2c1%2c1%2c1.414-1.414L11%2c14.586V3a1%2c1%2c0%2c0%2c1%2c2%2c0V14.586l2.293-2.293a1%2c1%2c0%2c0%2c1%2c1.414%2c1.414l-4%2c4a1%2c1%2c0%2c0%2c1-.325.216.986.986%2c0%2c0%2c1-.764%2c0%2c1%2c1%2c0%2c0%2c1-.325-.216ZM22%2c12a1%2c1%2c0%2c0%2c0-1%2c1v7H3V13a1%2c1%2c0%2c0%2c0-2%2c0v8a1%2c1%2c0%2c0%2c0%2c1%2c1H22a1%2c1%2c0%2c0%2c0%2c1-1V13A1%2c1%2c0%2c0%2c0%2c22%2c12Z'/%3e%3c/svg%3e"
+
+const optimizedSVGDataUri$1 =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1344'%3e%3cpath d='M555 1047l78-141q-87-63-136-159t-49-203q0-121 61-225-229 117-381 353 167 258 427 375zm389-759q0-20-14-34t-34-14q-125 0-214.5 89.5T592 544q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm363-191q0 7-1 9-105 188-315 566t-316 567l-49 89q-10 16-28 16-12 0-134-70-16-10-16-28 0-12 44-87-143-65-263.5-173T20 741Q0 710 0 672t20-69q153-235 380-371T896 96q89 0 180 17l54-97q10-16 28-16 5 0 18 6t31 15.5 33 18.5 31.5 18.5T1291 70q16 10 16 27zm37 447q0 139-79 253.5T1056 962l280-502q8 45 8 84zm448 128q0 35-20 69-39 64-109 145-150 172-347.5 267T896 1248l74-132q212-18 392.5-137T1664 672q-115-179-282-294l63-112q95 64 182.5 153T1772 603q20 34 20 69z'/%3e%3c/svg%3e"
+
+const optimizedSVGDataUri =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1152'%3e%3cpath d='M1664 576q-152-236-381-353 61 104 61 225 0 185-131.5 316.5T896 896 579.5 764.5 448 448q0-121 61-225-229 117-381 353 133 205 333.5 326.5T896 1024t434.5-121.5T1664 576zM944 192q0-20-14-34t-34-14q-125 0-214.5 89.5T592 448q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5T896 1152t-499.5-139T20 645Q0 610 0 576t20-69q140-229 376.5-368T896 0t499.5 139T1772 507q20 35 20 69z'/%3e%3c/svg%3e"
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -7891,11 +7890,11 @@ let LayerIcon = class LayerIcon extends s$4 {
         this.otherImages.value &&
         this.otherImages.value.length > 0
       )
-        return { icon: optimizedSVGDataUri$6, alt: 'settings' }
-      return { icon: optimizedSVGDataUri$o, alt: 'image' }
+        return { icon: optimizedSVGDataUri$a, alt: 'settings' }
+      return { icon: optimizedSVGDataUri$s, alt: 'image' }
     }
     if (this.layer.type === 'labelImage')
-      return { icon: optimizedSVGDataUri$l, alt: 'labels' }
+      return { icon: optimizedSVGDataUri$p, alt: 'labels' }
     throw new Error(`Unsupported layer type: ${this.layer.type}`)
   }
   render() {
@@ -7944,7 +7943,7 @@ function createLayerEntry(context, name, layer) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-visibleButton"><img src="')
-    .concat(optimizedSVGDataUri$4, '" alt="visible"/></label>')
+    .concat(optimizedSVGDataUri, '" alt="visible"/></label>')
   var visibleLabel = visibleButton.children[1]
   applyContrastSensitiveStyleToElement(
     context,
@@ -7962,7 +7961,7 @@ function createLayerEntry(context, name, layer) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-invisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$m, ' alt="invisible""/></label>')
+    .concat(optimizedSVGDataUri$1, ' alt="invisible""/></label>')
   var invisibleLabel = invisibleButton.children[1]
   applyContrastSensitiveStyleToElement(
     context,
@@ -8009,66 +8008,69 @@ function createLayerEntry(context, name, layer) {
   spinner.innerHTML = '<div></div><div></div><div></div><div></div>'
   imageIcons.appendChild(spinner)
   layer.spinner = spinner
-  var downloadImage = document.createElement('div')
-  downloadImage.innerHTML = '\n  <input type="checkbox" id='
-    .concat(context.id, '-download-image" class="')
+  var layerBBoxButton = document.createElement('div')
+  layerBBoxButton.innerHTML = '<input id="'
+    .concat(context.id, '-layerBBoxButton" type="checkbox" class="')
     .concat(
       style.toggleInput,
-      '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="'
+      '"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="'
     )
     .concat(style.toggleButton, '" for="')
-    .concat(context.id, '-download-image">\n    <img src="')
-    .concat(optimizedSVGDataUri$t, '" />\n  </label>\n  ')
-  var downloadImageLabel = downloadImage.children[1]
-  downloadImage.style.height = '23px'
+    .concat(context.id, '-layerBBoxButton"><img src="')
+    .concat(optimizedSVGDataUri$3, '" alt="bbox"/></label>')
+  var layerBBoxButtonInput = layerBBoxButton.children[0]
+  var layerBBoxLabel = layerBBoxButton.children[1]
+  layerBBoxButton.style.height = '23px'
   applyContrastSensitiveStyleToElement(
     context,
     'invertibleButton',
-    downloadImageLabel
+    layerBBoxLabel
   )
-  imageIcons.appendChild(downloadImage)
-  downloadImage.addEventListener('click', function(event) {
+  imageIcons.appendChild(layerBBoxButton)
+  layerBBoxButton.addEventListener('click', function(event) {
     event.preventDefault()
     event.stopPropagation()
     context.service.send({
-      type: 'DOWNLOAD_IMAGE',
+      type: 'TOGGLE_LAYER_BBOX',
       data: {
         name: context.images.selectedName,
         layerName: name,
       },
     })
+    var actorContext = context.layers.actorContext.get(name)
+    layerBBoxButtonInput.checked = actorContext.bbox
   })
-  var layerBBoxButton = document.createElement('div')
-  layerBBoxButton.innerHTML = '<input id="'
-    .concat(context.id, '-layerBBoxButton" type="checkbox" class="')
+  var downloadImage = document.createElement('div')
+  downloadImage.innerHTML = '\n  <input type="checkbox" checked id='
+    .concat(context.id, '-download-image" class="')
     .concat(
       style.toggleInput,
-      '"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="'
+      '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="'
     )
     .concat(style.toggleButton, '" for="')
-    .concat(context.id, '-layerBBoxButton"><img src="')
-    .concat(optimizedSVGDataUri$t, '" alt="bbox"/></label>')
-  var layerBBoxButtonInput = layerBBoxButton.children[0]
-  var layerBBoxLabel = layerBBoxButton.children[1]
-  layerBBoxButton.style.height = '23px'
+    .concat(
+      context.id,
+      '-download-image">\n    <img style="height: 23px" src="'
+    )
+    .concat(optimizedSVGDataUri$2, '" />\n  </label>\n  ')
+  var downloadImageLabel = downloadImage.children[1]
+  downloadImage.style.height = '23px'
   applyContrastSensitiveStyleToElement(
     context,
     'invertibleButton',
-    layerBBoxLabel
+    downloadImageLabel
   )
-  imageIcons.appendChild(layerBBoxButton)
-  layerBBoxButton.addEventListener('click', function(event) {
+  imageIcons.appendChild(downloadImage)
+  downloadImage.addEventListener('click', function(event) {
     event.preventDefault()
     event.stopPropagation()
     context.service.send({
-      type: 'TOGGLE_LAYER_BBOX',
+      type: 'DOWNLOAD_IMAGE',
       data: {
         name: context.images.selectedName,
         layerName: name,
       },
     })
-    var actorContext = context.layers.actorContext.get(name)
-    layerBBoxButtonInput.checked = actorContext.bbox
   })
   var icon = makeHtml(
     '<layer-icon class="'.concat(style.layerIcon, '"></layer-icon>')
@@ -8223,7 +8225,6 @@ var nonIterableRest = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableRest)
-
 ;(function(module) {
   var arrayWithHoles$1 = arrayWithHoles.exports
 
@@ -8319,7 +8320,6 @@ var iterableToArrayLimit = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(iterableToArrayLimit)
-
 ;(function(module) {
   var arrayWithHoles$1 = arrayWithHoles.exports
 
@@ -8436,7 +8436,7 @@ var compareUI = function compareUI(context) {
         .concat(style.noFlexBasis, ' ')
         .concat(style.toggleButton, '" for="')
         .concat(playImageMixButtonId, '">\n          <img src="')
-        .concat(optimizedSVGDataUri$h, '" id="')
+        .concat(optimizedSVGDataUri$l, '" id="')
         .concat(
           playImageMixImgId,
           '" alt="animate" />\n        </label>\n      </input>\n      <input type="range" min="0" max="1" step=".01" value=".5" \n        class="'
@@ -8451,7 +8451,7 @@ var compareUI = function compareUI(context) {
         .concat(style.rotateButton, ' ')
         .concat(style.toggleButton, '">\n          <img src="')
         .concat(
-          optimizedSVGDataUri$c,
+          optimizedSVGDataUri$g,
           '" alt="rotate"/>\n        </label>\n      </input>\n    </div>\n  '
         )
     )
@@ -8521,8 +8521,8 @@ var compareUI = function compareUI(context) {
         imageContext !== null &&
         imageContext !== void 0 &&
         imageContext.imageMixAnimation
-          ? optimizedSVGDataUri$i
-          : optimizedSVGDataUri$h
+          ? optimizedSVGDataUri$m
+          : optimizedSVGDataUri$l
     }
     update()
     var updateCompare = function updateCompare(options) {
@@ -8711,7 +8711,7 @@ function createInterpolationButton(context, uiRow) {
     .concat(style.interpolationButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleInterpolationButton"><img src="')
-    .concat(optimizedSVGDataUri$n, '" alt="interpolation" /></label>')
+    .concat(optimizedSVGDataUri$r, '" alt="interpolation" /></label>')
   var interpolationButtonInput = interpolationButton.children[0]
   var interpolationButtonLabel = interpolationButton.children[1]
   context.images.interpolationButtonLabel = interpolationButtonLabel
@@ -21736,7 +21736,7 @@ function createWindowLevelReset(context, uiContainer) {
   var windowLevelResetButton = document.createElement('div')
   windowLevelResetButton.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Reset range to ROI" class="'
     .concat(style.windowLevelButton, '">\n      <img src="')
-    .concat(optimizedSVGDataUri$d, '" alt="gradient opacity"/>\n    </div>\n  ')
+    .concat(optimizedSVGDataUri$h, '" alt="gradient opacity"/>\n    </div>\n  ')
   var windowLevelResetButtonInput = windowLevelResetButton.children[0]
   var windowLevelResetButtonLabel = windowLevelResetButton.children[1]
   applyContrastSensitiveStyleToElement(
@@ -22680,7 +22680,7 @@ function createShadowToggle(context, uiContainer) {
     .concat(style.shadowButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleShadowButton"><img src="')
-    .concat(optimizedSVGDataUri$7, '" alt="shadow" /></label>')
+    .concat(optimizedSVGDataUri$b, '" alt="shadow" /></label>')
   var shadowButtonInput = shadowButton.children[0]
   var shadowButtonLabel = shadowButton.children[1]
   applyContrastSensitiveStyleToElement(
@@ -22707,7 +22707,7 @@ function createGradientOpacitySlider(context, uiContainer) {
   sliderEntry.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-fullscreen itk-vtk-tooltip-content="Gradient opacity scale" class="'
     .concat(style.gradientOpacitySlider, '">\n      <img src="')
     .concat(
-      optimizedSVGDataUri$q,
+      optimizedSVGDataUri$u,
       '" alt="gradient opacity"/>\n    </div>\n    <div class="'
     )
     .concat(
@@ -22770,7 +22770,7 @@ function createSampleDistanceSlider(context, uiContainer) {
   sliderEntry.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-screenshot itk-vtk-tooltip-content="Volume sample distance" class="'
     .concat(style.sampleDistanceButton, '">\n      <img src="')
     .concat(
-      optimizedSVGDataUri$b,
+      optimizedSVGDataUri$f,
       '" alt="sample distance" />\n    </div>\n    <input type="range" min="0" max="1" value="0.25" step="0.01"\n      class="'
     )
     .concat(style.slider, ' ')
@@ -22800,7 +22800,7 @@ function createBlendModeSelector(context, uiContainer) {
   var blendModeEntry = document.createElement('div')
   blendModeEntry.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Blend mode"\n      class="'
     .concat(style.blendModeButton, '">\n      <img src="')
-    .concat(optimizedSVGDataUri$u, '" alt="blend mode" />\n    </div>\n    ')
+    .concat(optimizedSVGDataUri$x, '" alt="blend mode" />\n    </div>\n    ')
   var blendModeDiv = blendModeEntry.children[0]
   context.images.blendModeDiv = blendModeDiv
   applyContrastSensitiveStyleToElement(
@@ -22856,7 +22856,7 @@ function makeSlider(context, label, parameterName, _ref) {
   container.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-screenshot itk-vtk-tooltip-content="'
     .concat(label, '" class="')
     .concat(style.sliderIcon, '">\n      <img src="')
-    .concat(optimizedSVGDataUri$2, '" alt="')
+    .concat(optimizedSVGDataUri$6, '" alt="')
     .concat(label, '" />\n    </div>\n    <input type="range" min="')
     .concat(min, '" max="')
     .concat(max, '" step="')
@@ -22918,7 +22918,7 @@ function createWindowLevelToggle(context, uiContainer) {
     .concat(style.windowLevelButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-windowLevelToggle"><img src="')
-    .concat(optimizedSVGDataUri$1, '" alt="Window/Level" /></label>')
+    .concat(optimizedSVGDataUri$5, '" alt="Window/Level" /></label>')
   var windowLevelToggleInput = windowLevelToggle.children[0]
   var windowLevelToggleLabel = windowLevelToggle.children[1]
   applyContrastSensitiveStyleToElement(
@@ -23104,7 +23104,7 @@ function createLabelImageColorWidget(context) {
   sliderEntry.innerHTML = '\n  <div itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label image blend" class="'
     .concat(style.gradientOpacitySlider, '">\n    <img src="')
     .concat(
-      optimizedSVGDataUri$j,
+      optimizedSVGDataUri$n,
       '" alt="opacity"/>\n  </div>\n  <input type="range" min="0" max="1" value="0.5" step="0.01"\n  id="'
     )
     .concat(context.id, '-labelImageBlendSlider"\n  class="')
@@ -23820,7 +23820,7 @@ var scaleSelector = function scaleSelector(context, event) {
     scaleSelectorDiv.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-screenshot itk-vtk-tooltip-content="Resolution Scale"\n      class="'
       .concat(style.blendModeButton, '">\n      <img src="')
       .concat(
-        optimizedSVGDataUri$a,
+        optimizedSVGDataUri$e,
         '" alt="Resolution Scale" />\n    </div>\n    '
       )
     var scaleSelectorIcon = scaleSelectorDiv.children[0]
@@ -24005,7 +24005,7 @@ function createDistanceWidget(context, widgetsUIGroup) {
     .concat(style.distanceButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-toggleDistanceButton"><img src="')
-    .concat(optimizedSVGDataUri$k, '" alt="distance"/></label>')
+    .concat(optimizedSVGDataUri$o, '" alt="distance"/></label>')
   context.widgets.distanceButtonInput = distanceButton.children[0]
   context.widgets.distanceButtonInput.checked = context.widgets.distanceEnabled
   var distanceButtonLabel = distanceButton.children[1]
@@ -24701,7 +24701,7 @@ let CollapseUi = class CollapseUi extends s$4 {
   render() {
     return y`
       <md-standard-icon-button @click=${this.toggleUi}>
-        <img src="${optimizedSVGDataUri$6}" alt="toggle" class="icon" />
+        <img src="${optimizedSVGDataUri$a}" alt="toggle" class="icon" />
       </md-standard-icon-button>
     `
   }
diff --git a/src/UI/reference-ui/package-lock.json b/src/UI/reference-ui/package-lock.json
index 1a58e0c0..91acb111 100644
--- a/src/UI/reference-ui/package-lock.json
+++ b/src/UI/reference-ui/package-lock.json
@@ -10,6 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.17.6",
+        "@itk-viewer/icons": "^11.14.1",
         "@lit-labs/context": "^0.2.0",
         "@material/web": "^1.0.0-pre.4",
         "itk-viewer-color-maps": "^1.2.0",
@@ -567,6 +568,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@itk-viewer/icons": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@itk-viewer/icons/-/icons-11.14.1.tgz",
+      "integrity": "sha512-JjUzkfzNtc3pq/LdDI0fCrjuDjmnujpz6lL+L8rKjZr8fTGuo5LTP4tg/yHOD9ieAZEt4ZDWZh7wS8vPdTMhkw=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
@@ -3330,6 +3336,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@itk-viewer/icons": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@itk-viewer/icons/-/icons-11.14.1.tgz",
+      "integrity": "sha512-JjUzkfzNtc3pq/LdDI0fCrjuDjmnujpz6lL+L8rKjZr8fTGuo5LTP4tg/yHOD9ieAZEt4ZDWZh7wS8vPdTMhkw=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.1.tgz",
diff --git a/src/UI/reference-ui/package.json b/src/UI/reference-ui/package.json
index 2650b1ec..3de05122 100644
--- a/src/UI/reference-ui/package.json
+++ b/src/UI/reference-ui/package.json
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.6",
+    "@itk-viewer/icons": "^11.14.1",
     "@lit-labs/context": "^0.2.0",
     "@material/web": "^1.0.0-pre.4",
     "itk-viewer-color-maps": "^1.2.0",
diff --git a/src/UI/reference-ui/src/Layers/createLayerInterface.js b/src/UI/reference-ui/src/Layers/createLayerInterface.js
index bf904f70..3571d582 100644
--- a/src/UI/reference-ui/src/Layers/createLayerInterface.js
+++ b/src/UI/reference-ui/src/Layers/createLayerInterface.js
@@ -1,11 +1,12 @@
-import style from '../ItkVtkViewer.module.css'
-
-import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import {
-  visibleIconDataUri,
   invisibleIconDataUri,
   boundingBoxIconDataUri,
-} from 'itk-viewer-icons'
+  downloadIconDataUri,
+  visibleIconDataUri,
+} from '@itk-viewer/icons'
+import style from '../ItkVtkViewer.module.css'
+
+import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import { makeHtml } from '../utils'
 import './layerIcon.js'
 
@@ -73,57 +74,56 @@ function createLayerEntry(context, name, layer) {
 
   layer.spinner = spinner
 
-  const downloadImage = document.createElement('div')
-  downloadImage.innerHTML = `
-  <input type="checkbox" id=${context.id}-download-image" class="${style.toggleInput}" />
-  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="${style.toggleButton}" for="${context.id}-download-image">
-    <img src="${boundingBoxIconDataUri}" />
-  </label>
-  `
-
-  const downloadImageLabel = downloadImage.children[1]
-  downloadImage.style.height = '23px'
+  const layerBBoxButton = document.createElement('div')
+  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
+  const layerBBoxButtonInput = layerBBoxButton.children[0]
+  const layerBBoxLabel = layerBBoxButton.children[1]
+  layerBBoxButton.style.height = '23px'
   applyContrastSensitiveStyleToElement(
     context,
     'invertibleButton',
-    downloadImageLabel
+    layerBBoxLabel
   )
-  imageIcons.appendChild(downloadImage)
-  downloadImage.addEventListener('click', event => {
+  imageIcons.appendChild(layerBBoxButton)
+  layerBBoxButton.addEventListener('click', event => {
     event.preventDefault()
     event.stopPropagation()
     context.service.send({
-      type: 'DOWNLOAD_IMAGE',
+      type: 'TOGGLE_LAYER_BBOX',
       data: {
         name: context.images.selectedName,
         layerName: name,
       },
     })
+    const actorContext = context.layers.actorContext.get(name)
+    layerBBoxButtonInput.checked = actorContext.bbox
   })
 
-  const layerBBoxButton = document.createElement('div')
-  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
-  const layerBBoxButtonInput = layerBBoxButton.children[0]
-  const layerBBoxLabel = layerBBoxButton.children[1]
-  layerBBoxButton.style.height = '23px'
+  const downloadImage = document.createElement('div')
+  downloadImage.innerHTML = `
+  <input type="checkbox" checked id=${context.id}-download-image" class="${style.toggleInput}" />
+  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="${style.toggleButton}" for="${context.id}-download-image">
+    <img style="height: 23px" src="${downloadIconDataUri}" />
+  </label>
+  `
+  const downloadImageLabel = downloadImage.children[1]
+  downloadImage.style.height = '23px'
   applyContrastSensitiveStyleToElement(
     context,
     'invertibleButton',
-    layerBBoxLabel
+    downloadImageLabel
   )
-  imageIcons.appendChild(layerBBoxButton)
-  layerBBoxButton.addEventListener('click', event => {
+  imageIcons.appendChild(downloadImage)
+  downloadImage.addEventListener('click', event => {
     event.preventDefault()
     event.stopPropagation()
     context.service.send({
-      type: 'TOGGLE_LAYER_BBOX',
+      type: 'DOWNLOAD_IMAGE',
       data: {
         name: context.images.selectedName,
         layerName: name,
       },
     })
-    const actorContext = context.layers.actorContext.get(name)
-    layerBBoxButtonInput.checked = actorContext.bbox
   })
 
   const icon = makeHtml(`<layer-icon class="${style.layerIcon}"></layer-icon>`)

From 34100f2404fd6f89030aae34e7a920eba65cb956 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 1 Dec 2023 16:01:56 -0500
Subject: [PATCH 4/7] refactor(ui): swap itk-viewer-icons with
 @itk-viewer/icons

---
 package-lock.json                             | 563 ------------------
 package.json                                  |   1 -
 .../dist/referenceUIMachineOptions.js         | 192 +++---
 src/UI/reference-ui/package-lock.json         |  11 -
 src/UI/reference-ui/package.json              |   1 -
 src/UI/reference-ui/src/Images/cinematic.js   |   2 +-
 .../src/Images/createBlendModeSelector.js     |   2 +-
 .../src/Images/createGradientOpacitySlider.js |   2 +-
 .../src/Images/createInterpolationButton.js   |   2 +-
 .../src/Images/createLabelImageColorWidget.js |   2 +-
 .../src/Images/createSampleDistanceSlider.js  |   2 +-
 .../src/Images/createShadowToggle.js          |   2 +-
 .../src/Images/createWindowLevelReset.js      |   2 +-
 .../src/Images/createWindowLevelToggle.js     |   2 +-
 .../reference-ui/src/Images/scaleSelector.js  |   2 +-
 src/UI/reference-ui/src/Layers/compareUI.js   |   2 +-
 src/UI/reference-ui/src/Layers/layerIcon.ts   |   2 +-
 .../src/Main/createAnnotationsButton.js       |   2 +-
 .../reference-ui/src/Main/createAxesButton.js |   2 +-
 .../src/Main/createBackgroundColorButton.js   |   2 +-
 .../src/Main/createCroppingButtons.js         |   2 +-
 .../src/Main/createFullscreenButton.js        |   2 +-
 .../src/Main/createPlaneSliders.js            |   2 +-
 .../src/Main/createResetCameraButton.js       |   2 +-
 .../src/Main/createRotateButton.js            |   2 +-
 .../src/Main/createScreenshotButton.js        |   2 +-
 .../src/Main/createViewModeButtons.js         |   2 +-
 .../src/Main/createViewPlanesToggle.js        |   2 +-
 .../src/Widgets/createDistanceWidget.js       |   2 +-
 src/UI/reference-ui/src/collapse-ui.ts        |   2 +-
 30 files changed, 124 insertions(+), 694 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6780f667..f9830e75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,6 @@
         "itk-image-io": "^1.0.0-b.84",
         "itk-mesh-io": "^1.0.0-b.84",
         "itk-viewer-color-maps": "^1.2.0",
-        "itk-viewer-icons": "11.14.0",
         "itk-viewer-transfer-function-editor": "^1.2.5",
         "itk-wasm": "^1.0.0-b.83",
         "mobx": "^5.15.7",
@@ -10539,11 +10538,6 @@
       "resolved": "https://registry.npmjs.org/itk-viewer-color-maps/-/itk-viewer-color-maps-1.2.0.tgz",
       "integrity": "sha512-Ny4LLvVtR2T0c6L9wT+R1MLO4YgsSUWjJZwfHmINiiNTQ5yMR+1tFLLXK5yI4rOudVUS+DoVXd5qAKFOZHRniw=="
     },
-    "node_modules/itk-viewer-icons": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/itk-viewer-icons/-/itk-viewer-icons-11.14.0.tgz",
-      "integrity": "sha512-Yb81spokfdpJ3U7i+zBnkyxg4I4kyFf9LlLex70VxoYF9WzHrrmj+4/UJvgwB7Yk0ms0hD95RtOQj2xIJGzyCQ=="
-    },
     "node_modules/itk-viewer-transfer-function-editor": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/itk-viewer-transfer-function-editor/-/itk-viewer-transfer-function-editor-1.2.5.tgz",
@@ -12989,8 +12983,6 @@
     },
     "node_modules/npm/node_modules/@colors/colors": {
       "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13001,16 +12993,12 @@
     },
     "node_modules/npm/node_modules/@gar/promisify": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
-      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz",
-      "integrity": "sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -13065,8 +13053,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/ci-detect": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/ci-detect/-/ci-detect-2.0.0.tgz",
-      "integrity": "sha512-8yQtQ9ArHh/TzdUDKQwEvwCgpDuhSWTDAbiKMl3854PcT+Dk4UmWaiawuFTLy9n5twzXOBXVflWe+90/ffXQrA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13095,8 +13081,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/disparity-colors": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/disparity-colors/-/disparity-colors-2.0.0.tgz",
-      "integrity": "sha512-FFXGrIjhvd2qSZ8iS0yDvbI7nbjdyT2VNO7wotosjYZM2p2r8PN3B7Om3M5NO9KqW/OVzfzLB3L0V5Vo5QXC7A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13142,8 +13126,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz",
-      "integrity": "sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13203,16 +13185,12 @@
     },
     "node_modules/npm/node_modules/@npmcli/name-from-folder": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@npmcli/name-from-folder/-/name-from-folder-1.0.1.tgz",
-      "integrity": "sha512-qq3oEfcLFwNfEYOQ8HLimRGKlD8WSeGEdtUa7hmzpR8Sa7haL1KVQrvgO6wqMjhWFFVjgtrh1gIxDz+P8sjUaA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/@npmcli/node-gyp": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-2.0.0.tgz",
-      "integrity": "sha512-doNI35wIe3bBaEgrlPfdJPaCpUR89pJWep4Hq3aRdh6gKazIVWfs0jHttvSSoq47ZXgC7h73kDsUl8AoIQUB+A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13222,8 +13200,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/package-json": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-2.0.0.tgz",
-      "integrity": "sha512-42jnZ6yl16GzjWSH7vtrmWyJDGVa/LXPdpN2rcUWolFjc9ON2N3uz0qdBbQACfmhuJZ2lbKYtmK5qx68ZPLHMA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13236,8 +13212,6 @@
     },
     "node_modules/npm/node_modules/@npmcli/promise-spawn": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-3.0.0.tgz",
-      "integrity": "sha512-s9SgS+p3a9Eohe68cSI3fi+hpcZUmXq5P7w0kMlAsWVtR7XbK3ptkZqKT2cK1zLDObJ3sR+8P59sJE0w/KTL1g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13265,8 +13239,6 @@
     },
     "node_modules/npm/node_modules/@tootallnate/once": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13276,16 +13248,12 @@
     },
     "node_modules/npm/node_modules/abbrev": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/agent-base": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13312,8 +13280,6 @@
     },
     "node_modules/npm/node_modules/aggregate-error": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13327,8 +13293,6 @@
     },
     "node_modules/npm/node_modules/ansi-regex": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13338,8 +13302,6 @@
     },
     "node_modules/npm/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13355,16 +13317,12 @@
     },
     "node_modules/npm/node_modules/aproba": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/archy": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-      "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -13384,8 +13342,6 @@
     },
     "node_modules/npm/node_modules/asap": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -13415,8 +13371,6 @@
     },
     "node_modules/npm/node_modules/binary-extensions": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13426,8 +13380,6 @@
     },
     "node_modules/npm/node_modules/brace-expansion": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13437,8 +13389,6 @@
     },
     "node_modules/npm/node_modules/builtins": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-      "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13477,8 +13427,6 @@
     },
     "node_modules/npm/node_modules/chalk": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13495,8 +13443,6 @@
     },
     "node_modules/npm/node_modules/chownr": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13506,8 +13452,6 @@
     },
     "node_modules/npm/node_modules/cidr-regex": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/cidr-regex/-/cidr-regex-3.1.1.tgz",
-      "integrity": "sha512-RBqYd32aDwbCMFJRL6wHOlDNYJsPNTt8vC82ErHF5vKt8QQzxm1FrkW8s/R5pVrXMf17sba09Uoy91PKiddAsw==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -13520,8 +13464,6 @@
     },
     "node_modules/npm/node_modules/clean-stack": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13531,8 +13473,6 @@
     },
     "node_modules/npm/node_modules/cli-columns": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cli-columns/-/cli-columns-4.0.0.tgz",
-      "integrity": "sha512-XW2Vg+w+L9on9wtwKpyzluIPCWXjaBahI7mTcYjx+BVIYD9c3yqcv/yKC7CmdCZat4rq2yiE1UMSJC5ivKfMtQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13561,8 +13501,6 @@
     },
     "node_modules/npm/node_modules/clone": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13572,8 +13510,6 @@
     },
     "node_modules/npm/node_modules/cmd-shim": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-5.0.0.tgz",
-      "integrity": "sha512-qkCtZ59BidfEwHltnJwkyVZn+XQojdAySM1D1gSeh11Z4pW1Kpolkyo53L5noc0nrxmIvyFwTmJRo4xs7FFLPw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13586,8 +13522,6 @@
     },
     "node_modules/npm/node_modules/color-convert": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13600,16 +13534,12 @@
     },
     "node_modules/npm/node_modules/color-name": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/color-support": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13619,8 +13549,6 @@
     },
     "node_modules/npm/node_modules/columnify": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.6.0.tgz",
-      "integrity": "sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13634,32 +13562,24 @@
     },
     "node_modules/npm/node_modules/common-ancestor-path": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
-      "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/concat-map": {
       "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/console-control-strings": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/debug": {
       "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13677,16 +13597,12 @@
     },
     "node_modules/npm/node_modules/debug/node_modules/ms": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/debuglog": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz",
-      "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13696,8 +13612,6 @@
     },
     "node_modules/npm/node_modules/defaults": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13707,8 +13621,6 @@
     },
     "node_modules/npm/node_modules/delegates": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
@@ -13724,8 +13636,6 @@
     },
     "node_modules/npm/node_modules/dezalgo": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
-      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13745,16 +13655,12 @@
     },
     "node_modules/npm/node_modules/emoji-regex": {
       "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/encoding": {
       "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13765,8 +13671,6 @@
     },
     "node_modules/npm/node_modules/env-paths": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13776,24 +13680,18 @@
     },
     "node_modules/npm/node_modules/err-code": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/fastest-levenshtein": {
       "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/fs-minipass": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13806,24 +13704,18 @@
     },
     "node_modules/npm/node_modules/fs.realpath": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/function-bind": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/gauge": {
       "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
-      "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13868,8 +13760,6 @@
     },
     "node_modules/npm/node_modules/has": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13882,8 +13772,6 @@
     },
     "node_modules/npm/node_modules/has-flag": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13893,8 +13781,6 @@
     },
     "node_modules/npm/node_modules/has-unicode": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -13919,8 +13805,6 @@
     },
     "node_modules/npm/node_modules/http-proxy-agent": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13935,8 +13819,6 @@
     },
     "node_modules/npm/node_modules/https-proxy-agent": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13950,8 +13832,6 @@
     },
     "node_modules/npm/node_modules/humanize-ms": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13961,8 +13841,6 @@
     },
     "node_modules/npm/node_modules/iconv-lite": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -13976,8 +13854,6 @@
     },
     "node_modules/npm/node_modules/ignore-walk": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
-      "integrity": "sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -13990,8 +13866,6 @@
     },
     "node_modules/npm/node_modules/imurmurhash": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14001,8 +13875,6 @@
     },
     "node_modules/npm/node_modules/indent-string": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14012,16 +13884,12 @@
     },
     "node_modules/npm/node_modules/infer-owner": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/inflight": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14047,8 +13915,6 @@
     },
     "node_modules/npm/node_modules/init-package-json": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-3.0.2.tgz",
-      "integrity": "sha512-YhlQPEjNFqlGdzrBfDNRLhvoSgX7iQRgSxgsNknRQ9ITXFT7UMfVMWhBTOh2Y+25lRnGrv5Xz8yZwQ3ACR6T3A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14073,8 +13939,6 @@
     },
     "node_modules/npm/node_modules/ip-regex": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14084,8 +13948,6 @@
     },
     "node_modules/npm/node_modules/is-cidr": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-4.0.2.tgz",
-      "integrity": "sha512-z4a1ENUajDbEl/Q6/pVBpTR1nBjjEE1X7qb7bmWYanNnPoKAvUCPFKeXV6Fe4mgTkWKBqiHIcwsI3SndiO5FeA==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -14110,8 +13972,6 @@
     },
     "node_modules/npm/node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14121,32 +13981,24 @@
     },
     "node_modules/npm/node_modules/is-lambda": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/isexe": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/json-stringify-nice": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/json-stringify-nice/-/json-stringify-nice-1.1.4.tgz",
-      "integrity": "sha512-5Z5RFW63yxReJ7vANgW6eZFGWaQvnPE3WNmZoOJrSkGju2etKA2L5rrOa1sm877TVTFt57A80BH1bArcmlLfPw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14156,8 +14008,6 @@
     },
     "node_modules/npm/node_modules/jsonparse": {
       "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
       "dev": true,
       "engines": [
         "node >= 0.2.0"
@@ -14405,8 +14255,6 @@
     },
     "node_modules/npm/node_modules/minipass-collect": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14436,8 +14284,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14450,8 +14296,6 @@
     },
     "node_modules/npm/node_modules/minipass-json-stream": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz",
-      "integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14462,8 +14306,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline": {
       "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14476,8 +14318,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
-      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14490,8 +14330,6 @@
     },
     "node_modules/npm/node_modules/minizlib": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14505,8 +14343,6 @@
     },
     "node_modules/npm/node_modules/mkdirp": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14519,8 +14355,6 @@
     },
     "node_modules/npm/node_modules/mkdirp-infer-owner": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz",
-      "integrity": "sha512-sdqtiFt3lkOaYvTXSRIUjkIdPTcxgv5+fgqYE/5qgwdw12cOrAuzzgzvVExIkH/ul1oeHN3bCLOWSG3XOqbKKw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14535,24 +14369,18 @@
     },
     "node_modules/npm/node_modules/ms": {
       "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/mute-stream": {
       "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/negotiator": {
       "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14586,8 +14414,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/brace-expansion": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14618,8 +14444,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/minimatch": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14632,8 +14456,6 @@
     },
     "node_modules/npm/node_modules/nopt": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14664,8 +14486,6 @@
     },
     "node_modules/npm/node_modules/npm-audit-report": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/npm-audit-report/-/npm-audit-report-3.0.0.tgz",
-      "integrity": "sha512-tWQzfbwz1sc4244Bx2BVELw0EmZlCsCF0X93RDcmmwhonCsPMoEviYsi+32R+mdRvOWXolPce9zo64n2xgPESw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14678,8 +14498,6 @@
     },
     "node_modules/npm/node_modules/npm-bundled": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
-      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14689,8 +14507,6 @@
     },
     "node_modules/npm/node_modules/npm-install-checks": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-5.0.0.tgz",
-      "integrity": "sha512-65lUsMI8ztHCxFz5ckCEC44DRvEGdZX5usQFriauxHEwt7upv1FKaQEmAtU0YnOAdwuNWCmk64xYiQABNrEyLA==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause",
@@ -14703,8 +14519,6 @@
     },
     "node_modules/npm/node_modules/npm-normalize-package-bin": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -14789,16 +14603,12 @@
     },
     "node_modules/npm/node_modules/npm-user-validate": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/npm-user-validate/-/npm-user-validate-1.0.1.tgz",
-      "integrity": "sha512-uQwcd/tY+h1jnEaze6cdX/LrhWhoBxfSknxentoqmIuStxUExxjWd3ULMLFPiFUrZKbOVMowH6Jq2FRWfmhcEw==",
       "dev": true,
       "inBundle": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/npm/node_modules/npmlog": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
-      "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14814,8 +14624,6 @@
     },
     "node_modules/npm/node_modules/once": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14825,8 +14633,6 @@
     },
     "node_modules/npm/node_modules/opener": {
       "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
       "dev": true,
       "inBundle": true,
       "license": "(WTFPL OR MIT)",
@@ -14836,8 +14642,6 @@
     },
     "node_modules/npm/node_modules/p-map": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14888,8 +14692,6 @@
     },
     "node_modules/npm/node_modules/parse-conflict-json": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/parse-conflict-json/-/parse-conflict-json-2.0.2.tgz",
-      "integrity": "sha512-jDbRGb00TAPFsKWCpZZOT93SxVP9nONOSgES3AevqRq/CHvavEBvKAjxX9p5Y5F0RZLxH9Ufd9+RwtCsa+lFDA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14904,8 +14706,6 @@
     },
     "node_modules/npm/node_modules/path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14915,8 +14715,6 @@
     },
     "node_modules/npm/node_modules/proc-log": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
-      "integrity": "sha512-Kcmo2FhfDTXdcbfDH76N7uBYHINxc/8GW7UAVuVP9I+Va3uHSerrnKV6dLooga/gh7GlgzuCCr/eoldnL1muGw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14926,8 +14724,6 @@
     },
     "node_modules/npm/node_modules/promise-all-reject-late": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz",
-      "integrity": "sha512-vuf0Lf0lOxyQREH7GDIOUMLS7kz+gs8i6B+Yi8dC68a2sychGrHTJYghMBD6k7eUcH0H5P73EckCA48xijWqXw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14946,16 +14742,12 @@
     },
     "node_modules/npm/node_modules/promise-inflight": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/promise-retry": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
-      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -14969,8 +14761,6 @@
     },
     "node_modules/npm/node_modules/promzard": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-      "integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -14980,8 +14770,6 @@
     },
     "node_modules/npm/node_modules/qrcode-terminal": {
       "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz",
-      "integrity": "sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==",
       "dev": true,
       "inBundle": true,
       "bin": {
@@ -14990,8 +14778,6 @@
     },
     "node_modules/npm/node_modules/read": {
       "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-      "integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15028,8 +14814,6 @@
     },
     "node_modules/npm/node_modules/read-package-json-fast": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-2.0.3.tgz",
-      "integrity": "sha512-W/BKtbL+dUjTuRL2vziuYhp76s5HZ9qQhd/dKfWIZveD0O40453QNyZhC0e63lqZrAQ4jiOapVoeJ7JrszenQQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15043,8 +14827,6 @@
     },
     "node_modules/npm/node_modules/readable-stream": {
       "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15059,8 +14841,6 @@
     },
     "node_modules/npm/node_modules/readdir-scoped-modules": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz",
-      "integrity": "sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15073,8 +14853,6 @@
     },
     "node_modules/npm/node_modules/retry": {
       "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15084,8 +14862,6 @@
     },
     "node_modules/npm/node_modules/rimraf": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15101,8 +14877,6 @@
     },
     "node_modules/npm/node_modules/rimraf/node_modules/brace-expansion": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15133,8 +14907,6 @@
     },
     "node_modules/npm/node_modules/rimraf/node_modules/minimatch": {
       "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15147,8 +14919,6 @@
     },
     "node_modules/npm/node_modules/safe-buffer": {
       "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "dev": true,
       "funding": [
         {
@@ -15169,8 +14939,6 @@
     },
     "node_modules/npm/node_modules/safer-buffer": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15178,8 +14946,6 @@
     },
     "node_modules/npm/node_modules/semver": {
       "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15195,8 +14961,6 @@
     },
     "node_modules/npm/node_modules/semver/node_modules/lru-cache": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15209,24 +14973,18 @@
     },
     "node_modules/npm/node_modules/set-blocking": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/signal-exit": {
       "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/smart-buffer": {
       "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15251,8 +15009,6 @@
     },
     "node_modules/npm/node_modules/socks-proxy-agent": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15267,8 +15023,6 @@
     },
     "node_modules/npm/node_modules/spdx-correct": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
       "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
@@ -15279,16 +15033,12 @@
     },
     "node_modules/npm/node_modules/spdx-exceptions": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
       "dev": true,
       "inBundle": true,
       "license": "CC-BY-3.0"
     },
     "node_modules/npm/node_modules/spdx-expression-parse": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15305,8 +15055,6 @@
     },
     "node_modules/npm/node_modules/ssri": {
       "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-      "integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15328,8 +15076,6 @@
     },
     "node_modules/npm/node_modules/string-width": {
       "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15344,8 +15090,6 @@
     },
     "node_modules/npm/node_modules/strip-ansi": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15358,8 +15102,6 @@
     },
     "node_modules/npm/node_modules/supports-color": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15389,24 +15131,18 @@
     },
     "node_modules/npm/node_modules/text-table": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/tiny-relative-date": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz",
-      "integrity": "sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/treeverse": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/treeverse/-/treeverse-2.0.0.tgz",
-      "integrity": "sha512-N5gJCkLu1aXccpOTtqV6ddSEi6ZmGkh3hjmbu1IjcavJK4qyOVQmi0myQKM7z5jVGmD68SJoliaVrMmVObhj6A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15434,16 +15170,12 @@
     },
     "node_modules/npm/node_modules/util-deprecate": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true,
       "inBundle": true,
       "license": "MIT"
     },
     "node_modules/npm/node_modules/validate-npm-package-license": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
       "dev": true,
       "inBundle": true,
       "license": "Apache-2.0",
@@ -15454,8 +15186,6 @@
     },
     "node_modules/npm/node_modules/validate-npm-package-name": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-      "integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15468,16 +15198,12 @@
     },
     "node_modules/npm/node_modules/walk-up-path": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-1.0.0.tgz",
-      "integrity": "sha512-hwj/qMDUEjCU5h0xr90KGCf0tg0/LgJbmOWgrWKYlcJZM7XvquvUJZ0G/HMGr7F7OQMOUuPHWP9JpriinkAlkg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
     },
     "node_modules/npm/node_modules/wcwidth": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
       "dev": true,
       "inBundle": true,
       "license": "MIT",
@@ -15487,8 +15213,6 @@
     },
     "node_modules/npm/node_modules/which": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15504,8 +15228,6 @@
     },
     "node_modules/npm/node_modules/wide-align": {
       "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
       "dev": true,
       "inBundle": true,
       "license": "ISC",
@@ -15515,8 +15237,6 @@
     },
     "node_modules/npm/node_modules/wrappy": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -15536,8 +15256,6 @@
     },
     "node_modules/npm/node_modules/yallist": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true,
       "inBundle": true,
       "license": "ISC"
@@ -30393,11 +30111,6 @@
       "resolved": "https://registry.npmjs.org/itk-viewer-color-maps/-/itk-viewer-color-maps-1.2.0.tgz",
       "integrity": "sha512-Ny4LLvVtR2T0c6L9wT+R1MLO4YgsSUWjJZwfHmINiiNTQ5yMR+1tFLLXK5yI4rOudVUS+DoVXd5qAKFOZHRniw=="
     },
-    "itk-viewer-icons": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/itk-viewer-icons/-/itk-viewer-icons-11.14.0.tgz",
-      "integrity": "sha512-Yb81spokfdpJ3U7i+zBnkyxg4I4kyFf9LlLex70VxoYF9WzHrrmj+4/UJvgwB7Yk0ms0hD95RtOQj2xIJGzyCQ=="
-    },
     "itk-viewer-transfer-function-editor": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/itk-viewer-transfer-function-editor/-/itk-viewer-transfer-function-editor-1.2.5.tgz",
@@ -32158,23 +31871,17 @@
       "dependencies": {
         "@colors/colors": {
           "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-          "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
           "bundled": true,
           "dev": true,
           "optional": true
         },
         "@gar/promisify": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
-          "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
           "bundled": true,
           "dev": true
         },
         "@isaacs/string-locale-compare": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz",
-          "integrity": "sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ==",
           "bundled": true,
           "dev": true
         },
@@ -32221,8 +31928,6 @@
         },
         "@npmcli/ci-detect": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/@npmcli/ci-detect/-/ci-detect-2.0.0.tgz",
-          "integrity": "sha512-8yQtQ9ArHh/TzdUDKQwEvwCgpDuhSWTDAbiKMl3854PcT+Dk4UmWaiawuFTLy9n5twzXOBXVflWe+90/ffXQrA==",
           "bundled": true,
           "dev": true
         },
@@ -32243,8 +31948,6 @@
         },
         "@npmcli/disparity-colors": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/@npmcli/disparity-colors/-/disparity-colors-2.0.0.tgz",
-          "integrity": "sha512-FFXGrIjhvd2qSZ8iS0yDvbI7nbjdyT2VNO7wotosjYZM2p2r8PN3B7Om3M5NO9KqW/OVzfzLB3L0V5Vo5QXC7A==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32278,8 +31981,6 @@
         },
         "@npmcli/installed-package-contents": {
           "version": "1.0.7",
-          "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-1.0.7.tgz",
-          "integrity": "sha512-9rufe0wnJusCQoLpV9ZPKIVP55itrM5BxOXs10DmdbRfgWtHy1LDyskbwRnBghuB0PrF7pNPOqREVtpz4HqzKw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32320,22 +32021,16 @@
         },
         "@npmcli/name-from-folder": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/@npmcli/name-from-folder/-/name-from-folder-1.0.1.tgz",
-          "integrity": "sha512-qq3oEfcLFwNfEYOQ8HLimRGKlD8WSeGEdtUa7hmzpR8Sa7haL1KVQrvgO6wqMjhWFFVjgtrh1gIxDz+P8sjUaA==",
           "bundled": true,
           "dev": true
         },
         "@npmcli/node-gyp": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-2.0.0.tgz",
-          "integrity": "sha512-doNI35wIe3bBaEgrlPfdJPaCpUR89pJWep4Hq3aRdh6gKazIVWfs0jHttvSSoq47ZXgC7h73kDsUl8AoIQUB+A==",
           "bundled": true,
           "dev": true
         },
         "@npmcli/package-json": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-2.0.0.tgz",
-          "integrity": "sha512-42jnZ6yl16GzjWSH7vtrmWyJDGVa/LXPdpN2rcUWolFjc9ON2N3uz0qdBbQACfmhuJZ2lbKYtmK5qx68ZPLHMA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32344,8 +32039,6 @@
         },
         "@npmcli/promise-spawn": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-3.0.0.tgz",
-          "integrity": "sha512-s9SgS+p3a9Eohe68cSI3fi+hpcZUmXq5P7w0kMlAsWVtR7XbK3ptkZqKT2cK1zLDObJ3sR+8P59sJE0w/KTL1g==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32365,22 +32058,16 @@
         },
         "@tootallnate/once": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
-          "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
           "bundled": true,
           "dev": true
         },
         "abbrev": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "bundled": true,
           "dev": true
         },
         "agent-base": {
           "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-          "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32399,8 +32086,6 @@
         },
         "aggregate-error": {
           "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-          "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32410,15 +32095,11 @@
         },
         "ansi-regex": {
           "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
           "bundled": true,
           "dev": true
         },
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32427,15 +32108,11 @@
         },
         "aproba": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-          "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
           "bundled": true,
           "dev": true
         },
         "archy": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
-          "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==",
           "bundled": true,
           "dev": true
         },
@@ -32450,8 +32127,6 @@
         },
         "asap": {
           "version": "2.0.6",
-          "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-          "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
           "bundled": true,
           "dev": true
         },
@@ -32475,15 +32150,11 @@
         },
         "binary-extensions": {
           "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
           "bundled": true,
           "dev": true
         },
         "brace-expansion": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32492,8 +32163,6 @@
         },
         "builtins": {
           "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/builtins/-/builtins-5.0.1.tgz",
-          "integrity": "sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32527,8 +32196,6 @@
         },
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32538,15 +32205,11 @@
         },
         "chownr": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-          "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
           "bundled": true,
           "dev": true
         },
         "cidr-regex": {
           "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/cidr-regex/-/cidr-regex-3.1.1.tgz",
-          "integrity": "sha512-RBqYd32aDwbCMFJRL6wHOlDNYJsPNTt8vC82ErHF5vKt8QQzxm1FrkW8s/R5pVrXMf17sba09Uoy91PKiddAsw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32555,15 +32218,11 @@
         },
         "clean-stack": {
           "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-          "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
           "bundled": true,
           "dev": true
         },
         "cli-columns": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/cli-columns/-/cli-columns-4.0.0.tgz",
-          "integrity": "sha512-XW2Vg+w+L9on9wtwKpyzluIPCWXjaBahI7mTcYjx+BVIYD9c3yqcv/yKC7CmdCZat4rq2yiE1UMSJC5ivKfMtQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32582,15 +32241,11 @@
         },
         "clone": {
           "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
           "bundled": true,
           "dev": true
         },
         "cmd-shim": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-5.0.0.tgz",
-          "integrity": "sha512-qkCtZ59BidfEwHltnJwkyVZn+XQojdAySM1D1gSeh11Z4pW1Kpolkyo53L5noc0nrxmIvyFwTmJRo4xs7FFLPw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32599,8 +32254,6 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32609,22 +32262,16 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "bundled": true,
           "dev": true
         },
         "color-support": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-          "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
           "bundled": true,
           "dev": true
         },
         "columnify": {
           "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.6.0.tgz",
-          "integrity": "sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32634,29 +32281,21 @@
         },
         "common-ancestor-path": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz",
-          "integrity": "sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==",
           "bundled": true,
           "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "bundled": true,
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-          "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
           "bundled": true,
           "dev": true
         },
         "debug": {
           "version": "4.3.4",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32665,8 +32304,6 @@
           "dependencies": {
             "ms": {
               "version": "2.1.2",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-              "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
               "bundled": true,
               "dev": true
             }
@@ -32674,15 +32311,11 @@
         },
         "debuglog": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz",
-          "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==",
           "bundled": true,
           "dev": true
         },
         "defaults": {
           "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
-          "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32691,8 +32324,6 @@
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-          "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
           "bundled": true,
           "dev": true
         },
@@ -32703,8 +32334,6 @@
         },
         "dezalgo": {
           "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
-          "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32719,15 +32348,11 @@
         },
         "emoji-regex": {
           "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
           "bundled": true,
           "dev": true
         },
         "encoding": {
           "version": "0.1.13",
-          "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
-          "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
           "bundled": true,
           "dev": true,
           "optional": true,
@@ -32737,29 +32362,21 @@
         },
         "env-paths": {
           "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
-          "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
           "bundled": true,
           "dev": true
         },
         "err-code": {
           "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
-          "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
           "bundled": true,
           "dev": true
         },
         "fastest-levenshtein": {
           "version": "1.0.12",
-          "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-          "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
           "bundled": true,
           "dev": true
         },
         "fs-minipass": {
           "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-          "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32768,22 +32385,16 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "bundled": true,
           "dev": true
         },
         "function-bind": {
           "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-          "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
           "bundled": true,
           "dev": true
         },
         "gauge": {
           "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
-          "integrity": "sha512-f9m+BEN5jkg6a0fZjleidjN51VE1X+mPFQ2DJ0uv1V39oCLCbsGe6yjbBnp7eK7z/+GAon99a3nHuqbuuthyPg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32816,8 +32427,6 @@
         },
         "has": {
           "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-          "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32826,15 +32435,11 @@
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "bundled": true,
           "dev": true
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-          "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
           "bundled": true,
           "dev": true
         },
@@ -32853,8 +32458,6 @@
         },
         "http-proxy-agent": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
-          "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32865,8 +32468,6 @@
         },
         "https-proxy-agent": {
           "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-          "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32876,8 +32477,6 @@
         },
         "humanize-ms": {
           "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
-          "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32886,8 +32485,6 @@
         },
         "iconv-lite": {
           "version": "0.6.3",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
           "bundled": true,
           "dev": true,
           "optional": true,
@@ -32897,8 +32494,6 @@
         },
         "ignore-walk": {
           "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-5.0.1.tgz",
-          "integrity": "sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32907,29 +32502,21 @@
         },
         "imurmurhash": {
           "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-          "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
           "bundled": true,
           "dev": true
         },
         "indent-string": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
           "bundled": true,
           "dev": true
         },
         "infer-owner": {
           "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-          "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
           "bundled": true,
           "dev": true
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32949,8 +32536,6 @@
         },
         "init-package-json": {
           "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-3.0.2.tgz",
-          "integrity": "sha512-YhlQPEjNFqlGdzrBfDNRLhvoSgX7iQRgSxgsNknRQ9ITXFT7UMfVMWhBTOh2Y+25lRnGrv5Xz8yZwQ3ACR6T3A==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32970,15 +32555,11 @@
         },
         "ip-regex": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-          "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
           "bundled": true,
           "dev": true
         },
         "is-cidr": {
           "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-4.0.2.tgz",
-          "integrity": "sha512-z4a1ENUajDbEl/Q6/pVBpTR1nBjjEE1X7qb7bmWYanNnPoKAvUCPFKeXV6Fe4mgTkWKBqiHIcwsI3SndiO5FeA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -32995,43 +32576,31 @@
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
           "bundled": true,
           "dev": true
         },
         "is-lambda": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
-          "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
           "bundled": true,
           "dev": true
         },
         "isexe": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-          "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
           "bundled": true,
           "dev": true
         },
         "json-parse-even-better-errors": {
           "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-          "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
           "bundled": true,
           "dev": true
         },
         "json-stringify-nice": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/json-stringify-nice/-/json-stringify-nice-1.1.4.tgz",
-          "integrity": "sha512-5Z5RFW63yxReJ7vANgW6eZFGWaQvnPE3WNmZoOJrSkGju2etKA2L5rrOa1sm877TVTFt57A80BH1bArcmlLfPw==",
           "bundled": true,
           "dev": true
         },
         "jsonparse": {
           "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
-          "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
           "bundled": true,
           "dev": true
         },
@@ -33213,8 +32782,6 @@
         },
         "minipass-collect": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-          "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33234,8 +32801,6 @@
         },
         "minipass-flush": {
           "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-          "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33244,8 +32809,6 @@
         },
         "minipass-json-stream": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/minipass-json-stream/-/minipass-json-stream-1.0.1.tgz",
-          "integrity": "sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33255,8 +32818,6 @@
         },
         "minipass-pipeline": {
           "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
-          "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33265,8 +32826,6 @@
         },
         "minipass-sized": {
           "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
-          "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33275,8 +32834,6 @@
         },
         "minizlib": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-          "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33286,15 +32843,11 @@
         },
         "mkdirp": {
           "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
           "bundled": true,
           "dev": true
         },
         "mkdirp-infer-owner": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/mkdirp-infer-owner/-/mkdirp-infer-owner-2.0.0.tgz",
-          "integrity": "sha512-sdqtiFt3lkOaYvTXSRIUjkIdPTcxgv5+fgqYE/5qgwdw12cOrAuzzgzvVExIkH/ul1oeHN3bCLOWSG3XOqbKKw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33305,22 +32858,16 @@
         },
         "ms": {
           "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
           "bundled": true,
           "dev": true
         },
         "mute-stream": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-          "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
           "bundled": true,
           "dev": true
         },
         "negotiator": {
           "version": "0.6.3",
-          "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-          "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
           "bundled": true,
           "dev": true
         },
@@ -33343,8 +32890,6 @@
           "dependencies": {
             "brace-expansion": {
               "version": "1.1.11",
-              "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-              "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -33367,8 +32912,6 @@
             },
             "minimatch": {
               "version": "3.1.2",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-              "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -33379,8 +32922,6 @@
         },
         "nopt": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-          "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33400,8 +32941,6 @@
         },
         "npm-audit-report": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/npm-audit-report/-/npm-audit-report-3.0.0.tgz",
-          "integrity": "sha512-tWQzfbwz1sc4244Bx2BVELw0EmZlCsCF0X93RDcmmwhonCsPMoEviYsi+32R+mdRvOWXolPce9zo64n2xgPESw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33410,8 +32949,6 @@
         },
         "npm-bundled": {
           "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
-          "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33420,8 +32957,6 @@
         },
         "npm-install-checks": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-5.0.0.tgz",
-          "integrity": "sha512-65lUsMI8ztHCxFz5ckCEC44DRvEGdZX5usQFriauxHEwt7upv1FKaQEmAtU0YnOAdwuNWCmk64xYiQABNrEyLA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33430,8 +32965,6 @@
         },
         "npm-normalize-package-bin": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-          "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
           "bundled": true,
           "dev": true
         },
@@ -33492,15 +33025,11 @@
         },
         "npm-user-validate": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/npm-user-validate/-/npm-user-validate-1.0.1.tgz",
-          "integrity": "sha512-uQwcd/tY+h1jnEaze6cdX/LrhWhoBxfSknxentoqmIuStxUExxjWd3ULMLFPiFUrZKbOVMowH6Jq2FRWfmhcEw==",
           "bundled": true,
           "dev": true
         },
         "npmlog": {
           "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
-          "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33512,8 +33041,6 @@
         },
         "once": {
           "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33522,15 +33049,11 @@
         },
         "opener": {
           "version": "1.5.2",
-          "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-          "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
           "bundled": true,
           "dev": true
         },
         "p-map": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-          "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33567,8 +33090,6 @@
         },
         "parse-conflict-json": {
           "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/parse-conflict-json/-/parse-conflict-json-2.0.2.tgz",
-          "integrity": "sha512-jDbRGb00TAPFsKWCpZZOT93SxVP9nONOSgES3AevqRq/CHvavEBvKAjxX9p5Y5F0RZLxH9Ufd9+RwtCsa+lFDA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33579,22 +33100,16 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "bundled": true,
           "dev": true
         },
         "proc-log": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
-          "integrity": "sha512-Kcmo2FhfDTXdcbfDH76N7uBYHINxc/8GW7UAVuVP9I+Va3uHSerrnKV6dLooga/gh7GlgzuCCr/eoldnL1muGw==",
           "bundled": true,
           "dev": true
         },
         "promise-all-reject-late": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/promise-all-reject-late/-/promise-all-reject-late-1.0.1.tgz",
-          "integrity": "sha512-vuf0Lf0lOxyQREH7GDIOUMLS7kz+gs8i6B+Yi8dC68a2sychGrHTJYghMBD6k7eUcH0H5P73EckCA48xijWqXw==",
           "bundled": true,
           "dev": true
         },
@@ -33605,15 +33120,11 @@
         },
         "promise-inflight": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-          "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
           "bundled": true,
           "dev": true
         },
         "promise-retry": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
-          "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33623,8 +33134,6 @@
         },
         "promzard": {
           "version": "0.3.0",
-          "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz",
-          "integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33633,15 +33142,11 @@
         },
         "qrcode-terminal": {
           "version": "0.12.0",
-          "resolved": "https://registry.npmjs.org/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz",
-          "integrity": "sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==",
           "bundled": true,
           "dev": true
         },
         "read": {
           "version": "1.0.7",
-          "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
-          "integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33666,8 +33171,6 @@
         },
         "read-package-json-fast": {
           "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-2.0.3.tgz",
-          "integrity": "sha512-W/BKtbL+dUjTuRL2vziuYhp76s5HZ9qQhd/dKfWIZveD0O40453QNyZhC0e63lqZrAQ4jiOapVoeJ7JrszenQQ==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33677,8 +33180,6 @@
         },
         "readable-stream": {
           "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33689,8 +33190,6 @@
         },
         "readdir-scoped-modules": {
           "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz",
-          "integrity": "sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33702,15 +33201,11 @@
         },
         "retry": {
           "version": "0.12.0",
-          "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-          "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
           "bundled": true,
           "dev": true
         },
         "rimraf": {
           "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33719,8 +33214,6 @@
           "dependencies": {
             "brace-expansion": {
               "version": "1.1.11",
-              "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-              "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -33743,8 +33236,6 @@
             },
             "minimatch": {
               "version": "3.1.2",
-              "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-              "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -33755,23 +33246,17 @@
         },
         "safe-buffer": {
           "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
           "bundled": true,
           "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "bundled": true,
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "7.3.7",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33780,8 +33265,6 @@
           "dependencies": {
             "lru-cache": {
               "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-              "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
               "bundled": true,
               "dev": true,
               "requires": {
@@ -33792,22 +33275,16 @@
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-          "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
           "bundled": true,
           "dev": true
         },
         "signal-exit": {
           "version": "3.0.7",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-          "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
           "bundled": true,
           "dev": true
         },
         "smart-buffer": {
           "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-          "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
           "bundled": true,
           "dev": true
         },
@@ -33822,8 +33299,6 @@
         },
         "socks-proxy-agent": {
           "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
-          "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33834,8 +33309,6 @@
         },
         "spdx-correct": {
           "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-          "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33845,15 +33318,11 @@
         },
         "spdx-exceptions": {
           "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-          "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
           "bundled": true,
           "dev": true
         },
         "spdx-expression-parse": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-          "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33868,8 +33337,6 @@
         },
         "ssri": {
           "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
-          "integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33886,8 +33353,6 @@
         },
         "string-width": {
           "version": "4.2.3",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33898,8 +33363,6 @@
         },
         "strip-ansi": {
           "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33908,8 +33371,6 @@
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33931,22 +33392,16 @@
         },
         "text-table": {
           "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-          "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
           "bundled": true,
           "dev": true
         },
         "tiny-relative-date": {
           "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz",
-          "integrity": "sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==",
           "bundled": true,
           "dev": true
         },
         "treeverse": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/treeverse/-/treeverse-2.0.0.tgz",
-          "integrity": "sha512-N5gJCkLu1aXccpOTtqV6ddSEi6ZmGkh3hjmbu1IjcavJK4qyOVQmi0myQKM7z5jVGmD68SJoliaVrMmVObhj6A==",
           "bundled": true,
           "dev": true
         },
@@ -33968,15 +33423,11 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "bundled": true,
           "dev": true
         },
         "validate-npm-package-license": {
           "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-          "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33986,8 +33437,6 @@
         },
         "validate-npm-package-name": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-4.0.0.tgz",
-          "integrity": "sha512-mzR0L8ZDktZjpX4OB46KT+56MAhl4EIazWP/+G/HPGuvfdaqg4YsCdtOm6U9+LOFyYDoh4dpnpxZRB9MQQns5Q==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -33996,15 +33445,11 @@
         },
         "walk-up-path": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-1.0.0.tgz",
-          "integrity": "sha512-hwj/qMDUEjCU5h0xr90KGCf0tg0/LgJbmOWgrWKYlcJZM7XvquvUJZ0G/HMGr7F7OQMOUuPHWP9JpriinkAlkg==",
           "bundled": true,
           "dev": true
         },
         "wcwidth": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
-          "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -34013,8 +33458,6 @@
         },
         "which": {
           "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -34023,8 +33466,6 @@
         },
         "wide-align": {
           "version": "1.1.5",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-          "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
           "bundled": true,
           "dev": true,
           "requires": {
@@ -34033,8 +33474,6 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "bundled": true,
           "dev": true
         },
@@ -34049,8 +33488,6 @@
         },
         "yallist": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
           "bundled": true,
           "dev": true
         }
diff --git a/package.json b/package.json
index e890a80a..df148208 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "itk-image-io": "^1.0.0-b.84",
     "itk-mesh-io": "^1.0.0-b.84",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "11.14.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "itk-wasm": "^1.0.0-b.83",
     "mobx": "^5.15.7",
diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index fb2fb1d5..a5bd2493 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -113,100 +113,106 @@ var style = {
 }
 styleInject(css_248z$1)
 
-const optimizedSVGDataUri$z =
+const optimizedSVGDataUri$x =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1536'%3e%3cpath d='M725 431L555 881q33 0 136.5 2t160.5 2q19 0 57-2-87-253-184-452zM0 1536l2-79q23-7 56-12.5t57-10.5 49.5-14.5 44.5-29 31-50.5l237-616L757 0h128q8 14 11 21l205 480q33 78 106 257.5t114 274.5q15 34 58 144.5t72 168.5q20 45 35 57 19 15 88 29.5t84 20.5q6 38 6 57 0 4-.5 13t-.5 13q-63 0-190-8t-191-8q-76 0-215 7t-178 8q0-43 4-78l131-28q1 0 12.5-2.5t15.5-3.5 14.5-4.5 15-6.5 11-8 9-11 2.5-14q0-16-31-96.5t-72-177.5-42-100l-450-2q-26 58-76.5 195.5T382 1361q0 22 14 37.5t43.5 24.5 48.5 13.5 57 8.5 41 4q1 19 1 58 0 9-2 27-58 0-174.5-10T236 1514q-8 0-26.5 4t-21.5 4q-80 14-188 14z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$y =
+const optimizedSVGDataUri$w =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 41.91699981689453'%3e%3cpath d='M15 24.089V7.375L9 13V7.5L17 0l8 7.5V13l-6-5.625v15.542h16.625l-5.625-6h5.5l7.5 8-7.5 8H30l5.625-6H17.828l-11 11H15l-4 4H0v-11l4-4v8.172l11-11zm6.253 8.361L18.8 37.262v2.655h-1.707v-2.625l-2.346-4.842h1.921l1.195 2.785.17.61h.022l.165-.588 1.252-2.807h1.781zm8.267-10.533h-2.03l-1.308-2.432-.154-.5h-.021l-.175.522-1.314 2.41H22.48l2.42-3.733-2.207-3.734h2.079l1.083 2.239.227.63h.021l.235-.65 1.194-2.219h1.881l-2.235 3.702 2.342 3.765zm-16.48 1H6.96v-.985l3.875-5.095H7.28V15.45h5.76v.955L9.248 21.53h3.792v1.387z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$x =
+const optimizedSVGDataUri$v =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3csvg viewBox='0 0 1763.3333740234375 1792' version='1.1' id='svg113' sodipodi:docname='blendMode.svg' inkscape:version='1.2 (1:1.2%2b202206011326%2bfc4e4096c5)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3e %3cdefs id='defs117' /%3e %3csodipodi:namedview id='namedview115' pagecolor='white' bordercolor='black' borderopacity='0.25' inkscape:showpageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:deskcolor='%23d1d1d1' showgrid='false' inkscape:zoom='0.27047836' inkscape:cx='763.46218' inkscape:cy='1454.8299' inkscape:window-width='1846' inkscape:window-height='1136' inkscape:window-x='74' inkscape:window-y='27' inkscape:window-maximized='1' inkscape:current-layer='svg113' /%3e %3cellipse style='fill:none%3bfill-opacity:1%3bstroke:black%3bstroke-width:149.145%3bstroke-dasharray:none%3bstroke-opacity:1' id='path223' cx='601' cy='899.99982' rx='525.42761' ry='525.42743' /%3e %3ccircle style='fill:black%3bfill-opacity:1%3bstroke:none%3bstroke-width:100%3bstroke-dasharray:none%3bstroke-opacity:1' id='path223-3' cx='1163' cy='900' r='600' /%3e %3c/svg%3e"
 
-const optimizedSVGDataUri$w =
+const optimizedSVGDataUri$u =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M17 22v-2h3v-3h2v3.5c0 .39-.16.74-.46 1.04c-.3.3-.65.46-1.04.46H17M7 22H3.5c-.39 0-.74-.16-1.04-.46c-.3-.3-.46-.65-.46-1.04V17h2v3h3v2M17 2h3.5c.39 0 .74.16 1.04.46c.3.3.46.65.46 1.04V7h-2V4h-3V2M7 2v2H4v3H2V3.5c0-.39.16-.74.46-1.04c.3-.3.65-.46 1.04-.46H7m6 15.25l4-2.3v-4.59l-4 2.3v4.59m-1-6.33l4-2.29l-4-2.35l-4 2.35l4 2.29m-5 4.03l4 2.3v-4.59l-4-2.3v4.59m11.23-7.36c.5.32.77.75.77 1.32v6.32c0 .57-.27 1-.77 1.32l-5.48 3.18c-.5.32-1 .32-1.5 0l-5.48-3.18c-.5-.32-.77-.75-.77-1.32V8.91c0-.57.27-1 .77-1.32l5.48-3.18c.25-.13.5-.19.75-.19s.5.06.75.19l5.48 3.18Z'/%3e%3c/svg%3e"
+
+const optimizedSVGDataUri$t =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'%3e%3cpath d='M64 0h32v48H64zm32 288V112H64v208h208v-32zm240 0h48v32h-48z'/%3e%3cpath d='M0 64v32h288v288h32V64z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$v =
+const optimizedSVGDataUri$s =
+  "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e %3csvg fill='black' width='800px' height='800px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.293%2c13.707a1%2c1%2c0%2c1%2c1%2c1.414-1.414L11%2c14.586V3a1%2c1%2c0%2c0%2c1%2c2%2c0V14.586l2.293-2.293a1%2c1%2c0%2c0%2c1%2c1.414%2c1.414l-4%2c4a1%2c1%2c0%2c0%2c1-.325.216.986.986%2c0%2c0%2c1-.764%2c0%2c1%2c1%2c0%2c0%2c1-.325-.216ZM22%2c12a1%2c1%2c0%2c0%2c0-1%2c1v7H3V13a1%2c1%2c0%2c0%2c0-2%2c0v8a1%2c1%2c0%2c0%2c0%2c1%2c1H22a1%2c1%2c0%2c0%2c0%2c1-1V13A1%2c1%2c0%2c0%2c0%2c22%2c12Z'/%3e%3c/svg%3e"
+
+const optimizedSVGDataUri$r =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M1283 413L928 768l355 355 144-144q29-31 70-14 39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l144-144-355-355-355 355 144 144q31 30 14 69-17 40-59 40H64q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l144 144 355-355-355-355-144 144q-19 19-45 19-12 0-24-5-40-17-40-59V64q0-26 19-45T64 0h448q42 0 59 40 17 39-14 69L413 253l355 355 355-355-144-144q-31-30-14-69 17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59-13 5-25 5-26 0-45-19z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$u =
+const optimizedSVGDataUri$q =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3e%3cpath d='M16 12h4v4h-4zm-4 4h4v4h-4zm8 0h4v4h-4zm4-4h4v4h-4zM8 12h4v4H8zM32 0H4C1.8 0 0 1.8 0 4v28c0 2.2 1.8 4 4 4h28c2.2 0 4-1.8 4-4V4c0-2.2-1.8-4-4-4zM12 30H8v-4h4v4zm8 0h-4v-4h4v4zm8 0h-4v-4h4v4zm4-14h-4v4h4v4h-4v-4h-4v4h-4v-4h-4v4h-4v-4H8v4H4v-4h4v-4H4V4h28v12z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$t =
+const optimizedSVGDataUri$p =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='13.909765010254631 15.20464974120776 126.4822541859144 128.7097615525036' width='122.48' height='124.71'%3e%3cdefs%3e%3cpath d='M76.43 16.2L130.98 47.58L76.43 75.4L21.89 47.58L76.43 16.2Z' id='bhsnPtSOa'%3e%3c/path%3e%3cpath d='M69.91 140.91L14.91 114.08L15 60L70 87.88L69.91 140.91Z' id='agS5SeOOL'%3e%3c/path%3e%3cpath d='M137.39 113.62L136.4 59.17L82.61 87.3L83.59 140.83L137.39 113.62Z' id='c3paZhyh3s'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23bhsnPtSOa' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23agS5SeOOL' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23c3paZhyh3s' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$s =
+const optimizedSVGDataUri$o =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1536'%3e%3cpath d='M640 448q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448H256v-192l320-320 160 160 512-512zm96-704H160q-13 0-22.5 9.5T128 160v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5V160q0-13-9.5-22.5T1760 128zm160 32v1216q0 66-47 113t-113 47H160q-66 0-113-47T0 1376V160Q0 94 47 47T160 0h1600q66 0 113 47t47 113z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$r =
+const optimizedSVGDataUri$n =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='24.474820143884916 11.75539568345329 107.73381294964032 102.35251798561154' width='102.73' height='97.35'%3e%3cdefs%3e%3cpath d='M26.47 13.76L129.21 13.76L129.21 111.11L26.47 111.11L26.47 13.76Z' id='a3ZYhJlju'%3e%3c/path%3e%3clinearGradient id='gradientbexcZGM80' gradientUnits='userSpaceOnUse' x1='27.65' y1='13.76' x2='129.21' y2='111.57'%3e%3cstop style='stop-color: white%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %23010000%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23a3ZYhJlju' opacity='1' fill='url(%23gradientbexcZGM80)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23a3ZYhJlju' opacity='1' fill-opacity='0' stroke='white' stroke-width='4' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$q =
+const optimizedSVGDataUri$m =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1344'%3e%3cpath d='M555 1047l78-141q-87-63-136-159t-49-203q0-121 61-225-229 117-381 353 167 258 427 375zm389-759q0-20-14-34t-34-14q-125 0-214.5 89.5T592 544q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm363-191q0 7-1 9-105 188-315 566t-316 567l-49 89q-10 16-28 16-12 0-134-70-16-10-16-28 0-12 44-87-143-65-263.5-173T20 741Q0 710 0 672t20-69q153-235 380-371T896 96q89 0 180 17l54-97q10-16 28-16 5 0 18 6t31 15.5 33 18.5 31.5 18.5T1291 70q16 10 16 27zm37 447q0 139-79 253.5T1056 962l280-502q8 45 8 84zm448 128q0 35-20 69-39 64-109 145-150 172-347.5 267T896 1248l74-132q212-18 392.5-137T1664 672q-115-179-282-294l63-112q95 64 182.5 153T1772 603q20 34 20 69z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$p =
+const optimizedSVGDataUri$l =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100%3b' xml:space='preserve'%3e %3ccircle cx='59.6' cy='42.7' r='4.9'/%3e %3cpath d='M41.1%2c84.2c-1%2c0-2-0.4-2.7-1.3l-22-26.7c-1.2-1.5-1-3.7%2c0.5-4.9l31.9-26.4c0.6-0.5%2c1.4-0.8%2c2.2-0.8c0%2c0%2c0%2c0%2c0%2c0l27.1%2c0.1 c1%2c0%2c2%2c0.5%2c2.7%2c1.3c0.7%2c0.8%2c0.9%2c1.9%2c0.7%2c2.9L76.5%2c55c-0.2%2c0.8-0.6%2c1.5-1.2%2c2L43.3%2c83.4C42.7%2c83.9%2c41.9%2c84.2%2c41.1%2c84.2z M24%2c54.5 l17.6%2c21.3l28.3-23.3l4-21.2l-21.6-0.1L24%2c54.5z'/%3e %3c/svg%3e"
 
-const optimizedSVGDataUri$o =
+const optimizedSVGDataUri$k =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' version='1.1' id='svg2' viewBox='0 0 62.221396 60.130392' height='16.970133mm' width='17.560261mm'%3e %3cdefs id='defs4' /%3e %3cmetadata id='metadata7'%3e %3crdf:RDF%3e %3ccc:Work rdf:about=''%3e %3cdc:format%3eimage/svg%2bxml%3c/dc:format%3e %3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3e %3cdc:title%3e%3c/dc:title%3e %3c/cc:Work%3e %3c/rdf:RDF%3e %3c/metadata%3e %3cg transform='translate(-204.3732%2c-426.67465)' id='layer1'%3e %3crect transform='matrix(0.67893789%2c0.73419571%2c-0.73419571%2c0.67893789%2c0%2c0)' y='107.51627' x='484.44534' height='59.38089' width='21.540062' id='rect4140' style='fill:none%3bfill-opacity:1%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-dashoffset:0%3bstroke-opacity:1' /%3e %3cpath id='path4148' d='m 243.29116%2c434.92064 c 3.16419%2c3.42172 6.32839%2c6.84344 9.49258%2c10.26516' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-3-5' d='m 236.26734%2c441.53481 c 1.96377%2c2.12361 3.92755%2c4.24722 5.89132%2c6.37082' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-3' d='m 228.61436%2c448.49077 c 3.16419%2c3.42172 6.32839%2c6.84345 9.49259%2c10.26516' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-3-5-5' d='m 220.76246%2c455.75236 c 1.96378%2c2.12361 3.92756%2c4.24721 5.89133%2c6.37081' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3cpath id='path4148-6' d='m 213.55887%2c462.41313 c 3.16419%2c3.42173 6.32839%2c6.84345 9.49258%2c10.26518' style='fill:none%3bfill-rule:evenodd%3bstroke:black%3bstroke-width:4%3bstroke-linecap:round%3bstroke-linejoin:miter%3bstroke-miterlimit:4%3bstroke-dasharray:none%3bstroke-opacity:1' /%3e %3c/g%3e %3c/svg%3e"
 
-const optimizedSVGDataUri$n =
+const optimizedSVGDataUri$j =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M768 1312V224q-148 0-273 73T297 495t-73 273 73 273 198 198 273 73zm768-544q0 209-103 385.5T1153.5 1433 768 1536t-385.5-103T103 1153.5 0 768t103-385.5T382.5 103 768 0t385.5 103T1433 382.5 1536 768z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$m =
+const optimizedSVGDataUri$i =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M768 0q209 0 385.5 103T1433 382.5 1536 768t-103 385.5-279.5 279.5T768 1536t-385.5-103T103 1153.5 0 768t103-385.5T382.5 103 768 0zm0 1312q148 0 273-73t198-198 73-273-73-273-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73zm96-224q-14 0-23-9t-9-23V480q0-14 9-23t23-9h192q14 0 23 9t9 23v576q0 14-9 23t-23 9H864zm-384 0q-14 0-23-9t-9-23V480q0-14 9-23t23-9h192q14 0 23 9t9 23v576q0 14-9 23t-23 9H480z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$l =
+const optimizedSVGDataUri$h =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3e%3cpath d='M1184 768q0 37-32 55l-544 320q-15 9-32 9-16 0-32-8-32-19-32-56V448q0-37 32-56 33-18 64 1l544 320q32 18 32 55zm128 0q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5T1153.5 1433 768 1536t-385.5-103T103 1153.5 0 768t103-385.5T382.5 103 768 0t385.5 103T1433 382.5 1536 768z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$k =
+const optimizedSVGDataUri$g =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='23.526450466849894 25.20464974120776 126.86556872931914 128.62412323660308' width='122.87' height='124.62'%3e%3cdefs%3e%3cpath d='M85.45 26.2L140 57.58L85.45 85.4L30.91 57.58L85.45 26.2Z' id='bljQJJOjU'%3e%3c/path%3e%3cpath d='M79.53 149.62L24.53 122.78L24.62 68.7L79.62 96.58L79.53 149.62Z' id='a2OxwluQL6'%3e%3c/path%3e%3cpath d='M147.39 123.62L146.4 69.17L92.61 97.3L93.59 150.83L147.39 123.62Z' id='a4nIltkDon'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23bljQJJOjU' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a2OxwluQL6' opacity='1' fill='%23ff7b7b' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a4nIltkDon' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$j =
+const optimizedSVGDataUri$f =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448'%3e%3cpath d='M224 144c-44.004 0-80.001 36-80.001 80 0 44.004 35.997 80 80.001 80 44.005 0 79.999-35.996 79.999-80 0-44-35.994-80-79.999-80zm190.938 58.667c-9.605-88.531-81.074-160-169.605-169.599V0h-42.666v33.067c-88.531 9.599-160 81.068-169.604 169.599H0v42.667h33.062c9.604 88.531 81.072 160 169.604 169.604V448h42.666v-33.062c88.531-9.604 160-81.073 169.605-169.604H448v-42.667h-33.062zM224 373.333c-82.137 0-149.334-67.198-149.334-149.333 0-82.136 67.197-149.333 149.334-149.333 82.135 0 149.332 67.198 149.332 149.333S306.135 373.333 224 373.333z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$i =
+const optimizedSVGDataUri$e =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 384'%3e%3cpath d='M332.795 332.8H256V384h128V256h-51.205zm.005-281.595V128H384V0H256v51.205zM51.205 51.2H128V0H0v128h51.205zM51.2 332.795V256H0v128h128v-51.205z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$h =
+const optimizedSVGDataUri$d =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M3 9V3h2v3.35Q6.25 4.8 8.063 3.9T12 3q2.95 0 5.263 1.675T20.5 9h-2.175q-.85-1.8-2.525-2.9T12 5q-1.425 0-2.688.525T7.1 7H9v2H3Zm3 9h12l-3.75-5l-3 4L9 14l-3 4Zm-1 4q-.825 0-1.413-.588T3 20v-8h2v8h14v-8h2v8q0 .825-.588 1.413T19 22H5Z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$g =
+const optimizedSVGDataUri$c =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath d='M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$f =
+const optimizedSVGDataUri$b =
   "data:image/svg+xml,%3csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke='black' stroke-width='10' fill='none' fill-rule='evenodd' stroke-linecap='square'%3e%3cpath d='M10 90h160M10 133.488V47M170 133.488V47M90 133.488V47'/%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$e =
+const optimizedSVGDataUri$a =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1763.3333740234375 1792'%3e%3cpath d='M707.333 1440q0 12-10 24l-319 319q-10 9-23 9-12 0-23-9l-320-320q-15-16-7-35 8-20 30-20h192V32q0-14 9-23t23-9h192q14 0 23 9t9 23v1376h192q14 0 23 9t9 23zm1056 128v192q0 14-9 23t-23 9h-832q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h832q14 0 23 9t9 23zm-192-512v192q0 14-9 23t-23 9h-640q-14 0-23-9t-9-23v-192q0-14 9-23t23-9h640q14 0 23 9t9 23zm-192-512v192q0 14-9 23t-23 9h-448q-14 0-23-9t-9-23V544q0-14 9-23t23-9h448q14 0 23 9t9 23zm-192-512v192q0 14-9 23t-23 9h-256q-14 0-23-9t-9-23V32q0-14 9-23t23-9h256q14 0 23 9t9 23z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$d =
+const optimizedSVGDataUri$9 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1664'%3e%3cpath d='M960 672q119 0 203.5 84.5T1248 960t-84.5 203.5T960 1248t-203.5-84.5T672 960t84.5-203.5T960 672zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75H256q-106 0-181-75T0 1408V512q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5T704 0h512q53 0 103.5 35.5T1389 120l51 136h224zM960 1408q185 0 316.5-131.5T1408 960t-131.5-316.5T960 512 643.5 643.5 512 960t131.5 316.5T960 1408z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$c =
+const optimizedSVGDataUri$8 =
   "data:image/svg+xml,%3csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3e%3ctitle%3eSVG_Artboards%3c/title%3e%3crect x='17.52' y='15.45' width='28.97' height='49.1' transform='translate(72 8) rotate(90)' style='fill:%23a7d28c%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3crect x='8.56' y='26.62' width='2.96' height='26.71' style='fill:%23603c89'/%3e%3crect x='11.52' y='26.62' width='2.96' height='26.71' style='fill:%2346449b'/%3e%3crect x='14.42' y='26.62' width='2.96' height='26.71' style='fill:%232a5aa8'/%3e%3crect x='17.38' y='26.62' width='2.96' height='26.71' style='fill:%230c71b8'/%3e%3crect x='20.36' y='26.62' width='2.96' height='26.71' style='fill:%230d7fc2'/%3e%3crect x='23.32' y='26.62' width='2.96' height='26.71' style='fill:%23198ece'/%3e%3crect x='26.22' y='26.62' width='2.96' height='26.71' style='fill:%2325a1db'/%3e%3crect x='29.18' y='26.62' width='2.96' height='26.71' style='fill:%2312b2d2'/%3e%3crect x='32.19' y='26.62' width='2.96' height='26.71' style='fill:%234bb88e'/%3e%3crect x='23.21' y='38.49' width='26.71' height='2.96' transform='translate(76.54 3.41) rotate(90)' style='fill:%2398c37e'/%3e%3crect x='26.17' y='38.49' width='26.71' height='2.96' transform='translate(79.5 0.45) rotate(90)' style='fill:%23a4c661'/%3e%3crect x='29.07' y='38.49' width='26.71' height='2.96' transform='translate(82.4 -2.45) rotate(90)' style='fill:%23c6c835'/%3e%3crect x='32.03' y='38.49' width='26.71' height='2.96' transform='translate(85.36 -5.41) rotate(90)' style='fill:%23e8c61d'/%3e%3crect x='35.01' y='38.49' width='26.71' height='2.96' transform='translate(88.34 -8.39) rotate(90)' style='fill:%23e2ae27'/%3e%3crect x='37.97' y='38.49' width='26.71' height='2.96' transform='translate(91.3 -11.35) rotate(90)' style='fill:%23dc9a2a'/%3e%3crect x='40.87' y='38.49' width='26.71' height='2.96' transform='translate(94.2 -14.25) rotate(90)' style='fill:%23c58338'/%3e%3cline x1='23.49' y1='34.89' x2='23.49' y2='46.71' style='fill:none%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3cline x1='39.95' y1='34.89' x2='39.95' y2='46.71' style='fill:none%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3cline x1='56.07' y1='40.8' x2='8.94' y2='40.8' style='fill:none%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3ccircle cx='21.12' cy='20.63' r='15.5' style='fill:%23a7d28c%3bstroke:%236f6f59%3bstroke-linecap:round%3bstroke-linejoin:round%3bstroke-width:2.2536px'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$b =
+const optimizedSVGDataUri$7 =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='15 15 75.15107913669064 70.19424460431657' width='61.15' height='59.19'%3e%3cdefs%3e%3cpath d='M15 15L76.15 15L76.15 74.19L15 74.19L15 15Z' id='a28rcsTDH'%3e%3c/path%3e%3cclipPath id='clipa5ipCW0hFw'%3e%3cuse xlink:href='%23a28rcsTDH' opacity='1'%3e%3c/use%3e%3c/clipPath%3e%3c/defs%3e%3cg%3e%3cg%3e%3cg%3e%3cfilter id='shadow11528463' x='-5' y='-5' width='113.15' height='108.19' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse'%3e%3cfeFlood%3e%3c/feFlood%3e%3cfeComposite in2='SourceAlpha' operator='in'%3e%3c/feComposite%3e%3cfeGaussianBlur stdDeviation='1'%3e%3c/feGaussianBlur%3e%3cfeOffset dx='12' dy='9' result='afterOffset'%3e%3c/feOffset%3e%3cfeFlood flood-color='black' flood-opacity='0.5'%3e%3c/feFlood%3e%3cfeComposite in2='afterOffset' operator='in'%3e%3c/feComposite%3e%3cfeMorphology operator='dilate' radius='1'%3e%3c/feMorphology%3e%3cfeComposite in2='SourceAlpha' operator='out'%3e%3c/feComposite%3e%3c/filter%3e%3cpath d='M15 15L76.15 15L76.15 74.19L15 74.19L15 15Z' id='ciVjyGjh3' fill='white' fill-opacity='1' filter='url(%23shadow11528463)'%3e%3c/path%3e%3c/g%3e%3cuse xlink:href='%23a28rcsTDH' opacity='1' fill='white' fill-opacity='0'%3e%3c/use%3e%3cg clip-path='url(%23clipa5ipCW0hFw)'%3e%3cuse xlink:href='%23a28rcsTDH' opacity='1' fill-opacity='0' stroke='black' stroke-width='8' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$a =
+const optimizedSVGDataUri$6 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 320'%3e%3cpath d='M353.4 128H30.6C13.7 128 0 142.3 0 160s13.7 32 30.6 32h322.8c16.9 0 30.6-14.3 30.6-32s-13.7-32-30.6-32zm0-128H30.6C13.7 0 0 14.3 0 32s13.7 32 30.6 32h322.8c16.9 0 30.6-14.3 30.6-32S370.3 0 353.4 0zm0 256H30.6C13.7 256 0 270.3 0 288s13.7 32 30.6 32h322.8c16.9 0 30.6-14.3 30.6-32s-13.7-32-30.6-32z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$9 =
+const optimizedSVGDataUri$5 =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='31.654362741230607 28.850229150738443 113.67896134435179 115.80278931174794' width='109.68' height='111.8'%3e%3cdefs%3e%3cpath d='M87.79 29.85L142.33 61.23L87.79 89.05L33.24 61.23L87.79 29.85Z' id='b6gn5Ph4a'%3e%3c/path%3e%3clinearGradient id='gradientc5ieAzTlrB' gradientUnits='userSpaceOnUse' x1='87.79' y1='88.11' x2='86.79' y2='15.31'%3e%3cstop style='stop-color: %238dbee6%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M87.79 141.63L33.24 115L33.24 61.17L87.79 88.83L87.79 141.63Z' id='bcpTLWFe1'%3e%3c/path%3e%3clinearGradient id='gradienta1vdPb9Tx' gradientUnits='userSpaceOnUse' x1='86.52' y1='89.05' x2='58.85' y2='125.96'%3e%3cstop style='stop-color: %237bb2de%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233789cb%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M142.33 115.48L142.31 61.17L87.77 88.26L87.8 141.65L142.33 115.48Z' id='doqFZ6o0V'%3e%3c/path%3e%3clinearGradient id='gradientb6QK8E71A' gradientUnits='userSpaceOnUse' x1='87.77' y1='89.05' x2='125.07' y2='123.31'%3e%3cstop style='stop-color: %237db2dd%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M87.2 58.24L141.75 89.62L87.2 117.43L32.65 89.62L87.2 58.24Z' id='dDpnVVPsa'%3e%3c/path%3e%3cpath d='M117.39 102.02L116.4 47.72L62.36 75.78L63.33 129.16L117.39 102.02Z' id='b2LmEtWKW7'%3e%3c/path%3e%3cpath d='M111.39 129L54.95 100.95L56.3 47.13L112.71 76.21L111.39 129Z' id='a2vWKwK9hV'%3e%3c/path%3e%3cpath d='M87.18 91.77L87.39 62.98L63.46 77.15L63.25 105.45L87.18 91.77Z' id='blEPHXHzV'%3e%3c/path%3e%3cpath d='M87.7 91.5L112.05 105.3L87.7 117.53L63.35 105.3L87.7 91.5Z' id='d10FgvNsKq'%3e%3c/path%3e%3cpath d='M53.45 81.07L63.41 91.93L63.21 105.2L53.84 95.8L53.45 81.07Z' id='b4fb7ce3g6'%3e%3c/path%3e%3cpath d='M54.34 78L63.46 82.93L63.26 92.41L54.68 88.36L54.34 78Z' id='b4t14UEF2B'%3e%3c/path%3e%3cpath d='M45.58 84.93L58.54 91.93L62.69 104.55L50.76 98.72L45.58 84.93Z' id='b7nuEYAotU'%3e%3c/path%3e%3cpath d='M117.88 95.3L117.38 101.98L112.01 104.88L112.16 98.78L117.88 95.3Z' id='cbfwgDbHI'%3e%3c/path%3e%3cpath d='M118.38 75.8L117.88 82.48L112.51 85.38L112.66 79.28L118.38 75.8Z' id='a7u7rrS51C'%3e%3c/path%3e%3cpath d='M118.08 83.3L117.58 89.98L112.21 92.88L112.36 86.78L118.08 83.3Z' id='b2cAudVEyd'%3e%3c/path%3e%3cpath d='M117.98 89.2L117.48 95.88L112.11 98.78L112.26 92.68L117.98 89.2Z' id='hMEdWtW14'%3e%3c/path%3e%3cpath d='M112.44 88.87L118.08 85.26L118.09 79.16L112.79 82.18L112.44 88.87Z' id='d6AqxDBdCj'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23b6gn5Ph4a' opacity='0.4' fill='url(%23gradientc5ieAzTlrB)'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23bcpTLWFe1' opacity='0.4' fill='url(%23gradienta1vdPb9Tx)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23bcpTLWFe1' opacity='0.4' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23doqFZ6o0V' opacity='0.4' fill='url(%23gradientb6QK8E71A)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23doqFZ6o0V' opacity='0.4' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23dDpnVVPsa' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b2LmEtWKW7' opacity='1' fill='%23ffff72' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a2vWKwK9hV' opacity='1' fill='%23ff7b7b' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23blEPHXHzV' opacity='1' fill='%23ffff72' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23d10FgvNsKq' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b4fb7ce3g6' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b4t14UEF2B' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b7nuEYAotU' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23cbfwgDbHI' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23a7u7rrS51C' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23b2cAudVEyd' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23hMEdWtW14' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23d6AqxDBdCj' opacity='1' fill='%2359d87d' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$8 =
+const optimizedSVGDataUri$4 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1152'%3e%3cpath d='M1664 576q-152-236-381-353 61 104 61 225 0 185-131.5 316.5T896 896 579.5 764.5 448 448q0-121 61-225-229 117-381 353 133 205 333.5 326.5T896 1024t434.5-121.5T1664 576zM944 192q0-20-14-34t-34-14q-125 0-214.5 89.5T592 448q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5T896 1152t-499.5-139T20 645Q0 610 0 576t20-69q140-229 376.5-368T896 0t499.5 139T1772 507q20 35 20 69z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$7 =
+const optimizedSVGDataUri$3 =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='17.242414994673346 15 113.09090909090907 115.80278931174797' width='109.09' height='111.8'%3e%3cdefs%3e%3cpath d='M72.79 16L127.33 47.38L72.79 75.19L18.24 47.38L72.79 16Z' id='ahuegR4Z7'%3e%3c/path%3e%3clinearGradient id='gradientg1v0yQ7cPQ' gradientUnits='userSpaceOnUse' x1='72.79' y1='74.26' x2='71.79' y2='1.46'%3e%3cstop style='stop-color: %238dbee6%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M72.79 127.78L18.24 101.15L18.24 47.32L72.79 74.98L72.79 127.78Z' id='apgu3VIlv'%3e%3c/path%3e%3clinearGradient id='gradientbx3q582Ag' gradientUnits='userSpaceOnUse' x1='71.52' y1='75.19' x2='43.85' y2='112.11'%3e%3cstop style='stop-color: %237bb2de%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233789cb%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3cpath d='M127.33 101.63L127.31 47.32L72.77 74.41L72.8 127.8L127.33 101.63Z' id='czTPGmX6c'%3e%3c/path%3e%3clinearGradient id='gradiente44kLH46ez' gradientUnits='userSpaceOnUse' x1='72.77' y1='75.19' x2='110.07' y2='109.46'%3e%3cstop style='stop-color: %237db2dd%3bstop-opacity: 1' offset='0%25'%3e%3c/stop%3e%3cstop style='stop-color: %233384c5%3bstop-opacity: 1' offset='100%25'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23ahuegR4Z7' opacity='0.7' fill='url(%23gradientg1v0yQ7cPQ)'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23apgu3VIlv' opacity='0.7' fill='url(%23gradientbx3q582Ag)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23apgu3VIlv' opacity='0.7' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23czTPGmX6c' opacity='0.7' fill='url(%23gradiente44kLH46ez)'%3e%3c/use%3e%3cg%3e%3cuse xlink:href='%23czTPGmX6c' opacity='0.7' fill-opacity='0' stroke='white' stroke-width='1' stroke-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$6 =
+const optimizedSVGDataUri$2 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2304 1000'%3e%3cpath d='M784 976l16-241-16-523q-1-10-7.5-17t-16.5-7q-9 0-16 7t-7 17l-14 523 14 241q1 10 7.5 16.5T760 999q22 0 24-23zm296-29l11-211-12-586q0-16-13-24-8-5-16-5t-16 5q-13 8-13 24l-1 6-10 579q0 1 11 236v1q0 10 6 17 9 11 23 11 11 0 20-9 9-7 9-20zM35 607l20 128-20 126q-2 9-9 9t-9-9L0 735l17-128q2-9 9-9t9 9zm86-79l26 207-26 203q-2 9-10 9-9 0-9-10L79 735l23-207q0-9 9-9 8 0 10 9zm280 453zM213 490l25 245-25 237q0 11-11 11-10 0-12-11l-21-237 21-245q2-12 12-12 11 0 11 12zm94-7l23 252-23 244q-2 13-14 13-13 0-13-13l-21-244 21-252q0-13 13-13 12 0 14 13zm94 18l21 234-21 246q-2 16-16 16-6 0-10.5-4.5T370 981l-20-246 20-234q0-6 4.5-10.5T385 486q14 0 16 15zm383 475zM495 355l21 380-21 246q0 7-5 12.5t-12 5.5q-16 0-18-18l-18-246 18-380q2-18 18-18 7 0 12 5.5t5 12.5zm94-86l19 468-19 244q0 8-5.5 13.5T570 1000q-18 0-20-19l-16-244 16-468q2-19 20-19 8 0 13.5 5.5T589 269zm98-40l18 506-18 242q-2 21-22 21-19 0-21-21l-16-242 16-506q0-9 6.5-15.5T665 207q9 0 15 6.5t7 15.5zm392 742zM881 225l15 510-15 239q0 10-7.5 17.5T856 999t-17-7-8-18l-14-239 14-510q0-11 7.5-18t17.5-7 17.5 7 7.5 18zm99 19l14 492-14 236q0 11-8 19t-19 8-19-8-9-19l-12-236 12-492q1-12 9-20t19-8 18.5 8 8.5 20zm212 492l-14 231q0 13-9 22t-22 9-22-9-10-22l-6-114-6-117 12-636v-3q2-15 12-24 9-7 20-7 8 0 15 5 14 8 16 26zm1112-19q0 117-83 199.5T2021 999h-786q-13-2-22-11t-9-22V67q0-23 28-33 85-34 181-34 195 0 338 131.5T1911 455q53-22 110-22 117 0 200 83t83 201z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$5 =
+const optimizedSVGDataUri$1 =
   "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3e%3cpath fill='currentColor' d='M128 24a104 104 0 1 0 104 104A104.1 104.1 0 0 0 128 24ZM40 128a88 88 0 0 1 150.2-62.2L65.8 190.2A87.7 87.7 0 0 1 40 128Z'/%3e%3c/svg%3e"
 
-const optimizedSVGDataUri$4 =
+const optimizedSVGDataUri =
   "data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8' standalone='no'%3f%3e %3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' preserveAspectRatio='xMidYMid meet' viewBox='23.90976501025463 25.20464974120776 126.4822541859144 128.7097615525036' width='122.48' height='124.71'%3e%3cdefs%3e%3cpath d='M85.45 26.2L140 57.58L85.45 85.4L30.91 57.58L85.45 26.2Z' id='a1uePnz4ps'%3e%3c/path%3e%3cpath d='M79.91 150.91L24.91 124.08L25 70L80 97.88L79.91 150.91Z' id='e2gEmj1vzg'%3e%3c/path%3e%3cpath d='M147.39 123.62L146.4 69.17L92.61 97.3L93.59 150.83L147.39 123.62Z' id='flL3aFB8'%3e%3c/path%3e%3c/defs%3e%3cg%3e%3cg%3e%3cuse xlink:href='%23a1uePnz4ps' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23e2gEmj1vzg' opacity='1' fill='%233384c5' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3cg%3e%3cuse xlink:href='%23flL3aFB8' opacity='1' fill='%23ffff72' fill-opacity='1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/svg%3e"
 
 function applyContrastSensitiveStyleToElement(context, cssClass, element) {
@@ -233,7 +239,7 @@ function createScreenshotButton(context, mainUIRow) {
     .concat(style.screenshotButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-screenshotButton"><img src="')
-    .concat(optimizedSVGDataUri$d, '" alt="screenshot" /></label>')
+    .concat(optimizedSVGDataUri$9, '" alt="screenshot" /></label>')
   screenshotButton.children[0]
   var screenshotLabel = screenshotButton.children[1]
   applyContrastSensitiveStyleToElement(
@@ -310,6 +316,7 @@ var arrayLikeToArray$1 = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(arrayLikeToArray$1)
+
 ;(function(module) {
   var arrayLikeToArray = arrayLikeToArray$1.exports
 
@@ -371,6 +378,7 @@ var nonIterableSpread$1 = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableSpread$1)
+
 ;(function(module) {
   var arrayWithoutHoles = arrayWithoutHoles$1.exports
 
@@ -444,7 +452,7 @@ function createFullscreenButton(context, mainUIRow) {
       .concat(style.fullscreenButton, ' ')
       .concat(style.toggleButton, '" for="')
       .concat(context.id, '-toggleFullscreenButton"><img src="')
-      .concat(optimizedSVGDataUri$v, '" alt="fullscreen"/></label>')
+      .concat(optimizedSVGDataUri$r, '" alt="fullscreen"/></label>')
     fullscreenButton.children[0]
     fullscreenButton.children[1]
     applyContrastSensitiveStyleToElement(
@@ -489,7 +497,7 @@ function createRotateButton(context, mainUIRow) {
     .concat(style.rotateButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleRotateButton"><img src="')
-    .concat(optimizedSVGDataUri$g, '" alt="rotate"/></label>')
+    .concat(optimizedSVGDataUri$c, '" alt="rotate"/></label>')
   var rotateButtonInput = rotateButton.children[0]
   var rotateButtonLabel = rotateButton.children[1]
   context.main.rotateButtonLabel = rotateButtonLabel
@@ -526,7 +534,7 @@ function createAnnotationsButton(context, mainUIRow) {
     .concat(style.annotationsButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleAnnotationsButton"><img src="')
-    .concat(optimizedSVGDataUri$z, '" alt="annotations"/></label>')
+    .concat(optimizedSVGDataUri$x, '" alt="annotations"/></label>')
   var annotationsButtonInput = annotationsButton.children[0]
   var annotationsButtonLabel = annotationsButton.children[1]
   context.main.annotationsButtonLabel = annotationsButtonLabel
@@ -562,7 +570,7 @@ function createAxesButton(context, mainUIRow) {
     .concat(style.axesButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleAxesButton"><img src="')
-    .concat(optimizedSVGDataUri$y, '" alt="axes"/></label>')
+    .concat(optimizedSVGDataUri$w, '" alt="axes"/></label>')
   var axesButtonInput = axesButton.children[0]
   var axesButtonLabel = axesButton.children[1]
   context.main.axesButtonLabel = axesButtonLabel
@@ -593,7 +601,7 @@ function createViewPlanesToggle(context, volumeRow) {
     .concat(style.viewPlanesButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-toggleSlicingPlanesButton"><img src="')
-    .concat(optimizedSVGDataUri$9, '" alt="view planes" /></label>')
+    .concat(optimizedSVGDataUri$5, '" alt="view planes" /></label>')
   var viewPlanesButtonInput = viewPlanesButton.children[0]
   var viewPlanesButtonLabel = viewPlanesButton.children[1]
   context.main.viewPlanesButton = viewPlanesButton
@@ -708,6 +716,7 @@ var arrayLikeToArray = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(arrayLikeToArray)
+
 ;(function(module) {
   var arrayLikeToArray$1 = arrayLikeToArray.exports
 
@@ -739,6 +748,7 @@ var nonIterableRest$1 = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableRest$1)
+
 ;(function(module) {
   var arrayWithHoles = arrayWithHoles$1.exports
 
@@ -861,6 +871,7 @@ var nonIterableSpread = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableSpread)
+
 ;(function(module) {
   var arrayWithoutHoles$1 = arrayWithoutHoles.exports
 
@@ -928,6 +939,7 @@ var isNativeReflectConstruct = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(isNativeReflectConstruct)
+
 ;(function(module) {
   var setPrototypeOf$1 = setPrototypeOf.exports
 
@@ -1333,6 +1345,7 @@ var getPrototypeOf = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(getPrototypeOf)
+
 ;(function(module) {
   var getPrototypeOf$1 = getPrototypeOf.exports
 
@@ -1349,6 +1362,7 @@ var getPrototypeOf = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(superPropBase)
+
 ;(function(module) {
   var superPropBase$1 = superPropBase.exports
 
@@ -1428,6 +1442,7 @@ var assertThisInitialized = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(assertThisInitialized)
+
 ;(function(module) {
   var _typeof$1 = _typeof.exports['default']
 
@@ -1463,6 +1478,7 @@ var isNativeFunction = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(isNativeFunction)
+
 ;(function(module) {
   var getPrototypeOf$1 = getPrototypeOf.exports
 
@@ -1585,7 +1601,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$8, '" alt="visible" /></label>')
+    .concat(optimizedSVGDataUri$4, '" alt="visible" /></label>')
   xPlaneVisibleButton.children[0]
   xPlaneVisibleButton.children[1]
   xPlaneRow.appendChild(xPlaneVisibleButton)
@@ -1602,7 +1618,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlaneInvisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$q, '" alt="invisible" /></label>')
+    .concat(optimizedSVGDataUri$m, '" alt="invisible" /></label>')
   xPlaneInvisibleButton.children[0]
   xPlaneInvisibleButton.children[1]
   xPlaneRow.appendChild(xPlaneInvisibleButton)
@@ -1651,7 +1667,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlanePauseButton"><img src="')
-    .concat(optimizedSVGDataUri$m, '" alt="pause" /></label>')
+    .concat(optimizedSVGDataUri$i, '" alt="pause" /></label>')
   xPlanePauseButton.children[0]
   xPlanePauseButton.children[1]
   xPlaneRow.appendChild(xPlanePauseButton)
@@ -1668,7 +1684,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-xPlanePlayButton"><img src="')
-    .concat(optimizedSVGDataUri$l, '" alt="play"/></label>')
+    .concat(optimizedSVGDataUri$h, '" alt="play"/></label>')
   xPlanePlayButton.children[0]
   xPlanePlayButton.children[1]
   xPlaneRow.appendChild(xPlanePlayButton)
@@ -1746,7 +1762,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$8, '" alt="visible"/></label>')
+    .concat(optimizedSVGDataUri$4, '" alt="visible"/></label>')
   yPlaneVisibleButton.children[0]
   yPlaneVisibleButton.children[1]
   yPlaneRow.appendChild(yPlaneVisibleButton)
@@ -1762,7 +1778,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlaneInvisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$q, '" alt="invisible" /></label>')
+    .concat(optimizedSVGDataUri$m, '" alt="invisible" /></label>')
   yPlaneInvisibleButton.children[0]
   yPlaneInvisibleButton.children[1]
   yPlaneRow.appendChild(yPlaneInvisibleButton)
@@ -1811,7 +1827,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlanePauseButton"><img src="')
-    .concat(optimizedSVGDataUri$m, '" alt="pause" /></label>')
+    .concat(optimizedSVGDataUri$i, '" alt="pause" /></label>')
   yPlanePauseButton.children[0]
   yPlanePauseButton.children[1]
   yPlaneRow.appendChild(yPlanePauseButton)
@@ -1828,7 +1844,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-yPlanePlayButton"><img src="')
-    .concat(optimizedSVGDataUri$l, '" alt="play"/></label>')
+    .concat(optimizedSVGDataUri$h, '" alt="play"/></label>')
   yPlanePlayButton.children[0]
   yPlanePlayButton.children[1]
   yPlaneRow.appendChild(yPlanePlayButton)
@@ -1906,7 +1922,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlaneVisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$8, '" alt="visible" /></label>')
+    .concat(optimizedSVGDataUri$4, '" alt="visible" /></label>')
   zPlaneVisibleButton.children[0]
   zPlaneVisibleButton.children[1]
   zPlaneRow.appendChild(zPlaneVisibleButton)
@@ -1922,7 +1938,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlaneInvisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$q, '" alt="invisible" /></label>')
+    .concat(optimizedSVGDataUri$m, '" alt="invisible" /></label>')
   zPlaneInvisibleButton.children[0]
   zPlaneInvisibleButton.children[1]
   zPlaneRow.appendChild(zPlaneInvisibleButton)
@@ -1971,7 +1987,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlanePauseButton"><img src="')
-    .concat(optimizedSVGDataUri$m, '" alt="pause" /></label>')
+    .concat(optimizedSVGDataUri$i, '" alt="pause" /></label>')
   zPlanePauseButton.children[0]
   zPlanePauseButton.children[1]
   zPlaneRow.appendChild(zPlanePauseButton)
@@ -1988,7 +2004,7 @@ function createPlaneSliders(context) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-zPlanePlayButton"><img src="')
-    .concat(optimizedSVGDataUri$l, '" alt="play" /></label>')
+    .concat(optimizedSVGDataUri$h, '" alt="play" /></label>')
   zPlanePlayButton.children[0]
   zPlanePlayButton.children[1]
   zPlaneRow.appendChild(zPlanePlayButton)
@@ -2071,7 +2087,7 @@ function createBackgroundColorButton(context, mainUIRow) {
     .concat(style.bgColorButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-bgColorButton"><img src="')
-    .concat(optimizedSVGDataUri$c, '" alt="select color" /></label>')
+    .concat(optimizedSVGDataUri$8, '" alt="select color" /></label>')
   var bgColorButtonInput = bgColorButton.children[0]
   var bgColorButtonLabel = bgColorButton.children[1]
   context.main.bgColorButtonLabel = bgColorButtonLabel
@@ -2112,7 +2128,7 @@ function createCroppingButtons(context, mainUIRow) {
     .concat(style.cropButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-toggleCroppingPlanesButton"><img src="')
-    .concat(optimizedSVGDataUri$w, '" alt="crop"/></label>')
+    .concat(optimizedSVGDataUri$t, '" alt="crop"/></label>')
   var cropButtonInput = cropButton.children[0]
   var cropButtonLabel = cropButton.children[1]
   context.main.cropButtonLabel = cropButtonLabel
@@ -2139,7 +2155,7 @@ function createCroppingButtons(context, mainUIRow) {
     .concat(style.resetCropButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-resetCroppingPlanesButton"><img src="')
-    .concat(optimizedSVGDataUri$i, '" alt="reset crop"/></label>')
+    .concat(optimizedSVGDataUri$e, '" alt="reset crop"/></label>')
   var resetCropButtonLabel = resetCropButton.children[1]
   context.main.resetCropButtonLabel = resetCropButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2175,7 +2191,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-xPlaneButton"><img src="')
-    .concat(optimizedSVGDataUri$k, '" alt="x plane"/></label>')
+    .concat(optimizedSVGDataUri$g, '" alt="x plane"/></label>')
   var xPlaneButtonLabel = xPlaneButton.children[1]
   context.main.xPlaneButtonLabel = xPlaneButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2203,7 +2219,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-yPlaneButton"><img src="')
-    .concat(optimizedSVGDataUri$4, '" alt="y plane" /></label>')
+    .concat(optimizedSVGDataUri, '" alt="y plane" /></label>')
   var yPlaneButtonLabel = yPlaneButton.children[1]
   context.main.yPlaneButtonLabel = yPlaneButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2231,7 +2247,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-zPlaneButton"><img src="')
-    .concat(optimizedSVGDataUri$t, '" alt="z plane" /></label>')
+    .concat(optimizedSVGDataUri$p, '" alt="z plane" /></label>')
   var zPlaneButtonLabel = zPlaneButton.children[1]
   context.main.zPlaneButtonLabel = zPlaneButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2259,7 +2275,7 @@ function createViewModeButtons(context, mainRow) {
     .concat(style.viewModeButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-volumeButton"><img src="')
-    .concat(optimizedSVGDataUri$7, '" alt="volume" /></label>')
+    .concat(optimizedSVGDataUri$3, '" alt="volume" /></label>')
   var volumeButtonLabel = volumeButton.children[1]
   context.main.volumeButtonLabel = volumeButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2290,7 +2306,7 @@ function createResetCameraButton(context, mainUIRow) {
     .concat(style.resetCameraButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-resetCameraButton"><img src="')
-    .concat(optimizedSVGDataUri$j, '" alt="reset camera" /></label>')
+    .concat(optimizedSVGDataUri$f, '" alt="reset camera" /></label>')
   var resetCameraButtonLabel = resetCameraButton.children[1]
   context.main.resetCameraButtonLabel = resetCameraButtonLabel
   applyContrastSensitiveStyleToElement(
@@ -2680,18 +2696,6 @@ function createLayersInterface(context) {
   context.layers.compareContainer = compareContainer
 }
 
-const optimizedSVGDataUri$3 =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='currentColor' d='M17 22v-2h3v-3h2v3.5c0 .39-.16.74-.46 1.04c-.3.3-.65.46-1.04.46H17M7 22H3.5c-.39 0-.74-.16-1.04-.46c-.3-.3-.46-.65-.46-1.04V17h2v3h3v2M17 2h3.5c.39 0 .74.16 1.04.46c.3.3.46.65.46 1.04V7h-2V4h-3V2M7 2v2H4v3H2V3.5c0-.39.16-.74.46-1.04c.3-.3.65-.46 1.04-.46H7m6 15.25l4-2.3v-4.59l-4 2.3v4.59m-1-6.33l4-2.29l-4-2.35l-4 2.35l4 2.29m-5 4.03l4 2.3v-4.59l-4-2.3v4.59m11.23-7.36c.5.32.77.75.77 1.32v6.32c0 .57-.27 1-.77 1.32l-5.48 3.18c-.5.32-1 .32-1.5 0l-5.48-3.18c-.5-.32-.77-.75-.77-1.32V8.91c0-.57.27-1 .77-1.32l5.48-3.18c.25-.13.5-.19.75-.19s.5.06.75.19l5.48 3.18Z'/%3e%3c/svg%3e"
-
-const optimizedSVGDataUri$2 =
-  "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3c!-- Uploaded to: SVG Repo%2c www.svgrepo.com%2c Generator: SVG Repo Mixer Tools --%3e %3csvg fill='black' width='800px' height='800px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.293%2c13.707a1%2c1%2c0%2c1%2c1%2c1.414-1.414L11%2c14.586V3a1%2c1%2c0%2c0%2c1%2c2%2c0V14.586l2.293-2.293a1%2c1%2c0%2c0%2c1%2c1.414%2c1.414l-4%2c4a1%2c1%2c0%2c0%2c1-.325.216.986.986%2c0%2c0%2c1-.764%2c0%2c1%2c1%2c0%2c0%2c1-.325-.216ZM22%2c12a1%2c1%2c0%2c0%2c0-1%2c1v7H3V13a1%2c1%2c0%2c0%2c0-2%2c0v8a1%2c1%2c0%2c0%2c0%2c1%2c1H22a1%2c1%2c0%2c0%2c0%2c1-1V13A1%2c1%2c0%2c0%2c0%2c22%2c12Z'/%3e%3c/svg%3e"
-
-const optimizedSVGDataUri$1 =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1344'%3e%3cpath d='M555 1047l78-141q-87-63-136-159t-49-203q0-121 61-225-229 117-381 353 167 258 427 375zm389-759q0-20-14-34t-34-14q-125 0-214.5 89.5T592 544q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm363-191q0 7-1 9-105 188-315 566t-316 567l-49 89q-10 16-28 16-12 0-134-70-16-10-16-28 0-12 44-87-143-65-263.5-173T20 741Q0 710 0 672t20-69q153-235 380-371T896 96q89 0 180 17l54-97q10-16 28-16 5 0 18 6t31 15.5 33 18.5 31.5 18.5T1291 70q16 10 16 27zm37 447q0 139-79 253.5T1056 962l280-502q8 45 8 84zm448 128q0 35-20 69-39 64-109 145-150 172-347.5 267T896 1248l74-132q212-18 392.5-137T1664 672q-115-179-282-294l63-112q95 64 182.5 153T1772 603q20 34 20 69z'/%3e%3c/svg%3e"
-
-const optimizedSVGDataUri =
-  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1152'%3e%3cpath d='M1664 576q-152-236-381-353 61 104 61 225 0 185-131.5 316.5T896 896 579.5 764.5 448 448q0-121 61-225-229 117-381 353 133 205 333.5 326.5T896 1024t434.5-121.5T1664 576zM944 192q0-20-14-34t-34-14q-125 0-214.5 89.5T592 448q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5T896 1152t-499.5-139T20 645Q0 610 0 576t20-69q140-229 376.5-368T896 0t499.5 139T1772 507q20 35 20 69z'/%3e%3c/svg%3e"
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -7890,11 +7894,11 @@ let LayerIcon = class LayerIcon extends s$4 {
         this.otherImages.value &&
         this.otherImages.value.length > 0
       )
-        return { icon: optimizedSVGDataUri$a, alt: 'settings' }
-      return { icon: optimizedSVGDataUri$s, alt: 'image' }
+        return { icon: optimizedSVGDataUri$6, alt: 'settings' }
+      return { icon: optimizedSVGDataUri$o, alt: 'image' }
     }
     if (this.layer.type === 'labelImage')
-      return { icon: optimizedSVGDataUri$p, alt: 'labels' }
+      return { icon: optimizedSVGDataUri$l, alt: 'labels' }
     throw new Error(`Unsupported layer type: ${this.layer.type}`)
   }
   render() {
@@ -7943,7 +7947,7 @@ function createLayerEntry(context, name, layer) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-visibleButton"><img src="')
-    .concat(optimizedSVGDataUri, '" alt="visible"/></label>')
+    .concat(optimizedSVGDataUri$4, '" alt="visible"/></label>')
   var visibleLabel = visibleButton.children[1]
   applyContrastSensitiveStyleToElement(
     context,
@@ -7961,7 +7965,7 @@ function createLayerEntry(context, name, layer) {
     .concat(style.visibleButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-invisibleButton"><img src="')
-    .concat(optimizedSVGDataUri$1, ' alt="invisible""/></label>')
+    .concat(optimizedSVGDataUri$m, ' alt="invisible""/></label>')
   var invisibleLabel = invisibleButton.children[1]
   applyContrastSensitiveStyleToElement(
     context,
@@ -8017,7 +8021,7 @@ function createLayerEntry(context, name, layer) {
     )
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-layerBBoxButton"><img src="')
-    .concat(optimizedSVGDataUri$3, '" alt="bbox"/></label>')
+    .concat(optimizedSVGDataUri$u, '" alt="bbox"/></label>')
   var layerBBoxButtonInput = layerBBoxButton.children[0]
   var layerBBoxLabel = layerBBoxButton.children[1]
   layerBBoxButton.style.height = '23px'
@@ -8052,7 +8056,7 @@ function createLayerEntry(context, name, layer) {
       context.id,
       '-download-image">\n    <img style="height: 23px" src="'
     )
-    .concat(optimizedSVGDataUri$2, '" />\n  </label>\n  ')
+    .concat(optimizedSVGDataUri$s, '" />\n  </label>\n  ')
   var downloadImageLabel = downloadImage.children[1]
   downloadImage.style.height = '23px'
   applyContrastSensitiveStyleToElement(
@@ -8225,6 +8229,7 @@ var nonIterableRest = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(nonIterableRest)
+
 ;(function(module) {
   var arrayWithHoles$1 = arrayWithHoles.exports
 
@@ -8320,6 +8325,7 @@ var iterableToArrayLimit = { exports: {} }
     (module.exports.__esModule = true),
     (module.exports['default'] = module.exports)
 })(iterableToArrayLimit)
+
 ;(function(module) {
   var arrayWithHoles$1 = arrayWithHoles.exports
 
@@ -8436,7 +8442,7 @@ var compareUI = function compareUI(context) {
         .concat(style.noFlexBasis, ' ')
         .concat(style.toggleButton, '" for="')
         .concat(playImageMixButtonId, '">\n          <img src="')
-        .concat(optimizedSVGDataUri$l, '" id="')
+        .concat(optimizedSVGDataUri$h, '" id="')
         .concat(
           playImageMixImgId,
           '" alt="animate" />\n        </label>\n      </input>\n      <input type="range" min="0" max="1" step=".01" value=".5" \n        class="'
@@ -8451,7 +8457,7 @@ var compareUI = function compareUI(context) {
         .concat(style.rotateButton, ' ')
         .concat(style.toggleButton, '">\n          <img src="')
         .concat(
-          optimizedSVGDataUri$g,
+          optimizedSVGDataUri$c,
           '" alt="rotate"/>\n        </label>\n      </input>\n    </div>\n  '
         )
     )
@@ -8521,8 +8527,8 @@ var compareUI = function compareUI(context) {
         imageContext !== null &&
         imageContext !== void 0 &&
         imageContext.imageMixAnimation
-          ? optimizedSVGDataUri$m
-          : optimizedSVGDataUri$l
+          ? optimizedSVGDataUri$i
+          : optimizedSVGDataUri$h
     }
     update()
     var updateCompare = function updateCompare(options) {
@@ -8711,7 +8717,7 @@ function createInterpolationButton(context, uiRow) {
     .concat(style.interpolationButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleInterpolationButton"><img src="')
-    .concat(optimizedSVGDataUri$r, '" alt="interpolation" /></label>')
+    .concat(optimizedSVGDataUri$n, '" alt="interpolation" /></label>')
   var interpolationButtonInput = interpolationButton.children[0]
   var interpolationButtonLabel = interpolationButton.children[1]
   context.images.interpolationButtonLabel = interpolationButtonLabel
@@ -21736,7 +21742,7 @@ function createWindowLevelReset(context, uiContainer) {
   var windowLevelResetButton = document.createElement('div')
   windowLevelResetButton.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-left itk-vtk-tooltip-content="Reset range to ROI" class="'
     .concat(style.windowLevelButton, '">\n      <img src="')
-    .concat(optimizedSVGDataUri$h, '" alt="gradient opacity"/>\n    </div>\n  ')
+    .concat(optimizedSVGDataUri$d, '" alt="gradient opacity"/>\n    </div>\n  ')
   var windowLevelResetButtonInput = windowLevelResetButton.children[0]
   var windowLevelResetButtonLabel = windowLevelResetButton.children[1]
   applyContrastSensitiveStyleToElement(
@@ -22680,7 +22686,7 @@ function createShadowToggle(context, uiContainer) {
     .concat(style.shadowButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-toggleShadowButton"><img src="')
-    .concat(optimizedSVGDataUri$b, '" alt="shadow" /></label>')
+    .concat(optimizedSVGDataUri$7, '" alt="shadow" /></label>')
   var shadowButtonInput = shadowButton.children[0]
   var shadowButtonLabel = shadowButton.children[1]
   applyContrastSensitiveStyleToElement(
@@ -22707,7 +22713,7 @@ function createGradientOpacitySlider(context, uiContainer) {
   sliderEntry.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-fullscreen itk-vtk-tooltip-content="Gradient opacity scale" class="'
     .concat(style.gradientOpacitySlider, '">\n      <img src="')
     .concat(
-      optimizedSVGDataUri$u,
+      optimizedSVGDataUri$q,
       '" alt="gradient opacity"/>\n    </div>\n    <div class="'
     )
     .concat(
@@ -22770,7 +22776,7 @@ function createSampleDistanceSlider(context, uiContainer) {
   sliderEntry.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-screenshot itk-vtk-tooltip-content="Volume sample distance" class="'
     .concat(style.sampleDistanceButton, '">\n      <img src="')
     .concat(
-      optimizedSVGDataUri$f,
+      optimizedSVGDataUri$b,
       '" alt="sample distance" />\n    </div>\n    <input type="range" min="0" max="1" value="0.25" step="0.01"\n      class="'
     )
     .concat(style.slider, ' ')
@@ -22800,7 +22806,7 @@ function createBlendModeSelector(context, uiContainer) {
   var blendModeEntry = document.createElement('div')
   blendModeEntry.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Blend mode"\n      class="'
     .concat(style.blendModeButton, '">\n      <img src="')
-    .concat(optimizedSVGDataUri$x, '" alt="blend mode" />\n    </div>\n    ')
+    .concat(optimizedSVGDataUri$v, '" alt="blend mode" />\n    </div>\n    ')
   var blendModeDiv = blendModeEntry.children[0]
   context.images.blendModeDiv = blendModeDiv
   applyContrastSensitiveStyleToElement(
@@ -22856,7 +22862,7 @@ function makeSlider(context, label, parameterName, _ref) {
   container.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-screenshot itk-vtk-tooltip-content="'
     .concat(label, '" class="')
     .concat(style.sliderIcon, '">\n      <img src="')
-    .concat(optimizedSVGDataUri$6, '" alt="')
+    .concat(optimizedSVGDataUri$2, '" alt="')
     .concat(label, '" />\n    </div>\n    <input type="range" min="')
     .concat(min, '" max="')
     .concat(max, '" step="')
@@ -22918,7 +22924,7 @@ function createWindowLevelToggle(context, uiContainer) {
     .concat(style.windowLevelButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-windowLevelToggle"><img src="')
-    .concat(optimizedSVGDataUri$5, '" alt="Window/Level" /></label>')
+    .concat(optimizedSVGDataUri$1, '" alt="Window/Level" /></label>')
   var windowLevelToggleInput = windowLevelToggle.children[0]
   var windowLevelToggleLabel = windowLevelToggle.children[1]
   applyContrastSensitiveStyleToElement(
@@ -23104,7 +23110,7 @@ function createLabelImageColorWidget(context) {
   sliderEntry.innerHTML = '\n  <div itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label image blend" class="'
     .concat(style.gradientOpacitySlider, '">\n    <img src="')
     .concat(
-      optimizedSVGDataUri$n,
+      optimizedSVGDataUri$j,
       '" alt="opacity"/>\n  </div>\n  <input type="range" min="0" max="1" value="0.5" step="0.01"\n  id="'
     )
     .concat(context.id, '-labelImageBlendSlider"\n  class="')
@@ -23820,7 +23826,7 @@ var scaleSelector = function scaleSelector(context, event) {
     scaleSelectorDiv.innerHTML = '\n    <div itk-vtk-tooltip itk-vtk-tooltip-top-screenshot itk-vtk-tooltip-content="Resolution Scale"\n      class="'
       .concat(style.blendModeButton, '">\n      <img src="')
       .concat(
-        optimizedSVGDataUri$e,
+        optimizedSVGDataUri$a,
         '" alt="Resolution Scale" />\n    </div>\n    '
       )
     var scaleSelectorIcon = scaleSelectorDiv.children[0]
@@ -24005,7 +24011,7 @@ function createDistanceWidget(context, widgetsUIGroup) {
     .concat(style.distanceButton, ' ')
     .concat(style.toggleButton, '" for="')
     .concat(viewerDOMId, '-toggleDistanceButton"><img src="')
-    .concat(optimizedSVGDataUri$o, '" alt="distance"/></label>')
+    .concat(optimizedSVGDataUri$k, '" alt="distance"/></label>')
   context.widgets.distanceButtonInput = distanceButton.children[0]
   context.widgets.distanceButtonInput.checked = context.widgets.distanceEnabled
   var distanceButtonLabel = distanceButton.children[1]
@@ -24701,7 +24707,7 @@ let CollapseUi = class CollapseUi extends s$4 {
   render() {
     return y`
       <md-standard-icon-button @click=${this.toggleUi}>
-        <img src="${optimizedSVGDataUri$a}" alt="toggle" class="icon" />
+        <img src="${optimizedSVGDataUri$6}" alt="toggle" class="icon" />
       </md-standard-icon-button>
     `
   }
diff --git a/src/UI/reference-ui/package-lock.json b/src/UI/reference-ui/package-lock.json
index 91acb111..13879f95 100644
--- a/src/UI/reference-ui/package-lock.json
+++ b/src/UI/reference-ui/package-lock.json
@@ -14,7 +14,6 @@
         "@lit-labs/context": "^0.2.0",
         "@material/web": "^1.0.0-pre.4",
         "itk-viewer-color-maps": "^1.2.0",
-        "itk-viewer-icons": "^11.14.0",
         "itk-viewer-transfer-function-editor": "^1.2.5",
         "lit": "^2.4.0",
         "xstate-lit": "^1.3.1"
@@ -1571,11 +1570,6 @@
       "resolved": "https://registry.npmjs.org/itk-viewer-color-maps/-/itk-viewer-color-maps-1.2.0.tgz",
       "integrity": "sha512-Ny4LLvVtR2T0c6L9wT+R1MLO4YgsSUWjJZwfHmINiiNTQ5yMR+1tFLLXK5yI4rOudVUS+DoVXd5qAKFOZHRniw=="
     },
-    "node_modules/itk-viewer-icons": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/itk-viewer-icons/-/itk-viewer-icons-11.14.0.tgz",
-      "integrity": "sha512-Yb81spokfdpJ3U7i+zBnkyxg4I4kyFf9LlLex70VxoYF9WzHrrmj+4/UJvgwB7Yk0ms0hD95RtOQj2xIJGzyCQ=="
-    },
     "node_modules/itk-viewer-transfer-function-editor": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/itk-viewer-transfer-function-editor/-/itk-viewer-transfer-function-editor-1.2.5.tgz",
@@ -4082,11 +4076,6 @@
       "resolved": "https://registry.npmjs.org/itk-viewer-color-maps/-/itk-viewer-color-maps-1.2.0.tgz",
       "integrity": "sha512-Ny4LLvVtR2T0c6L9wT+R1MLO4YgsSUWjJZwfHmINiiNTQ5yMR+1tFLLXK5yI4rOudVUS+DoVXd5qAKFOZHRniw=="
     },
-    "itk-viewer-icons": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/itk-viewer-icons/-/itk-viewer-icons-11.14.0.tgz",
-      "integrity": "sha512-Yb81spokfdpJ3U7i+zBnkyxg4I4kyFf9LlLex70VxoYF9WzHrrmj+4/UJvgwB7Yk0ms0hD95RtOQj2xIJGzyCQ=="
-    },
     "itk-viewer-transfer-function-editor": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/itk-viewer-transfer-function-editor/-/itk-viewer-transfer-function-editor-1.2.5.tgz",
diff --git a/src/UI/reference-ui/package.json b/src/UI/reference-ui/package.json
index 3de05122..f044010c 100644
--- a/src/UI/reference-ui/package.json
+++ b/src/UI/reference-ui/package.json
@@ -45,7 +45,6 @@
     "@lit-labs/context": "^0.2.0",
     "@material/web": "^1.0.0-pre.4",
     "itk-viewer-color-maps": "^1.2.0",
-    "itk-viewer-icons": "^11.14.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "lit": "^2.4.0",
     "xstate-lit": "^1.3.1"
diff --git a/src/UI/reference-ui/src/Images/cinematic.js b/src/UI/reference-ui/src/Images/cinematic.js
index d95a5949..45390655 100644
--- a/src/UI/reference-ui/src/Images/cinematic.js
+++ b/src/UI/reference-ui/src/Images/cinematic.js
@@ -1,5 +1,5 @@
 import style from '../ItkVtkViewer.module.css'
-import { volumeScatteringIconDataUri } from 'itk-viewer-icons'
+import { volumeScatteringIconDataUri } from '@itk-viewer/icons'
 
 const sliderMap = new Map()
 
diff --git a/src/UI/reference-ui/src/Images/createBlendModeSelector.js b/src/UI/reference-ui/src/Images/createBlendModeSelector.js
index f430d530..d5568f18 100644
--- a/src/UI/reference-ui/src/Images/createBlendModeSelector.js
+++ b/src/UI/reference-ui/src/Images/createBlendModeSelector.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { blendModeIconDataUri } from 'itk-viewer-icons'
+import { blendModeIconDataUri } from '@itk-viewer/icons'
 
 function createBlendModeSelector(context, uiContainer) {
   const blendModeEntry = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Images/createGradientOpacitySlider.js b/src/UI/reference-ui/src/Images/createGradientOpacitySlider.js
index f8f8e526..05c35e42 100644
--- a/src/UI/reference-ui/src/Images/createGradientOpacitySlider.js
+++ b/src/UI/reference-ui/src/Images/createGradientOpacitySlider.js
@@ -3,7 +3,7 @@ import macro from '@kitware/vtk.js/macro'
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { gradientIconDataUri } from 'itk-viewer-icons'
+import { gradientIconDataUri } from '@itk-viewer/icons'
 
 function createGradientOpacitySlider(context, uiContainer) {
   const sliderEntry = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Images/createInterpolationButton.js b/src/UI/reference-ui/src/Images/createInterpolationButton.js
index bc9775b0..d13456b7 100644
--- a/src/UI/reference-ui/src/Images/createInterpolationButton.js
+++ b/src/UI/reference-ui/src/Images/createInterpolationButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { interpolationIconDataUri } from 'itk-viewer-icons'
+import { interpolationIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import toggleInterpolation from './toggleInterpolation'
 
diff --git a/src/UI/reference-ui/src/Images/createLabelImageColorWidget.js b/src/UI/reference-ui/src/Images/createLabelImageColorWidget.js
index e07ee078..b0d215a8 100644
--- a/src/UI/reference-ui/src/Images/createLabelImageColorWidget.js
+++ b/src/UI/reference-ui/src/Images/createLabelImageColorWidget.js
@@ -4,7 +4,7 @@ import createCategoricalColorIconSelector from '../createCategoricalColorIconSel
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { opacityIconDataUri } from 'itk-viewer-icons'
+import { opacityIconDataUri } from '@itk-viewer/icons'
 
 function createLabelImageColorWidget(context) {
   const viewerDOMId = context.id
diff --git a/src/UI/reference-ui/src/Images/createSampleDistanceSlider.js b/src/UI/reference-ui/src/Images/createSampleDistanceSlider.js
index c1e05cf1..1687bd78 100644
--- a/src/UI/reference-ui/src/Images/createSampleDistanceSlider.js
+++ b/src/UI/reference-ui/src/Images/createSampleDistanceSlider.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { sampleDistanceIconDataUri } from 'itk-viewer-icons'
+import { sampleDistanceIconDataUri } from '@itk-viewer/icons'
 
 function createSampleDistanceSlider(context, uiContainer) {
   const sliderEntry = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Images/createShadowToggle.js b/src/UI/reference-ui/src/Images/createShadowToggle.js
index eacbc47b..5011bdb5 100644
--- a/src/UI/reference-ui/src/Images/createShadowToggle.js
+++ b/src/UI/reference-ui/src/Images/createShadowToggle.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { shadowIconDataUri } from 'itk-viewer-icons'
+import { shadowIconDataUri } from '@itk-viewer/icons'
 
 function createShadowToggle(context, uiContainer) {
   const shadowButton = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Images/createWindowLevelReset.js b/src/UI/reference-ui/src/Images/createWindowLevelReset.js
index 4b01d137..c0fe56fb 100644
--- a/src/UI/reference-ui/src/Images/createWindowLevelReset.js
+++ b/src/UI/reference-ui/src/Images/createWindowLevelReset.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { resetImageIconDataUri } from 'itk-viewer-icons'
+import { resetImageIconDataUri } from '@itk-viewer/icons'
 
 function createWindowLevelReset(context, uiContainer) {
   const windowLevelResetButton = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Images/createWindowLevelToggle.js b/src/UI/reference-ui/src/Images/createWindowLevelToggle.js
index 534ab7fb..55faaf2c 100644
--- a/src/UI/reference-ui/src/Images/createWindowLevelToggle.js
+++ b/src/UI/reference-ui/src/Images/createWindowLevelToggle.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { windowingIconDataUri } from 'itk-viewer-icons'
+import { windowingIconDataUri } from '@itk-viewer/icons'
 
 function createWindowLevelToggle(context, uiContainer) {
   const windowLevelToggle = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Images/scaleSelector.js b/src/UI/reference-ui/src/Images/scaleSelector.js
index 3c13a77f..49e1efc4 100644
--- a/src/UI/reference-ui/src/Images/scaleSelector.js
+++ b/src/UI/reference-ui/src/Images/scaleSelector.js
@@ -1,6 +1,6 @@
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import style from '../ItkVtkViewer.module.css'
-import { scaleSelectIconDataUri } from 'itk-viewer-icons'
+import { scaleSelectIconDataUri } from '@itk-viewer/icons'
 
 function applyScaleCount(input, scaleCount) {
   input.innerHTML = '' // clear old options
diff --git a/src/UI/reference-ui/src/Layers/compareUI.js b/src/UI/reference-ui/src/Layers/compareUI.js
index cc223623..f410a56b 100644
--- a/src/UI/reference-ui/src/Layers/compareUI.js
+++ b/src/UI/reference-ui/src/Layers/compareUI.js
@@ -2,7 +2,7 @@ import {
   playIconDataUri,
   pauseIconDataUri,
   rotateIconDataUri,
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 import style from '../ItkVtkViewer.module.css'
 import { makeHtml } from '../utils'
 
diff --git a/src/UI/reference-ui/src/Layers/layerIcon.ts b/src/UI/reference-ui/src/Layers/layerIcon.ts
index f9bd95fe..2fce9552 100644
--- a/src/UI/reference-ui/src/Layers/layerIcon.ts
+++ b/src/UI/reference-ui/src/Layers/layerIcon.ts
@@ -5,7 +5,7 @@ import {
   imageIconDataUri,
   labelsIconDataUri,
   toggleIconDataUri,
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 import { viewerContext } from '../context'
 
 import './layerSettings.js'
diff --git a/src/UI/reference-ui/src/Main/createAnnotationsButton.js b/src/UI/reference-ui/src/Main/createAnnotationsButton.js
index 98bbc2ed..5dd470f8 100644
--- a/src/UI/reference-ui/src/Main/createAnnotationsButton.js
+++ b/src/UI/reference-ui/src/Main/createAnnotationsButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { annotationsIconDataUri } from 'itk-viewer-icons'
+import { annotationsIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import toggleAnnotations from './toggleAnnotations'
 
diff --git a/src/UI/reference-ui/src/Main/createAxesButton.js b/src/UI/reference-ui/src/Main/createAxesButton.js
index 5985ef80..c48b2a27 100644
--- a/src/UI/reference-ui/src/Main/createAxesButton.js
+++ b/src/UI/reference-ui/src/Main/createAxesButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { axesIconDataUri } from 'itk-viewer-icons'
+import { axesIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import toggleAxes from './toggleAxes'
 
diff --git a/src/UI/reference-ui/src/Main/createBackgroundColorButton.js b/src/UI/reference-ui/src/Main/createBackgroundColorButton.js
index 0dc8c89e..761fd97c 100644
--- a/src/UI/reference-ui/src/Main/createBackgroundColorButton.js
+++ b/src/UI/reference-ui/src/Main/createBackgroundColorButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { selectColorIconDataUri } from 'itk-viewer-icons'
+import { selectColorIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
 function createBackgroundColorButton(context, mainUIRow) {
diff --git a/src/UI/reference-ui/src/Main/createCroppingButtons.js b/src/UI/reference-ui/src/Main/createCroppingButtons.js
index 178b838d..feae703c 100644
--- a/src/UI/reference-ui/src/Main/createCroppingButtons.js
+++ b/src/UI/reference-ui/src/Main/createCroppingButtons.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { cropIconDataUri, resetCropIconDataUri } from 'itk-viewer-icons'
+import { cropIconDataUri, resetCropIconDataUri } from '@itk-viewer/icons'
 import toggleCroppingPlanes from './toggleCroppingPlanes'
 
 function createCroppingButtons(context, mainUIRow) {
diff --git a/src/UI/reference-ui/src/Main/createFullscreenButton.js b/src/UI/reference-ui/src/Main/createFullscreenButton.js
index 30dadd47..c7ebaf6f 100644
--- a/src/UI/reference-ui/src/Main/createFullscreenButton.js
+++ b/src/UI/reference-ui/src/Main/createFullscreenButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { fullscreenIconDataUri } from 'itk-viewer-icons'
+import { fullscreenIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import fullscreenMethods from './fullscreenMethods'
 
diff --git a/src/UI/reference-ui/src/Main/createPlaneSliders.js b/src/UI/reference-ui/src/Main/createPlaneSliders.js
index b0018684..f9820eb5 100644
--- a/src/UI/reference-ui/src/Main/createPlaneSliders.js
+++ b/src/UI/reference-ui/src/Main/createPlaneSliders.js
@@ -6,7 +6,7 @@ import {
   invisibleIconDataUri,
   pauseIconDataUri,
   playIconDataUri,
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 
 function createPlaneSliders(context) {
   const planeUIGroup = document.createElement('div')
diff --git a/src/UI/reference-ui/src/Main/createResetCameraButton.js b/src/UI/reference-ui/src/Main/createResetCameraButton.js
index 50b0e005..7c26d621 100644
--- a/src/UI/reference-ui/src/Main/createResetCameraButton.js
+++ b/src/UI/reference-ui/src/Main/createResetCameraButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { resetCameraIconDataUri } from 'itk-viewer-icons'
+import { resetCameraIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
 function createResetCameraButton(context, mainUIRow) {
diff --git a/src/UI/reference-ui/src/Main/createRotateButton.js b/src/UI/reference-ui/src/Main/createRotateButton.js
index 528e6e08..1413a0b8 100644
--- a/src/UI/reference-ui/src/Main/createRotateButton.js
+++ b/src/UI/reference-ui/src/Main/createRotateButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { rotateIconDataUri } from 'itk-viewer-icons'
+import { rotateIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 import toggleRotate from './toggleRotate'
 
diff --git a/src/UI/reference-ui/src/Main/createScreenshotButton.js b/src/UI/reference-ui/src/Main/createScreenshotButton.js
index 0ca1d50d..310a1d45 100644
--- a/src/UI/reference-ui/src/Main/createScreenshotButton.js
+++ b/src/UI/reference-ui/src/Main/createScreenshotButton.js
@@ -1,6 +1,6 @@
 import style from '../ItkVtkViewer.module.css'
 
-import { screenshotIconDataUri } from 'itk-viewer-icons'
+import { screenshotIconDataUri } from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
 function createScreenshotButton(context, mainUIRow) {
diff --git a/src/UI/reference-ui/src/Main/createViewModeButtons.js b/src/UI/reference-ui/src/Main/createViewModeButtons.js
index fbbb021e..8f2bdd80 100644
--- a/src/UI/reference-ui/src/Main/createViewModeButtons.js
+++ b/src/UI/reference-ui/src/Main/createViewModeButtons.js
@@ -5,7 +5,7 @@ import {
   redPlaneIconDataUri,
   yellowPlaneIconDataUri,
   greenPlaneIconDataUri,
-} from 'itk-viewer-icons'
+} from '@itk-viewer/icons'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
 function createViewModeButtons(context, mainRow) {
diff --git a/src/UI/reference-ui/src/Main/createViewPlanesToggle.js b/src/UI/reference-ui/src/Main/createViewPlanesToggle.js
index 43bd76d9..89c5929d 100644
--- a/src/UI/reference-ui/src/Main/createViewPlanesToggle.js
+++ b/src/UI/reference-ui/src/Main/createViewPlanesToggle.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { viewPlanesIconDataUri } from 'itk-viewer-icons'
+import { viewPlanesIconDataUri } from '@itk-viewer/icons'
 
 function createViewPlanesToggle(context, volumeRow) {
   const viewerDOMId = context.id
diff --git a/src/UI/reference-ui/src/Widgets/createDistanceWidget.js b/src/UI/reference-ui/src/Widgets/createDistanceWidget.js
index 3de1f02d..e13b13e5 100644
--- a/src/UI/reference-ui/src/Widgets/createDistanceWidget.js
+++ b/src/UI/reference-ui/src/Widgets/createDistanceWidget.js
@@ -1,7 +1,7 @@
 import style from '../ItkVtkViewer.module.css'
 import applyContrastSensitiveStyleToElement from '../applyContrastSensitiveStyleToElement'
 
-import { lengthToolIconDataUri } from 'itk-viewer-icons'
+import { lengthToolIconDataUri } from '@itk-viewer/icons'
 
 function createDistanceWidget(context, widgetsUIGroup) {
   const viewerDOMId = context.id
diff --git a/src/UI/reference-ui/src/collapse-ui.ts b/src/UI/reference-ui/src/collapse-ui.ts
index 8e804453..79f48a69 100644
--- a/src/UI/reference-ui/src/collapse-ui.ts
+++ b/src/UI/reference-ui/src/collapse-ui.ts
@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import '@material/web/iconbutton/standard-icon-button.js'
-import { toggleIconDataUri } from 'itk-viewer-icons'
+import { toggleIconDataUri } from '@itk-viewer/icons'
 import { connectState } from 'xstate-lit/dist/select-state'
 
 import { viewerContext } from './context'

From 87e8ca47a7832b0dacc7cccad4e6ddc750e71215 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 1 Dec 2023 16:56:31 -0500
Subject: [PATCH 5/7] feat(createLayerInterface): show save ROI button with
 config

---
 src/Context/ViewerMachineContext.js           |  1 +
 .../dist/referenceUIMachineOptions.js         | 62 ++++++++++---------
 .../src/Layers/createLayerInterface.js        | 46 +++++++-------
 src/createViewer.js                           |  3 +-
 4 files changed, 58 insertions(+), 54 deletions(-)

diff --git a/src/Context/ViewerMachineContext.js b/src/Context/ViewerMachineContext.js
index 3e95650c..6f1ae443 100644
--- a/src/Context/ViewerMachineContext.js
+++ b/src/Context/ViewerMachineContext.js
@@ -54,6 +54,7 @@ class ViewerMachineContext {
 
     // Todo: add config serialization / deserializeation
     this.layers = new LayersMachineContext()
+    this.layers.showSaveRoiButton = config?.showSaveRoiButton ?? false
     this.images = new ImagesMachineContext()
     this.widgets = new WidgetsMachineContext()
   }
diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index a5bd2493..76e06c37 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -8044,38 +8044,40 @@ function createLayerEntry(context, name, layer) {
     var actorContext = context.layers.actorContext.get(name)
     layerBBoxButtonInput.checked = actorContext.bbox
   })
-  var downloadImage = document.createElement('div')
-  downloadImage.innerHTML = '\n  <input type="checkbox" checked id='
-    .concat(context.id, '-download-image" class="')
-    .concat(
-      style.toggleInput,
-      '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="'
-    )
-    .concat(style.toggleButton, '" for="')
-    .concat(
-      context.id,
-      '-download-image">\n    <img style="height: 23px" src="'
+  if (context.layers.showSaveRoiButton) {
+    var downloadImage = document.createElement('div')
+    downloadImage.innerHTML = '\n  <input type="checkbox" checked id='
+      .concat(context.id, '-download-image" class="')
+      .concat(
+        style.toggleInput,
+        '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Save ROI" class="'
+      )
+      .concat(style.toggleButton, '" for="')
+      .concat(
+        context.id,
+        '-download-image">\n    <img style="height: 23px" src="'
+      )
+      .concat(optimizedSVGDataUri$s, '" />\n  </label>\n  ')
+    var downloadImageLabel = downloadImage.children[1]
+    downloadImage.style.height = '23px'
+    applyContrastSensitiveStyleToElement(
+      context,
+      'invertibleButton',
+      downloadImageLabel
     )
-    .concat(optimizedSVGDataUri$s, '" />\n  </label>\n  ')
-  var downloadImageLabel = downloadImage.children[1]
-  downloadImage.style.height = '23px'
-  applyContrastSensitiveStyleToElement(
-    context,
-    'invertibleButton',
-    downloadImageLabel
-  )
-  imageIcons.appendChild(downloadImage)
-  downloadImage.addEventListener('click', function(event) {
-    event.preventDefault()
-    event.stopPropagation()
-    context.service.send({
-      type: 'DOWNLOAD_IMAGE',
-      data: {
-        name: context.images.selectedName,
-        layerName: name,
-      },
+    imageIcons.appendChild(downloadImage)
+    downloadImage.addEventListener('click', function(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      context.service.send({
+        type: 'DOWNLOAD_IMAGE',
+        data: {
+          name: context.images.selectedName,
+          layerName: name,
+        },
+      })
     })
-  })
+  }
   var icon = makeHtml(
     '<layer-icon class="'.concat(style.layerIcon, '"></layer-icon>')
   )
diff --git a/src/UI/reference-ui/src/Layers/createLayerInterface.js b/src/UI/reference-ui/src/Layers/createLayerInterface.js
index 3571d582..aff0c6fa 100644
--- a/src/UI/reference-ui/src/Layers/createLayerInterface.js
+++ b/src/UI/reference-ui/src/Layers/createLayerInterface.js
@@ -75,7 +75,7 @@ function createLayerEntry(context, name, layer) {
   layer.spinner = spinner
 
   const layerBBoxButton = document.createElement('div')
-  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
+  layerBBoxButton.innerHTML = `<input id="${context.id}-layerBBoxButton" type="checkbox" class="${style.toggleInput}"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Bounding Box" class="${style.toggleButton}" for="${context.id}-layerBBoxButton"><img src="${boundingBoxIconDataUri}" alt="bbox"/></label>`
   const layerBBoxButtonInput = layerBBoxButton.children[0]
   const layerBBoxLabel = layerBBoxButton.children[1]
   layerBBoxButton.style.height = '23px'
@@ -99,32 +99,34 @@ function createLayerEntry(context, name, layer) {
     layerBBoxButtonInput.checked = actorContext.bbox
   })
 
-  const downloadImage = document.createElement('div')
-  downloadImage.innerHTML = `
+  if (context.layers.showSaveRoiButton) {
+    const downloadImage = document.createElement('div')
+    downloadImage.innerHTML = `
   <input type="checkbox" checked id=${context.id}-download-image" class="${style.toggleInput}" />
-  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Download Image" class="${style.toggleButton}" for="${context.id}-download-image">
+  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Save ROI" class="${style.toggleButton}" for="${context.id}-download-image">
     <img style="height: 23px" src="${downloadIconDataUri}" />
   </label>
   `
-  const downloadImageLabel = downloadImage.children[1]
-  downloadImage.style.height = '23px'
-  applyContrastSensitiveStyleToElement(
-    context,
-    'invertibleButton',
-    downloadImageLabel
-  )
-  imageIcons.appendChild(downloadImage)
-  downloadImage.addEventListener('click', event => {
-    event.preventDefault()
-    event.stopPropagation()
-    context.service.send({
-      type: 'DOWNLOAD_IMAGE',
-      data: {
-        name: context.images.selectedName,
-        layerName: name,
-      },
+    const downloadImageLabel = downloadImage.children[1]
+    downloadImage.style.height = '23px'
+    applyContrastSensitiveStyleToElement(
+      context,
+      'invertibleButton',
+      downloadImageLabel
+    )
+    imageIcons.appendChild(downloadImage)
+    downloadImage.addEventListener('click', event => {
+      event.preventDefault()
+      event.stopPropagation()
+      context.service.send({
+        type: 'DOWNLOAD_IMAGE',
+        data: {
+          name: context.images.selectedName,
+          layerName: name,
+        },
+      })
     })
-  })
+  }
 
   const icon = makeHtml(`<layer-icon class="${style.layerIcon}"></layer-icon>`)
   icon.layer = layer
diff --git a/src/createViewer.js b/src/createViewer.js
index 1995eb7f..cde21321 100644
--- a/src/createViewer.js
+++ b/src/createViewer.js
@@ -236,8 +236,7 @@ const createViewer = async (
 
   context.use2D =
     use2D ??
-    ((imageOrLabelImage && imageOrLabelImage.imageType.dimension === 2) ||
-      false)
+    Boolean(imageOrLabelImage && imageOrLabelImage.imageType.dimension === 2)
 
   context.rootContainer = rootContainer
   // Todo: move to viewer machine

From cc947f165720c084819a88bc5c119a4aeb9e8c11 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 4 Dec 2023 19:21:03 -0500
Subject: [PATCH 6/7] chore: update @materia/web version

---
 package-lock.json                             |  104 +-
 package.json                                  |    2 +-
 .../dist/referenceUIMachineOptions.js         | 6628 ++++++++++-------
 src/UI/reference-ui/package-lock.json         |  104 +-
 src/UI/reference-ui/package.json              |    2 +-
 .../src/Layers/createLayerInterface.js        |   47 +-
 .../reference-ui/src/Layers/layerSettings.ts  |   51 +-
 src/UI/reference-ui/src/collapse-ui.ts        |    7 +-
 src/UI/reference-ui/src/createInterface.js    |    2 +-
 9 files changed, 4290 insertions(+), 2657 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f9830e75..ff6d0b3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "BSD-3-Clause",
       "dependencies": {
         "@kitware/vtk.js": "^26.9.15",
-        "@material/web": "^1.0.0-pre.4",
+        "@material/web": "1.0.1",
         "@thewtex/iconselect.js": "^2.1.2",
         "@xstate/inspect": "^0.4.1",
         "axios": "^1.6.0",
@@ -2195,17 +2195,25 @@
       "resolved": "https://registry.npmjs.org/webworker-promise/-/webworker-promise-0.5.0.tgz",
       "integrity": "sha512-14iR79jHAV7ozwvbfif+3wCaApT3I1g8Lo0rJZrwAu6wxZGx/08Y8KXz6as6ZLNUEEufeiEBBYrqyDBClXOsEw=="
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
+      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
+    },
     "node_modules/@lit/reactive-element": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
-      "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.2.tgz",
+      "integrity": "sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.2"
+      }
     },
     "node_modules/@material/web": {
-      "version": "1.0.0-pre.4",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.0-pre.4.tgz",
-      "integrity": "sha512-zafEDXi376L8jdeQX57NF8IbEeVQTOdYrWR3bfDl8JhhOT+mOU1XWhwslqbN0QANvDYrjH5k0/RwiSjBjIBpeA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.1.tgz",
+      "integrity": "sha512-AilQTWdp+lgPzoUGNj/CyrMsULLdzhHiiYs6XXSIpX/t/eGQkiPP4CAwvjqANuV+YZC0hLIo+s64BIgZo8Ghkw==",
       "dependencies": {
-        "lit": "^2.3.0",
+        "lit": "^2.7.4 || ^3.0.0",
         "tslib": "^2.4.0"
       }
     },
@@ -11599,28 +11607,29 @@
       }
     },
     "node_modules/lit": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.0.tgz",
-      "integrity": "sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
+      "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
       "dependencies": {
-        "@lit/reactive-element": "^1.4.0",
-        "lit-element": "^3.2.0",
-        "lit-html": "^2.4.0"
+        "@lit/reactive-element": "^2.0.0",
+        "lit-element": "^4.0.0",
+        "lit-html": "^3.1.0"
       }
     },
     "node_modules/lit-element": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
-      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.2.tgz",
+      "integrity": "sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==",
       "dependencies": {
-        "@lit/reactive-element": "^1.3.0",
-        "lit-html": "^2.2.0"
+        "@lit-labs/ssr-dom-shim": "^1.1.2",
+        "@lit/reactive-element": "^2.0.0",
+        "lit-html": "^3.1.0"
       }
     },
     "node_modules/lit-html": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
-      "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.0.tgz",
+      "integrity": "sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -23582,17 +23591,25 @@
         }
       }
     },
+    "@lit-labs/ssr-dom-shim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
+      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
+    },
     "@lit/reactive-element": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.4.1.tgz",
-      "integrity": "sha512-qDv4851VFSaBWzpS02cXHclo40jsbAjRXnebNXpm0uVg32kCneZPo9RYVQtrTNICtZ+1wAYHu1ZtxWSWMbKrBw=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.2.tgz",
+      "integrity": "sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==",
+      "requires": {
+        "@lit-labs/ssr-dom-shim": "^1.1.2"
+      }
     },
     "@material/web": {
-      "version": "1.0.0-pre.4",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.0-pre.4.tgz",
-      "integrity": "sha512-zafEDXi376L8jdeQX57NF8IbEeVQTOdYrWR3bfDl8JhhOT+mOU1XWhwslqbN0QANvDYrjH5k0/RwiSjBjIBpeA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.1.tgz",
+      "integrity": "sha512-AilQTWdp+lgPzoUGNj/CyrMsULLdzhHiiYs6XXSIpX/t/eGQkiPP4CAwvjqANuV+YZC0hLIo+s64BIgZo8Ghkw==",
       "requires": {
-        "lit": "^2.3.0",
+        "lit": "^2.7.4 || ^3.0.0",
         "tslib": "^2.4.0"
       }
     },
@@ -30921,28 +30938,29 @@
       }
     },
     "lit": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-2.4.0.tgz",
-      "integrity": "sha512-fdgzxEtLrZFQU/BqTtxFQCLwlZd9bdat+ltzSFjvWkZrs7eBmeX0L5MHUMb3kYIkuS8Xlfnii/iI5klirF8/Xg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
+      "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
       "requires": {
-        "@lit/reactive-element": "^1.4.0",
-        "lit-element": "^3.2.0",
-        "lit-html": "^2.4.0"
+        "@lit/reactive-element": "^2.0.0",
+        "lit-element": "^4.0.0",
+        "lit-html": "^3.1.0"
       }
     },
     "lit-element": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.2.tgz",
-      "integrity": "sha512-6ZgxBR9KNroqKb6+htkyBwD90XGRiqKDHVrW/Eh0EZ+l+iC+u+v+w3/BA5NGi4nizAVHGYvQBHUDuSmLjPp7NQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.2.tgz",
+      "integrity": "sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==",
       "requires": {
-        "@lit/reactive-element": "^1.3.0",
-        "lit-html": "^2.2.0"
+        "@lit-labs/ssr-dom-shim": "^1.1.2",
+        "@lit/reactive-element": "^2.0.0",
+        "lit-html": "^3.1.0"
       }
     },
     "lit-html": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.4.0.tgz",
-      "integrity": "sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.0.tgz",
+      "integrity": "sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==",
       "requires": {
         "@types/trusted-types": "^2.0.2"
       }
diff --git a/package.json b/package.json
index df148208..c7e59d0b 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   "types": "./src/index.d.ts",
   "dependencies": {
     "@kitware/vtk.js": "^26.9.15",
-    "@material/web": "^1.0.0-pre.4",
+    "@material/web": "^1.0.1",
     "@thewtex/iconselect.js": "^2.1.2",
     "@xstate/inspect": "^0.4.1",
     "axios": "^1.6.0",
diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index 76e06c37..c58fdc0e 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -2729,27 +2729,22 @@ function __decorate(decorators, target, key, desc) {
   return c > 3 && r && Object.defineProperty(target, key, r), r
 }
 
-function __metadata(metadataKey, metadataValue) {
-  if (typeof Reflect === 'object' && typeof Reflect.metadata === 'function')
-    return Reflect.metadata(metadataKey, metadataValue)
-}
-
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$5 = window,
-  e$c =
-    t$5.ShadowRoot &&
-    (void 0 === t$5.ShadyCSS || t$5.ShadyCSS.nativeShadow) &&
+const t$9 = window,
+  e$j =
+    t$9.ShadowRoot &&
+    (void 0 === t$9.ShadyCSS || t$9.ShadyCSS.nativeShadow) &&
     'adoptedStyleSheets' in Document.prototype &&
     'replace' in CSSStyleSheet.prototype,
-  s$7 = Symbol(),
-  n$8 = new WeakMap()
-class o$9 {
+  s$b = Symbol(),
+  n$d = new WeakMap()
+class o$f {
   constructor(t, e, n) {
-    if (((this._$cssResult$ = !0), n !== s$7))
+    if (((this._$cssResult$ = !0), n !== s$b))
       throw Error(
         'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'
       )
@@ -2758,12 +2753,12 @@ class o$9 {
   get styleSheet() {
     let t = this.o
     const s = this.t
-    if (e$c && void 0 === t) {
+    if (e$j && void 0 === t) {
       const e = void 0 !== s && 1 === s.length
-      e && (t = n$8.get(s)),
+      e && (t = n$d.get(s)),
         void 0 === t &&
           ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText),
-          e && n$8.set(s, t))
+          e && n$d.set(s, t))
     }
     return t
   }
@@ -2771,8 +2766,8 @@ class o$9 {
     return this.cssText
   }
 }
-const r$4 = t => new o$9('string' == typeof t ? t : t + '', void 0, s$7),
-  i$5 = (t, ...e) => {
+const r$b = t => new o$f('string' == typeof t ? t : t + '', void 0, s$b),
+  i$8 = (t, ...e) => {
     const n =
       1 === t.length
         ? t[0]
@@ -2791,29 +2786,29 @@ const r$4 = t => new o$9('string' == typeof t ? t : t + '', void 0, s$7),
               t[n + 1],
             t[0]
           )
-    return new o$9(n, t, s$7)
+    return new o$f(n, t, s$b)
   },
-  S$1 = (s, n) => {
-    e$c
+  S$3 = (s, n) => {
+    e$j
       ? (s.adoptedStyleSheets = n.map(t =>
           t instanceof CSSStyleSheet ? t : t.styleSheet
         ))
       : n.forEach(e => {
           const n = document.createElement('style'),
-            o = t$5.litNonce
+            o = t$9.litNonce
           void 0 !== o && n.setAttribute('nonce', o),
             (n.textContent = e.cssText),
             s.appendChild(n)
         })
   },
-  c$2 = e$c
+  c$5 = e$j
     ? t => t
     : t =>
         t instanceof CSSStyleSheet
           ? (t => {
               let e = ''
               for (const s of t.cssRules) e += s.cssText
-              return r$4(e)
+              return r$b(e)
             })(t)
           : t
 
@@ -2821,16 +2816,16 @@ const r$4 = t => new o$9('string' == typeof t ? t : t + '', void 0, s$7),
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ var s$6
-const e$b = window,
-  r$3 = e$b.trustedTypes,
-  h$3 = r$3 ? r$3.emptyScript : '',
-  o$8 = e$b.reactiveElementPolyfillSupport,
-  n$7 = {
+ */ var s$a
+const e$i = window,
+  r$a = e$i.trustedTypes,
+  h$5 = r$a ? r$a.emptyScript : '',
+  o$e = e$i.reactiveElementPolyfillSupport,
+  n$c = {
     toAttribute(t, i) {
       switch (i) {
         case Boolean:
-          t = t ? h$3 : null
+          t = t ? h$5 : null
           break
         case Object:
         case Array:
@@ -2858,15 +2853,15 @@ const e$b = window,
       return s
     },
   },
-  a$1 = (t, i) => i !== t && (i == i || t == t),
-  l$5 = {
+  a$4 = (t, i) => i !== t && (i == i || t == t),
+  l$6 = {
     attribute: !0,
     type: String,
-    converter: n$7,
+    converter: n$c,
     reflect: !1,
-    hasChanged: a$1,
+    hasChanged: a$4,
   }
-class d$1 extends HTMLElement {
+class d$3 extends HTMLElement {
   constructor() {
     super(),
       (this._$Ei = new Map()),
@@ -2891,7 +2886,7 @@ class d$1 extends HTMLElement {
       t
     )
   }
-  static createProperty(t, i = l$5) {
+  static createProperty(t, i = l$6) {
     if (
       (i.state && (i.attribute = !1),
       this.finalize(),
@@ -2917,7 +2912,7 @@ class d$1 extends HTMLElement {
     }
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) || l$5
+    return this.elementProperties.get(t) || l$6
   }
   static finalize() {
     if (this.hasOwnProperty('finalized')) return !1
@@ -2943,8 +2938,8 @@ class d$1 extends HTMLElement {
     const s = []
     if (Array.isArray(i)) {
       const e = new Set(i.flat(1 / 0).reverse())
-      for (const i of e) s.unshift(c$2(i))
-    } else void 0 !== i && s.push(c$2(i))
+      for (const i of e) s.unshift(c$5(i))
+    } else void 0 !== i && s.push(c$5(i))
     return s
   }
   static _$Ep(t, i) {
@@ -2991,7 +2986,7 @@ class d$1 extends HTMLElement {
       null !== (t = this.shadowRoot) && void 0 !== t
         ? t
         : this.attachShadow(this.constructor.shadowRootOptions)
-    return S$1(s, this.constructor.elementStyles), s
+    return S$3(s, this.constructor.elementStyles), s
   }
   connectedCallback() {
     var t
@@ -3021,14 +3016,14 @@ class d$1 extends HTMLElement {
   attributeChangedCallback(t, i, s) {
     this._$AK(t, s)
   }
-  _$EO(t, i, s = l$5) {
+  _$EO(t, i, s = l$6) {
     var e
     const r = this.constructor._$Ep(t, s)
     if (void 0 !== r && !0 === s.reflect) {
       const h = (void 0 !==
       (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute)
         ? s.converter
-        : n$7
+        : n$c
       ).toAttribute(i, s.type)
       ;(this._$El = t),
         null == h ? this.removeAttribute(r) : this.setAttribute(r, h),
@@ -3049,7 +3044,7 @@ class d$1 extends HTMLElement {
                 ? void 0
                 : s.fromAttribute)
             ? t.converter
-            : n$7
+            : n$c
       ;(this._$El = r),
         (this[r] = h.fromAttribute(i, t.type)),
         (this._$El = null)
@@ -3058,7 +3053,7 @@ class d$1 extends HTMLElement {
   requestUpdate(t, i, s) {
     let e = !0
     void 0 !== t &&
-      (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$1)(
+      (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$4)(
         this[t],
         i
       )
@@ -3143,14 +3138,14 @@ class d$1 extends HTMLElement {
   updated(t) {}
   firstUpdated(t) {}
 }
-;(d$1.finalized = !0),
-  (d$1.elementProperties = new Map()),
-  (d$1.elementStyles = []),
-  (d$1.shadowRootOptions = { mode: 'open' }),
-  null == o$8 || o$8({ ReactiveElement: d$1 }),
-  (null !== (s$6 = e$b.reactiveElementVersions) && void 0 !== s$6
-    ? s$6
-    : (e$b.reactiveElementVersions = [])
+;(d$3.finalized = !0),
+  (d$3.elementProperties = new Map()),
+  (d$3.elementStyles = []),
+  (d$3.shadowRootOptions = { mode: 'open' }),
+  null == o$e || o$e({ ReactiveElement: d$3 }),
+  (null !== (s$a = e$i.reactiveElementVersions) && void 0 !== s$a
+    ? s$a
+    : (e$i.reactiveElementVersions = [])
   ).push('1.6.1')
 
 /**
@@ -3158,41 +3153,41 @@ class d$1 extends HTMLElement {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var t$4
-const i$4 = window,
-  s$5 = i$4.trustedTypes,
-  e$a = s$5 ? s$5.createPolicy('lit-html', { createHTML: t => t }) : void 0,
-  o$7 = `lit$${(Math.random() + '').slice(9)}$`,
-  n$6 = '?' + o$7,
-  l$4 = `<${n$6}>`,
-  h$2 = document,
-  r$2 = (t = '') => h$2.createComment(t),
-  d = t => null === t || ('object' != typeof t && 'function' != typeof t),
-  u = Array.isArray,
-  c$1 = t =>
-    u(t) || 'function' == typeof (null == t ? void 0 : t[Symbol.iterator]),
-  v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
-  a = /-->/g,
-  f = />/g,
-  _ = RegExp(
+var t$8
+const i$7 = window,
+  s$9 = i$7.trustedTypes,
+  e$h = s$9 ? s$9.createPolicy('lit-html', { createHTML: t => t }) : void 0,
+  o$d = `lit$${(Math.random() + '').slice(9)}$`,
+  n$b = '?' + o$d,
+  l$5 = `<${n$b}>`,
+  h$4 = document,
+  r$9 = (t = '') => h$4.createComment(t),
+  d$2 = t => null === t || ('object' != typeof t && 'function' != typeof t),
+  u$2 = Array.isArray,
+  c$4 = t =>
+    u$2(t) || 'function' == typeof (null == t ? void 0 : t[Symbol.iterator]),
+  v$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
+  a$3 = /-->/g,
+  f$2 = />/g,
+  _$1 = RegExp(
     '>|[ \t\n\f\r](?:([^\\s"\'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r"\'`<>=]|("|\')|))|$)',
     'g'
   ),
-  m = /'/g,
-  p = /"/g,
-  $ = /^(?:script|style|textarea|title)$/i,
-  g = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
-  y = g(1),
-  x = Symbol.for('lit-noChange'),
-  b = Symbol.for('lit-nothing'),
-  T = new WeakMap(),
-  A = h$2.createTreeWalker(h$2, 129, null, !1),
-  E = (t, i) => {
+  m$1 = /'/g,
+  p$2 = /"/g,
+  $$1 = /^(?:script|style|textarea|title)$/i,
+  g$1 = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
+  y$2 = g$1(1),
+  x$1 = Symbol.for('lit-noChange'),
+  b$1 = Symbol.for('lit-nothing'),
+  T$1 = new WeakMap(),
+  A$1 = h$4.createTreeWalker(h$4, 129, null, !1),
+  E$1 = (t, i) => {
     const s = t.length - 1,
       n = []
     let h,
       r = 2 === i ? '<svg>' : '',
-      d = v
+      d = v$1
     for (let i = 0; i < s; i++) {
       const s = t[i]
       let e,
@@ -3201,41 +3196,41 @@ const i$4 = window,
         g = 0
       for (; g < s.length && ((d.lastIndex = g), (u = d.exec(s)), null !== u); )
         (g = d.lastIndex),
-          d === v
+          d === v$1
             ? '!--' === u[1]
-              ? (d = a)
+              ? (d = a$3)
               : void 0 !== u[1]
-              ? (d = f)
+              ? (d = f$2)
               : void 0 !== u[2]
-              ? ($.test(u[2]) && (h = RegExp('</' + u[2], 'g')), (d = _))
-              : void 0 !== u[3] && (d = _)
-            : d === _
+              ? ($$1.test(u[2]) && (h = RegExp('</' + u[2], 'g')), (d = _$1))
+              : void 0 !== u[3] && (d = _$1)
+            : d === _$1
             ? '>' === u[0]
-              ? ((d = null != h ? h : v), (c = -1))
+              ? ((d = null != h ? h : v$1), (c = -1))
               : void 0 === u[1]
               ? (c = -2)
               : ((c = d.lastIndex - u[2].length),
                 (e = u[1]),
-                (d = void 0 === u[3] ? _ : '"' === u[3] ? p : m))
-            : d === p || d === m
-            ? (d = _)
-            : d === a || d === f
-            ? (d = v)
-            : ((d = _), (h = void 0))
-      const y = d === _ && t[i + 1].startsWith('/>') ? ' ' : ''
+                (d = void 0 === u[3] ? _$1 : '"' === u[3] ? p$2 : m$1))
+            : d === p$2 || d === m$1
+            ? (d = _$1)
+            : d === a$3 || d === f$2
+            ? (d = v$1)
+            : ((d = _$1), (h = void 0))
+      const y = d === _$1 && t[i + 1].startsWith('/>') ? ' ' : ''
       r +=
-        d === v
-          ? s + l$4
+        d === v$1
+          ? s + l$5
           : c >= 0
-          ? (n.push(e), s.slice(0, c) + '$lit$' + s.slice(c) + o$7 + y)
-          : s + o$7 + (-2 === c ? (n.push(void 0), i) : y)
+          ? (n.push(e), s.slice(0, c) + '$lit$' + s.slice(c) + o$d + y)
+          : s + o$d + (-2 === c ? (n.push(void 0), i) : y)
     }
     const u = r + (t[s] || '<?>') + (2 === i ? '</svg>' : '')
     if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
       throw Error('invalid template strings array')
-    return [void 0 !== e$a ? e$a.createHTML(u) : u, n]
+    return [void 0 !== e$h ? e$h.createHTML(u) : u, n]
   }
-class C {
+class C$1 {
   constructor({ strings: t, _$litType$: i }, e) {
     let l
     this.parts = []
@@ -3243,25 +3238,25 @@ class C {
       d = 0
     const u = t.length - 1,
       c = this.parts,
-      [v, a] = E(t, i)
+      [v, a] = E$1(t, i)
     if (
-      ((this.el = C.createElement(v, e)),
-      (A.currentNode = this.el.content),
+      ((this.el = C$1.createElement(v, e)),
+      (A$1.currentNode = this.el.content),
       2 === i)
     ) {
       const t = this.el.content,
         i = t.firstChild
       i.remove(), t.append(...i.childNodes)
     }
-    for (; null !== (l = A.nextNode()) && c.length < u; ) {
+    for (; null !== (l = A$1.nextNode()) && c.length < u; ) {
       if (1 === l.nodeType) {
         if (l.hasAttributes()) {
           const t = []
           for (const i of l.getAttributeNames())
-            if (i.endsWith('$lit$') || i.startsWith(o$7)) {
+            if (i.endsWith('$lit$') || i.startsWith(o$d)) {
               const s = a[d++]
               if ((t.push(i), void 0 !== s)) {
-                const t = l.getAttribute(s.toLowerCase() + '$lit$').split(o$7),
+                const t = l.getAttribute(s.toLowerCase() + '$lit$').split(o$d),
                   i = /([.?@])?(.*)/.exec(s)
                 c.push({
                   type: 1,
@@ -3269,49 +3264,55 @@ class C {
                   name: i[2],
                   strings: t,
                   ctor:
-                    '.' === i[1] ? M : '?' === i[1] ? k : '@' === i[1] ? H : S,
+                    '.' === i[1]
+                      ? M$1
+                      : '?' === i[1]
+                      ? k$1
+                      : '@' === i[1]
+                      ? H$1
+                      : S$2,
                 })
               } else c.push({ type: 6, index: h })
             }
           for (const i of t) l.removeAttribute(i)
         }
-        if ($.test(l.tagName)) {
-          const t = l.textContent.split(o$7),
+        if ($$1.test(l.tagName)) {
+          const t = l.textContent.split(o$d),
             i = t.length - 1
           if (i > 0) {
-            l.textContent = s$5 ? s$5.emptyScript : ''
+            l.textContent = s$9 ? s$9.emptyScript : ''
             for (let s = 0; s < i; s++)
-              l.append(t[s], r$2()),
-                A.nextNode(),
+              l.append(t[s], r$9()),
+                A$1.nextNode(),
                 c.push({ type: 2, index: ++h })
-            l.append(t[i], r$2())
+            l.append(t[i], r$9())
           }
         }
       } else if (8 === l.nodeType)
-        if (l.data === n$6) c.push({ type: 2, index: h })
+        if (l.data === n$b) c.push({ type: 2, index: h })
         else {
           let t = -1
-          for (; -1 !== (t = l.data.indexOf(o$7, t + 1)); )
-            c.push({ type: 7, index: h }), (t += o$7.length - 1)
+          for (; -1 !== (t = l.data.indexOf(o$d, t + 1)); )
+            c.push({ type: 7, index: h }), (t += o$d.length - 1)
         }
       h++
     }
   }
   static createElement(t, i) {
-    const s = h$2.createElement('template')
+    const s = h$4.createElement('template')
     return (s.innerHTML = t), s
   }
 }
-function P(t, i, s = t, e) {
+function P$1(t, i, s = t, e) {
   var o, n, l, h
-  if (i === x) return i
+  if (i === x$1) return i
   let r =
     void 0 !== e
       ? null === (o = s._$Co) || void 0 === o
         ? void 0
         : o[e]
       : s._$Cl
-  const u = d(i) ? void 0 : i._$litDirective$
+  const u = d$2(i) ? void 0 : i._$litDirective$
   return (
     (null == r ? void 0 : r.constructor) !== u &&
       (null === (n = null == r ? void 0 : r._$AO) ||
@@ -3323,11 +3324,11 @@ function P(t, i, s = t, e) {
             e
           ] = r)
         : (s._$Cl = r)),
-    void 0 !== r && (i = P(t, r._$AS(t, i.values), r, e)),
+    void 0 !== r && (i = P$1(t, r._$AS(t, i.values), r, e)),
     i
   )
 }
-class V {
+class V$1 {
   constructor(t, i) {
     ;(this.u = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
   }
@@ -3345,10 +3346,10 @@ class V {
       } = this._$AD,
       o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i
         ? i
-        : h$2
+        : h$4
       ).importNode(s, !0)
-    A.currentNode = o
-    let n = A.nextNode(),
+    A$1.currentNode = o
+    let n = A$1.nextNode(),
       l = 0,
       r = 0,
       d = e[0]
@@ -3356,14 +3357,14 @@ class V {
       if (l === d.index) {
         let i
         2 === d.type
-          ? (i = new N(n, n.nextSibling, this, t))
+          ? (i = new N$1(n, n.nextSibling, this, t))
           : 1 === d.type
           ? (i = new d.ctor(n, d.name, d.strings, this, t))
-          : 6 === d.type && (i = new I(n, this, t)),
+          : 6 === d.type && (i = new I$1(n, this, t)),
           this.u.push(i),
           (d = e[++r])
       }
-      l !== (null == d ? void 0 : d.index) && ((n = A.nextNode()), l++)
+      l !== (null == d ? void 0 : d.index) && ((n = A$1.nextNode()), l++)
     }
     return o
   }
@@ -3377,11 +3378,11 @@ class V {
         i++
   }
 }
-class N {
+class N$1 {
   constructor(t, i, s, e) {
     var o
     ;(this.type = 2),
-      (this._$AH = b),
+      (this._$AH = b$1),
       (this._$AN = void 0),
       (this._$AA = t),
       (this._$AB = i),
@@ -3410,16 +3411,16 @@ class N {
     return this._$AB
   }
   _$AI(t, i = this) {
-    ;(t = P(this, t, i)),
-      d(t)
-        ? t === b || null == t || '' === t
-          ? (this._$AH !== b && this._$AR(), (this._$AH = b))
-          : t !== this._$AH && t !== x && this.g(t)
+    ;(t = P$1(this, t, i)),
+      d$2(t)
+        ? t === b$1 || null == t || '' === t
+          ? (this._$AH !== b$1 && this._$AR(), (this._$AH = b$1))
+          : t !== this._$AH && t !== x$1 && this.g(t)
         : void 0 !== t._$litType$
         ? this.$(t)
         : void 0 !== t.nodeType
         ? this.T(t)
-        : c$1(t)
+        : c$4(t)
         ? this.k(t)
         : this.g(t)
   }
@@ -3430,9 +3431,9 @@ class N {
     this._$AH !== t && (this._$AR(), (this._$AH = this.O(t)))
   }
   g(t) {
-    this._$AH !== b && d(this._$AH)
+    this._$AH !== b$1 && d$2(this._$AH)
       ? (this._$AA.nextSibling.data = t)
-      : this.T(h$2.createTextNode(t)),
+      : this.T(h$4.createTextNode(t)),
       (this._$AH = t)
   }
   $(t) {
@@ -3441,27 +3442,30 @@ class N {
       o =
         'number' == typeof e
           ? this._$AC(t)
-          : (void 0 === e.el && (e.el = C.createElement(e.h, this.options)), e)
+          : (void 0 === e.el && (e.el = C$1.createElement(e.h, this.options)),
+            e)
     if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o)
       this._$AH.p(s)
     else {
-      const t = new V(o, this),
+      const t = new V$1(o, this),
         i = t.v(this.options)
       t.p(s), this.T(i), (this._$AH = t)
     }
   }
   _$AC(t) {
-    let i = T.get(t.strings)
-    return void 0 === i && T.set(t.strings, (i = new C(t))), i
+    let i = T$1.get(t.strings)
+    return void 0 === i && T$1.set(t.strings, (i = new C$1(t))), i
   }
   k(t) {
-    u(this._$AH) || ((this._$AH = []), this._$AR())
+    u$2(this._$AH) || ((this._$AH = []), this._$AR())
     const i = this._$AH
     let s,
       e = 0
     for (const o of t)
       e === i.length
-        ? i.push((s = new N(this.O(r$2()), this.O(r$2()), this, this.options)))
+        ? i.push(
+            (s = new N$1(this.O(r$9()), this.O(r$9()), this, this.options))
+          )
         : (s = i[e]),
         s._$AI(o),
         e++
@@ -3485,10 +3489,10 @@ class N {
       null === (i = this._$AP) || void 0 === i || i.call(this, t))
   }
 }
-class S {
+class S$2 {
   constructor(t, i, s, e, o) {
     ;(this.type = 1),
-      (this._$AH = b),
+      (this._$AH = b$1),
       (this._$AN = void 0),
       (this.element = t),
       (this.name = i),
@@ -3497,7 +3501,7 @@ class S {
       s.length > 2 || '' !== s[0] || '' !== s[1]
         ? ((this._$AH = Array(s.length - 1).fill(new String())),
           (this.strings = s))
-        : (this._$AH = b)
+        : (this._$AH = b$1)
   }
   get tagName() {
     return this.element.tagName
@@ -3509,61 +3513,65 @@ class S {
     const o = this.strings
     let n = !1
     if (void 0 === o)
-      (t = P(this, t, i, 0)),
-        (n = !d(t) || (t !== this._$AH && t !== x)),
+      (t = P$1(this, t, i, 0)),
+        (n = !d$2(t) || (t !== this._$AH && t !== x$1)),
         n && (this._$AH = t)
     else {
       const e = t
       let l, h
       for (t = o[0], l = 0; l < o.length - 1; l++)
-        (h = P(this, e[s + l], i, l)),
-          h === x && (h = this._$AH[l]),
-          n || (n = !d(h) || h !== this._$AH[l]),
-          h === b ? (t = b) : t !== b && (t += (null != h ? h : '') + o[l + 1]),
+        (h = P$1(this, e[s + l], i, l)),
+          h === x$1 && (h = this._$AH[l]),
+          n || (n = !d$2(h) || h !== this._$AH[l]),
+          h === b$1
+            ? (t = b$1)
+            : t !== b$1 && (t += (null != h ? h : '') + o[l + 1]),
           (this._$AH[l] = h)
     }
     n && !e && this.j(t)
   }
   j(t) {
-    t === b
+    t === b$1
       ? this.element.removeAttribute(this.name)
       : this.element.setAttribute(this.name, null != t ? t : '')
   }
 }
-class M extends S {
+class M$1 extends S$2 {
   constructor() {
     super(...arguments), (this.type = 3)
   }
   j(t) {
-    this.element[this.name] = t === b ? void 0 : t
+    this.element[this.name] = t === b$1 ? void 0 : t
   }
 }
-const R = s$5 ? s$5.emptyScript : ''
-class k extends S {
+const R$1 = s$9 ? s$9.emptyScript : ''
+class k$1 extends S$2 {
   constructor() {
     super(...arguments), (this.type = 4)
   }
   j(t) {
-    t && t !== b
-      ? this.element.setAttribute(this.name, R)
+    t && t !== b$1
+      ? this.element.setAttribute(this.name, R$1)
       : this.element.removeAttribute(this.name)
   }
 }
-class H extends S {
+class H$1 extends S$2 {
   constructor(t, i, s, e, o) {
     super(t, i, s, e, o), (this.type = 5)
   }
   _$AI(t, i = this) {
     var s
-    if ((t = null !== (s = P(this, t, i, 0)) && void 0 !== s ? s : b) === x)
+    if (
+      (t = null !== (s = P$1(this, t, i, 0)) && void 0 !== s ? s : b$1) === x$1
+    )
       return
     const e = this._$AH,
       o =
-        (t === b && e !== b) ||
+        (t === b$1 && e !== b$1) ||
         t.capture !== e.capture ||
         t.once !== e.once ||
         t.passive !== e.passive,
-      n = t !== b && (e === b || o)
+      n = t !== b$1 && (e === b$1 || o)
     o && this.element.removeEventListener(this.name, this, e),
       n && this.element.addEventListener(this.name, this, t),
       (this._$AH = t)
@@ -3583,7 +3591,7 @@ class H extends S {
       : this._$AH.handleEvent(t)
   }
 }
-class I {
+class I$1 {
   constructor(t, i, s) {
     ;(this.element = t),
       (this.type = 6),
@@ -3595,16 +3603,16 @@ class I {
     return this._$AM._$AU
   }
   _$AI(t) {
-    P(this, t)
+    P$1(this, t)
   }
 }
-const z = i$4.litHtmlPolyfillSupport
-null == z || z(C, N),
-  (null !== (t$4 = i$4.litHtmlVersions) && void 0 !== t$4
-    ? t$4
-    : (i$4.litHtmlVersions = [])
+const z = i$7.litHtmlPolyfillSupport
+null == z || z(C$1, N$1),
+  (null !== (t$8 = i$7.litHtmlVersions) && void 0 !== t$8
+    ? t$8
+    : (i$7.litHtmlVersions = [])
   ).push('2.6.1')
-const Z = (t, i, s) => {
+const Z$1 = (t, i, s) => {
   var e, o
   const n =
     null !== (e = null == s ? void 0 : s.renderBefore) && void 0 !== e ? e : i
@@ -3614,8 +3622,8 @@ const Z = (t, i, s) => {
       null !== (o = null == s ? void 0 : s.renderBefore) && void 0 !== o
         ? o
         : null
-    n._$litPart$ = l = new N(
-      i.insertBefore(r$2(), t),
+    n._$litPart$ = l = new N$1(
+      i.insertBefore(r$9(), t),
       t,
       void 0,
       null != s ? s : {}
@@ -3628,8 +3636,8 @@ const Z = (t, i, s) => {
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ var l$3, o$6
-class s$4 extends d$1 {
+ */ var l$4, o$c
+class s$8 extends d$3 {
   constructor() {
     super(...arguments),
       (this.renderOptions = { host: this }),
@@ -3648,7 +3656,7 @@ class s$4 extends d$1 {
     const i = this.render()
     this.hasUpdated || (this.renderOptions.isConnected = this.isConnected),
       super.update(t),
-      (this._$Do = Z(i, this.renderRoot, this.renderOptions))
+      (this._$Do = Z$1(i, this.renderRoot, this.renderOptions))
   }
   connectedCallback() {
     var t
@@ -3661,18 +3669,18 @@ class s$4 extends d$1 {
       null === (t = this._$Do) || void 0 === t || t.setConnected(!1)
   }
   render() {
-    return x
-  }
-}
-;(s$4.finalized = !0),
-  (s$4._$litElement$ = !0),
-  null === (l$3 = globalThis.litElementHydrateSupport) ||
-    void 0 === l$3 ||
-    l$3.call(globalThis, { LitElement: s$4 })
-const n$5 = globalThis.litElementPolyfillSupport
-null == n$5 || n$5({ LitElement: s$4 })
-;(null !== (o$6 = globalThis.litElementVersions) && void 0 !== o$6
-  ? o$6
+    return x$1
+  }
+}
+;(s$8.finalized = !0),
+  (s$8._$litElement$ = !0),
+  null === (l$4 = globalThis.litElementHydrateSupport) ||
+    void 0 === l$4 ||
+    l$4.call(globalThis, { LitElement: s$8 })
+const n$a = globalThis.litElementPolyfillSupport
+null == n$a || n$a({ LitElement: s$8 })
+;(null !== (o$c = globalThis.litElementVersions) && void 0 !== o$c
+  ? o$c
   : (globalThis.litElementVersions = [])
 ).push('3.2.2')
 
@@ -3681,7 +3689,7 @@ null == n$5 || n$5({ LitElement: s$4 })
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const e$9 = e => n =>
+const e$g = e => n =>
   'function' == typeof n
     ? ((e, n) => (customElements.define(e, n), n))(e, n)
     : ((e, n) => {
@@ -3700,7 +3708,7 @@ const e$9 = e => n =>
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const i$3 = (i, e) =>
+const i$6 = (i, e) =>
   'method' === e.kind && e.descriptor && !('value' in e.descriptor)
     ? {
         ...e,
@@ -3722,21 +3730,21 @@ const i$3 = (i, e) =>
           n.createProperty(e.key, i)
         },
       }
-function e$8(e) {
+function e$f(e) {
   return (n, t) =>
     void 0 !== t
       ? ((i, e, n) => {
           e.constructor.createProperty(n, i)
         })(e, n, t)
-      : i$3(e, n)
+      : i$6(e, n)
 }
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ function t$3(t) {
-  return e$8({ ...t, state: !0 })
+ */ function t$7(t) {
+  return e$f({ ...t, state: !0 })
 }
 
 /**
@@ -3744,7 +3752,7 @@ function e$8(e) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$5 = ({ finisher: e, descriptor: t }) => (o, n) => {
+const o$b = ({ finisher: e, descriptor: t }) => (o, n) => {
   var r
   if (void 0 === n) {
     const n = null !== (r = o.originalKey) && void 0 !== r ? r : o.key,
@@ -3771,104 +3779,17 @@ const o$5 = ({ finisher: e, descriptor: t }) => (o, n) => {
   }
 }
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function i$2(i, n) {
-  return o$5({
-    descriptor: o => {
-      const t = {
-        get() {
-          var o, n
-          return null !==
-            (n =
-              null === (o = this.renderRoot) || void 0 === o
-                ? void 0
-                : o.querySelector(i)) && void 0 !== n
-            ? n
-            : null
-        },
-        enumerable: !0,
-        configurable: !0,
-      }
-      if (n) {
-        const n = 'symbol' == typeof o ? Symbol() : '__' + o
-        t.get = function() {
-          var o, t
-          return (
-            void 0 === this[n] &&
-              (this[n] =
-                null !==
-                  (t =
-                    null === (o = this.renderRoot) || void 0 === o
-                      ? void 0
-                      : o.querySelector(i)) && void 0 !== t
-                  ? t
-                  : null),
-            this[n]
-          )
-        }
-      }
-      return t
-    },
-  })
-}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function e$7(e) {
-  return o$5({
-    descriptor: r => ({
-      async get() {
-        var r
-        return (
-          await this.updateComplete,
-          null === (r = this.renderRoot) || void 0 === r
-            ? void 0
-            : r.querySelector(e)
-        )
-      },
-      enumerable: !0,
-      configurable: !0,
-    }),
-  })
-}
-
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ var n$4
-const e$6 =
-  null !=
-  (null === (n$4 = window.HTMLSlotElement) || void 0 === n$4
-    ? void 0
-    : n$4.prototype.assignedElements)
-    ? (o, n) => o.assignedElements(n)
-    : (o, n) => o.assignedNodes(n).filter(o => o.nodeType === Node.ELEMENT_NODE)
-function l$2(n) {
-  const { slot: l, selector: t } = null != n ? n : {}
-  return o$5({
-    descriptor: o => ({
-      get() {
-        var o
-        const r = 'slot' + (l ? `[name=${l}]` : ':not([name])'),
-          i =
-            null === (o = this.renderRoot) || void 0 === o
-              ? void 0
-              : o.querySelector(r),
-          s = null != i ? e$6(i, n) : []
-        return t ? s.filter(o => o.matches(t)) : s
-      },
-      enumerable: !0,
-      configurable: !0,
-    }),
-  })
-}
+ */ var n$9
+null !=
+(null === (n$9 = window.HTMLSlotElement) || void 0 === n$9
+  ? void 0
+  : n$9.prototype.assignedElements)
+  ? (o, n) => o.assignedElements(n)
+  : (o, n) => o.assignedNodes(n).filter(o => o.nodeType === Node.ELEMENT_NODE)
 
 var selectState = {}
 
@@ -3877,7 +3798,7 @@ var selectState = {}
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class s$3 extends Event {
+class s$7 extends Event {
   constructor(s, t, e) {
     super('context-request', { bubbles: !0, composed: !0 }),
       (this.context = s),
@@ -3891,7 +3812,7 @@ class s$3 extends Event {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function n$3(n) {
+function n$8(n) {
   return n
 }
 
@@ -3899,7 +3820,7 @@ function n$3(n) {
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ class s$2 {
+ */ class s$6 {
   constructor(t, s, i, h = !1) {
     ;(this.host = t),
       (this.context = s),
@@ -3917,7 +3838,7 @@ function n$3(n) {
   }
   dispatchRequest() {
     this.host.dispatchEvent(
-      new s$3(
+      new s$7(
         this.context,
         (t, s) => {
           this.unsubscribe &&
@@ -3941,7 +3862,7 @@ function n$3(n) {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class t$2 {
+class t$6 {
   constructor(t) {
     ;(this.callbacks = new Map()),
       (this.updateObservers = () => {
@@ -3976,12 +3897,12 @@ class t$2 {
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ class s$1 extends Event {
+ */ class s$5 extends Event {
   constructor(t) {
     super('context-provider', { bubbles: !0, composed: !0 }), (this.context = t)
   }
 }
-class e$5 extends t$2 {
+class e$e extends t$6 {
   constructor(t, s, e) {
     super(e),
       (this.host = t),
@@ -3998,7 +3919,7 @@ class e$5 extends t$2 {
     this.host.addEventListener('context-request', this.onContextRequest)
   }
   hostConnected() {
-    this.host.dispatchEvent(new s$1(this.context))
+    this.host.dispatchEvent(new s$5(this.context))
   }
 }
 
@@ -4006,7 +3927,7 @@ class e$5 extends t$2 {
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ class e$4 {
+ */ class e$d {
   constructor() {
     ;(this.pendingContextRequests = new Map()),
       (this.onContextProvider = e => {
@@ -4016,7 +3937,7 @@ class e$5 extends t$2 {
           s.forEach(s => {
             const c = s.element,
               i = s.callback
-            c && c.dispatchEvent(new s$3(e.context, i, !0))
+            c && c.dispatchEvent(new s$7(e.context, i, !0))
           }))
       }),
       (this.onContextRequest = t => {
@@ -4041,12 +3962,12 @@ class e$5 extends t$2 {
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ function o$4({ context: o }) {
-  return o$5({
+ */ function o$a({ context: o }) {
+  return o$b({
     finisher: (t, n) => {
       const r = new WeakMap()
       t.addInitializer(t => {
-        r.set(t, new e$5(t, o))
+        r.set(t, new e$e(t, o))
       })
       const i = Object.getOwnPropertyDescriptor(t.prototype, n),
         c = null == i ? void 0 : i.set,
@@ -4067,11 +3988,11 @@ class e$5 extends t$2 {
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ function t$1({ context: t, subscribe: o }) {
-  return o$5({
+ */ function t$5({ context: t, subscribe: o }) {
+  return o$b({
     finisher: (e, n) => {
       e.addInitializer(e => {
-        new s$2(
+        new s$6(
           e,
           t,
           r => {
@@ -4088,20 +4009,20 @@ class e$5 extends t$2 {
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const e$3 = o$4,
-  r$1 = t$1
+ */ const e$c = o$a,
+  r$8 = t$5
 
 var context = /*#__PURE__*/ Object.freeze({
   __proto__: null,
-  contextProvided: r$1,
-  contextProvider: e$3,
-  ContextEvent: s$3,
-  createContext: n$3,
-  ContextConsumer: s$2,
-  ContextProvider: e$5,
-  ContextRoot: e$4,
-  provide: o$4,
-  consume: t$1,
+  contextProvided: r$8,
+  contextProvider: e$c,
+  ContextEvent: s$7,
+  createContext: n$8,
+  ContextConsumer: s$6,
+  ContextProvider: e$e,
+  ContextRoot: e$d,
+  provide: o$a,
+  consume: t$5,
 })
 
 var require$$0 = /*@__PURE__*/ getAugmentedNamespace(context)
@@ -4240,7 +4161,7 @@ const compareObjects = (obj1, obj2) =>
 selectState.compareObjects = compareObjects
 
 // "Inject" XState context into components with DOM events
-const viewerContext = n$3('viewer-context')
+const viewerContext = n$8('viewer-context')
 let appContext
 const setContext = context => {
   appContext = context
@@ -4250,14 +4171,14 @@ const setContext = context => {
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const e$2 = o => void 0 === o.strings
+ */ const e$b = o => void 0 === o.strings
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t = {
+const t$4 = {
     ATTRIBUTE: 1,
     CHILD: 2,
     PROPERTY: 3,
@@ -4265,8 +4186,8 @@ const t = {
     EVENT: 5,
     ELEMENT: 6,
   },
-  e$1 = t => (...e) => ({ _$litDirective$: t, values: e })
-class i$1 {
+  e$a = t => (...e) => ({ _$litDirective$: t, values: e })
+class i$5 {
   constructor(t) {}
   get _$AU() {
     return this._$AM._$AU
@@ -4286,54 +4207,56 @@ class i$1 {
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const s = (i, t) => {
+ */ const s$4 = (i, t) => {
     var e, o
     const r = i._$AN
     if (void 0 === r) return !1
     for (const i of r)
-      null === (o = (e = i)._$AO) || void 0 === o || o.call(e, t, !1), s(i, t)
+      null === (o = (e = i)._$AO) || void 0 === o || o.call(e, t, !1), s$4(i, t)
     return !0
   },
-  o$3 = i => {
+  o$9 = i => {
     let t, e
     do {
       if (void 0 === (t = i._$AM)) break
       ;(e = t._$AN), e.delete(i), (i = t)
     } while (0 === (null == e ? void 0 : e.size))
   },
-  r = i => {
+  r$7 = i => {
     for (let t; (t = i._$AM); i = t) {
       let e = t._$AN
       if (void 0 === e) t._$AN = e = new Set()
       else if (e.has(i)) break
-      e.add(i), l$1(t)
+      e.add(i), l$3(t)
     }
   }
-function n$2(i) {
-  void 0 !== this._$AN ? (o$3(this), (this._$AM = i), r(this)) : (this._$AM = i)
+function n$7(i) {
+  void 0 !== this._$AN
+    ? (o$9(this), (this._$AM = i), r$7(this))
+    : (this._$AM = i)
 }
-function h$1(i, t = !1, e = 0) {
+function h$3(i, t = !1, e = 0) {
   const r = this._$AH,
     n = this._$AN
   if (void 0 !== n && 0 !== n.size)
     if (t)
       if (Array.isArray(r))
-        for (let i = e; i < r.length; i++) s(r[i], !1), o$3(r[i])
-      else null != r && (s(r, !1), o$3(r))
-    else s(this, i)
+        for (let i = e; i < r.length; i++) s$4(r[i], !1), o$9(r[i])
+      else null != r && (s$4(r, !1), o$9(r))
+    else s$4(this, i)
 }
-const l$1 = i => {
-  var t$1, s, o, r
-  i.type == t.CHILD &&
-    ((null !== (t$1 = (o = i)._$AP) && void 0 !== t$1) || (o._$AP = h$1),
-    (null !== (s = (r = i)._$AQ) && void 0 !== s) || (r._$AQ = n$2))
+const l$3 = i => {
+  var t, s, o, r
+  i.type == t$4.CHILD &&
+    ((null !== (t = (o = i)._$AP) && void 0 !== t) || (o._$AP = h$3),
+    (null !== (s = (r = i)._$AQ) && void 0 !== s) || (r._$AQ = n$7))
 }
-class c extends i$1 {
+class c$3 extends i$5 {
   constructor() {
     super(...arguments), (this._$AN = void 0)
   }
   _$AT(i, t, e) {
-    super._$AT(i, t, e), r(this), (this.isConnected = i._$AU)
+    super._$AT(i, t, e), r$7(this), (this.isConnected = i._$AU)
   }
   _$AO(i, t = !0) {
     var e, r
@@ -4342,10 +4265,10 @@ class c extends i$1 {
       i
         ? null === (e = this.reconnected) || void 0 === e || e.call(this)
         : null === (r = this.disconnected) || void 0 === r || r.call(this)),
-      t && (s(this, i), o$3(this))
+      t && (s$4(this, i), o$9(this))
   }
   setValue(t) {
-    if (e$2(this._$Ct)) this._$Ct._$AI(t, this)
+    if (e$b(this._$Ct)) this._$Ct._$AI(t, this)
     else {
       const i = [...this._$Ct._$AH]
       ;(i[this._$Ci] = t), this._$Ct._$AI(i, this, 0)
@@ -4359,13 +4282,13 @@ class c extends i$1 {
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const e = () => new o$2()
-class o$2 {}
-const h = new WeakMap(),
-  n$1 = e$1(
-    class extends c {
+ */ const e$9 = () => new o$8()
+class o$8 {}
+const h$2 = new WeakMap(),
+  n$6 = e$a(
+    class extends c$3 {
       render(t) {
-        return b
+        return b$1
       }
       update(t, [s]) {
         var e
@@ -4377,15 +4300,15 @@ const h = new WeakMap(),
             (this.dt =
               null === (e = t.options) || void 0 === e ? void 0 : e.host),
             this.rt((this.ct = t.element))),
-          b
+          b$1
         )
       }
       rt(i) {
         var t
         if ('function' == typeof this.Y) {
           const s = null !== (t = this.dt) && void 0 !== t ? t : globalThis
-          let e = h.get(s)
-          void 0 === e && ((e = new WeakMap()), h.set(s, e)),
+          let e = h$2.get(s)
+          void 0 === e && ((e = new WeakMap()), h$2.set(s, e)),
             void 0 !== e.get(this.Y) && this.Y.call(this.dt, void 0),
             e.set(this.Y, i),
             void 0 !== i && this.Y.call(this.dt, i)
@@ -4395,7 +4318,7 @@ const h = new WeakMap(),
         var i, t, s
         return 'function' == typeof this.Y
           ? null ===
-              (t = h.get(
+              (t = h$2.get(
                 null !== (i = this.dt) && void 0 !== i ? i : globalThis
               )) || void 0 === t
             ? void 0
@@ -4418,7 +4341,7 @@ const h = new WeakMap(),
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function* o$1(o, f) {
+function* o$7(o, f) {
   if (void 0 !== o) {
     let i = 0
     for (const t of o) yield f(t, i++)
@@ -4427,806 +4350,2201 @@ function* o$1(o, f) {
 
 /**
  * @license
- * Copyright 2018 Google LLC
+ * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const o = e$1(
-  class extends i$1 {
-    constructor(t$1) {
-      var i
-      if (
-        (super(t$1),
-        t$1.type !== t.ATTRIBUTE ||
-          'class' !== t$1.name ||
-          (null === (i = t$1.strings) || void 0 === i ? void 0 : i.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(i => t[i])
-          .join(' ') +
-        ' '
-      )
-    }
-    update(i, [s]) {
-      var r, o
-      if (void 0 === this.nt) {
-        ;(this.nt = new Set()),
-          void 0 !== i.strings &&
-            (this.st = new Set(
-              i.strings
-                .join(' ')
-                .split(/\s/)
-                .filter(t => '' !== t)
-            ))
-        for (const t in s)
-          s[t] &&
-            !(null === (r = this.st) || void 0 === r ? void 0 : r.has(t)) &&
-            this.nt.add(t)
-        return this.render(s)
-      }
-      const e = i.element.classList
-      this.nt.forEach(t => {
-        t in s || (e.remove(t), this.nt.delete(t))
+ */
+const t$3 = t => (e, o) => {
+  void 0 !== o
+    ? o.addInitializer(() => {
+        customElements.define(t, e)
       })
-      for (const t in s) {
-        const i = !!s[t]
-        i === this.nt.has(t) ||
-          (null === (o = this.st) || void 0 === o ? void 0 : o.has(t)) ||
-          (i ? (e.add(t), this.nt.add(t)) : (e.remove(t), this.nt.delete(t)))
-      }
-      return x
-    }
-  }
-)
+    : customElements.define(t, e)
+}
 
 /**
  * @license
- * Copyright 2018 Google LLC
+ * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const l = l => (null != l ? l : b)
+ */
+const t$2 = globalThis,
+  e$8 =
+    t$2.ShadowRoot &&
+    (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) &&
+    'adoptedStyleSheets' in Document.prototype &&
+    'replace' in CSSStyleSheet.prototype,
+  s$3 = Symbol(),
+  o$6 = new WeakMap()
+class n$5 {
+  constructor(t, e, o) {
+    if (((this._$cssResult$ = !0), o !== s$3))
+      throw Error(
+        'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'
+      )
+    ;(this.cssText = t), (this.t = e)
+  }
+  get styleSheet() {
+    let t = this.o
+    const s = this.t
+    if (e$8 && void 0 === t) {
+      const e = void 0 !== s && 1 === s.length
+      e && (t = o$6.get(s)),
+        void 0 === t &&
+          ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText),
+          e && o$6.set(s, t))
+    }
+    return t
+  }
+  toString() {
+    return this.cssText
+  }
+}
+const r$6 = t => new n$5('string' == typeof t ? t : t + '', void 0, s$3),
+  i$4 = (t, ...e) => {
+    const o =
+      1 === t.length
+        ? t[0]
+        : e.reduce(
+            (e, s, o) =>
+              e +
+              (t => {
+                if (!0 === t._$cssResult$) return t.cssText
+                if ('number' == typeof t) return t
+                throw Error(
+                  "Value passed to 'css' function must be a 'css' function result: " +
+                    t +
+                    ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."
+                )
+              })(s) +
+              t[o + 1],
+            t[0]
+          )
+    return new n$5(o, t, s$3)
+  },
+  S$1 = (s, o) => {
+    if (e$8)
+      s.adoptedStyleSheets = o.map(t =>
+        t instanceof CSSStyleSheet ? t : t.styleSheet
+      )
+    else
+      for (const e of o) {
+        const o = document.createElement('style'),
+          n = t$2.litNonce
+        void 0 !== n && o.setAttribute('nonce', n),
+          (o.textContent = e.cssText),
+          s.appendChild(o)
+      }
+  },
+  c$2 = e$8
+    ? t => t
+    : t =>
+        t instanceof CSSStyleSheet
+          ? (t => {
+              let e = ''
+              for (const s of t.cssRules) e += s.cssText
+              return r$6(e)
+            })(t)
+          : t
 
 /**
  * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A property decorator that helps proxy an aria attribute to an internal node.
- *
- * This decorator is only intended for use with ARIAMixin properties,
- * such as `ariaLabel`, to help with screen readers.
- *
- * This decorator will remove the host `aria-*` attribute at runtime and add it
- * to a `data-aria-*` attribute to avoid screenreader conflicts between the
- * host and internal node.
- *
- * `@ariaProperty` decorated properties should sync with LitElement to the
- * `data-aria-*` attribute, not the native `aria-*` attribute.
- *
- * @example
- * ```ts
- * class MyElement extends LitElement {
- *   \@ariaProperty
- *   // TODO(b/210730484): replace with @soyParam annotation
- *   \@property({ type: String, attribute: 'data-aria-label', noAccessor: true})
- *   ariaLabel!: string;
- * }
- * ```
- * @category Decorator
- * @ExportDecoratedItems
- */
-function ariaProperty(prototype, property) {
-  // Replace the ARIAMixin property with data-* attribute syncing instead of
-  // using the native aria-* attribute reflection. This preserves the attribute
-  // for SSR and avoids screenreader conflicts after delegating the attribute
-  // to a child node.
-  Object.defineProperty(prototype, property, {
-    configurable: true,
-    enumerable: true,
-    get() {
-      return this.dataset[property] ?? ''
-    },
-    set(value) {
-      // Coerce non-string values to a string
-      const strValue = String(value ?? '')
-      if (strValue) {
-        this.dataset[property] = strValue
-      } else {
-        delete this.dataset[property]
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const {
+    is: i$3,
+    defineProperty: e$7,
+    getOwnPropertyDescriptor: r$5,
+    getOwnPropertyNames: h$1,
+    getOwnPropertySymbols: o$5,
+    getPrototypeOf: n$4,
+  } = Object,
+  a$2 = globalThis,
+  c$1 = a$2.trustedTypes,
+  l$2 = c$1 ? c$1.emptyScript : '',
+  p$1 = a$2.reactiveElementPolyfillSupport,
+  d$1 = (t, s) => t,
+  u$1 = {
+    toAttribute(t, s) {
+      switch (s) {
+        case Boolean:
+          t = t ? l$2 : null
+          break
+        case Object:
+        case Array:
+          t = null == t ? t : JSON.stringify(t)
       }
-      // lit will call this setter whenever the data-* attribute changes.
-      // However, this.dataset[property] will automatically be updated to the
-      // current value. To avoid bugs, always request an update regardless of
-      // the old value.
-      this.requestUpdate()
-    },
-  })
-  // Define an internal property that syncs from the `aria-*` attribute with lit
-  // and delegates to the real ARIAMixin property, which renders an update.
-  // This property will immediately remove the `aria-*` attribute, which doesn't
-  // work well with SSR (which is why there's a separate synced property).
-  const internalAriaProperty = Symbol(property)
-  // "ariaLabel" -> "aria-label" / "ariaLabelledBy" -> "aria-labelledby"
-  const ariaAttribute = property.replace('aria', 'aria-').toLowerCase()
-  const constructor = prototype.constructor
-  let removingAttribute = false
-  Object.defineProperty(prototype, internalAriaProperty, {
-    get() {
-      // tslint is failing here, but the types are correct (ARIAMixin
-      // properties do not obfuscate with closure)
-      // tslint:disable-next-line:no-dict-access-on-struct-type
-      return this[property]
+      return t
     },
-    set(value) {
-      if (removingAttribute) {
-        // Ignore this update, which is triggered below
-        return
+    fromAttribute(t, s) {
+      let i = t
+      switch (s) {
+        case Boolean:
+          i = null !== t
+          break
+        case Number:
+          i = null === t ? null : Number(t)
+          break
+        case Object:
+        case Array:
+          try {
+            i = JSON.parse(t)
+          } catch (t) {
+            i = null
+          }
       }
-      // Set the ARIAMixin property, which will sync the `data-*` attribute
-      // and trigger rendering if the value changed.
-      // tslint is failing here, but the types are correct (ARIAMixin
-      // properties do not obfuscate with closure)
-      // tslint:disable-next-line:no-dict-access-on-struct-type
-      this[property] = value
-      // Remove the `aria-*` attribute, which will call this setter again with
-      // the incorrect value. Ignore these updates.
-      removingAttribute = true
-      this.removeAttribute(ariaAttribute)
-      removingAttribute = false
+      return i
     },
-  })
-  // Tell lit to observe the `aria-*` attribute and set the internal property,
-  // which acts as a "aria-* attribute changed" observer.
-  constructor.createProperty(internalAriaProperty, {
-    attribute: ariaAttribute,
-    noAccessor: true,
-  })
-}
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const NAVIGABLE_KEYS = {
-  ArrowDown: 'ArrowDown',
-  ArrowUp: 'ArrowUp',
-  Home: 'Home',
-  End: 'End',
-}
-const navigableKeySet = new Set(Object.values(NAVIGABLE_KEYS))
-function isNavigableKey(key) {
-  return navigableKeySet.has(key)
-}
-// tslint:disable-next-line:enforce-comments-on-exported-symbols
-class List extends s$4 {
-  constructor() {
-    super(...arguments)
-    // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-    this.role = 'list'
-    /**
-     * The tabindex of the underlying list.
-     */
-    this.listTabIndex = 0
-  }
-  render() {
-    return this.renderList()
-  }
-  /**
-   * Renders the main list element.
-   */
-  renderList() {
-    return y`
-    <ul class="md3-list ${o(this.getListClasses())}"
-        aria-label="${l(this.ariaLabel)}"
-        tabindex=${this.listTabIndex}
-        role=${this.role}
-        @keydown=${this.handleKeydown}
-        >
-      ${this.renderContent()}
-    </ul>
-  `
+  },
+  f$1 = (t, s) => !i$3(t, s),
+  y$1 = {
+    attribute: !0,
+    type: String,
+    converter: u$1,
+    reflect: !1,
+    hasChanged: f$1,
   }
-  /**
-   * The classes to be applied to the underlying list.
-   */
-  getListClasses() {
-    return {}
+;(Symbol.metadata ??= Symbol('metadata')),
+  (a$2.litPropertyMetadata ??= new WeakMap())
+class b extends HTMLElement {
+  static addInitializer(t) {
+    this._$Ei(), (this.l ??= []).push(t)
   }
-  /**
-   * The content to be slotted into the list.
-   */
-  renderContent() {
-    return y`<span><slot @click=${e => {
-      e.stopPropagation()
-    }}></slot></span>`
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()]
   }
-  /**
-   * Handles keyboard navigation in the list.
-   *
-   * @param event {KeyboardEvent} The keyboard event that triggers this handler.
-   */
-  handleKeydown(event) {
-    const key = event.key
-    if (!isNavigableKey(key)) {
-      return
-    }
-    // do not use this.items directly so we don't re-query the DOM unnecessarily
-    const items = this.items
-    if (!items.length) {
-      return
+  static createProperty(t, s = y$1) {
+    if (
+      (s.state && (s.attribute = !1),
+      this._$Ei(),
+      this.elementProperties.set(t, s),
+      !s.noAccessor)
+    ) {
+      const i = Symbol(),
+        r = this.getPropertyDescriptor(t, i, s)
+      void 0 !== r && e$7(this.prototype, t, r)
     }
-    const activeItemRecord = List.getActiveItem(items)
-    if (activeItemRecord) {
-      activeItemRecord.item.active = false
+  }
+  static getPropertyDescriptor(t, s, i) {
+    const { get: e, set: h } = r$5(this.prototype, t) ?? {
+      get() {
+        return this[s]
+      },
+      set(t) {
+        this[s] = t
+      },
     }
-    event.preventDefault()
-    switch (key) {
-      // Activate the next item
-      case NAVIGABLE_KEYS.ArrowDown:
-        if (activeItemRecord) {
-          const next = List.getNextItem(items, activeItemRecord.index)
-          if (next) next.active = true
-        } else {
-          List.activateFirstItem(items)
-        }
-        break
-      // Activate the previous item
-      case NAVIGABLE_KEYS.ArrowUp:
-        if (activeItemRecord) {
-          const prev = List.getPrevItem(items, activeItemRecord.index)
-          if (prev) prev.active = true
-        } else {
-          items[items.length - 1].active = true
-        }
-        break
-      // Activate the first item
-      case NAVIGABLE_KEYS.Home:
-        List.activateFirstItem(items)
-        break
-      // Activate the last item
-      case NAVIGABLE_KEYS.End:
-        List.activateLastItem(items)
-        break
+    return {
+      get() {
+        return e?.call(this)
+      },
+      set(s) {
+        const r = e?.call(this)
+        h.call(this, s), this.requestUpdate(t, r, i)
+      },
+      configurable: !0,
+      enumerable: !0,
     }
   }
-  /**
-   * Activates the first non-disabled item of a given array of items.
-   *
-   * @param items {Array<ListItem>} The items from which to activate the
-   * first item.
-   */
-  static activateFirstItem(items) {
-    // NOTE: These selector functions are static and not on the instance such
-    // that multiple operations can be chained and we do not have to re-query
-    // the DOM
-    const firstItem = List.getFirstActivatableItem(items)
-    if (firstItem) {
-      firstItem.active = true
-    }
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) ?? y$1
   }
-  /**
-   * Activates the last non-disabled item of a given array of items.
-   *
-   * @param items {Array<ListItem>} The items from which to activate the
-   * last item.
-   */
-  static activateLastItem(items) {
-    const lastItem = List.getLastActivatableItem(items)
-    if (lastItem) {
-      lastItem.active = true
-    }
+  static _$Ei() {
+    if (this.hasOwnProperty(d$1('elementProperties'))) return
+    const t = n$4(this)
+    t.finalize(),
+      void 0 !== t.l && (this.l = [...t.l]),
+      (this.elementProperties = new Map(t.elementProperties))
   }
-  /**
-   * Deactivates the currently active item of a given array of items.
-   *
-   * @param items {Array<ListItem>} The items from which to deactivate the
-   * active item.
-   * @returns A record of the deleselcted activated item including the item and
-   * the index of the item or `null` if none are deactivated.
-   */
-  static deactivateActiveItem(items) {
-    const activeItem = List.getActiveItem(items)
-    if (activeItem) {
-      activeItem.item.active = false
+  static finalize() {
+    if (this.hasOwnProperty(d$1('finalized'))) return
+    if (
+      ((this.finalized = !0),
+      this._$Ei(),
+      this.hasOwnProperty(d$1('properties')))
+    ) {
+      const t = this.properties,
+        s = [...h$1(t), ...o$5(t)]
+      for (const i of s) this.createProperty(i, t[i])
+    }
+    const t = this[Symbol.metadata]
+    if (null !== t) {
+      const s = litPropertyMetadata.get(t)
+      if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i)
+    }
+    this._$Eh = new Map()
+    for (const [t, s] of this.elementProperties) {
+      const i = this._$Eu(t, s)
+      void 0 !== i && this._$Eh.set(i, t)
+    }
+    this.elementStyles = this.finalizeStyles(this.styles)
+  }
+  static finalizeStyles(s) {
+    const i = []
+    if (Array.isArray(s)) {
+      const e = new Set(s.flat(1 / 0).reverse())
+      for (const s of e) i.unshift(c$2(s))
+    } else void 0 !== s && i.push(c$2(s))
+    return i
+  }
+  static _$Eu(t, s) {
+    const i = s.attribute
+    return !1 === i
+      ? void 0
+      : 'string' == typeof i
+      ? i
+      : 'string' == typeof t
+      ? t.toLowerCase()
+      : void 0
+  }
+  constructor() {
+    super(),
+      (this._$Ep = void 0),
+      (this.isUpdatePending = !1),
+      (this.hasUpdated = !1),
+      (this._$Em = null),
+      this._$Ev()
+  }
+  _$Ev() {
+    ;(this._$Eg = new Promise(t => (this.enableUpdating = t))),
+      (this._$AL = new Map()),
+      this._$ES(),
+      this.requestUpdate(),
+      this.constructor.l?.forEach(t => t(this))
+  }
+  addController(t) {
+    ;(this._$E_ ??= new Set()).add(t),
+      void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.()
+  }
+  removeController(t) {
+    this._$E_?.delete(t)
+  }
+  _$ES() {
+    const t = new Map(),
+      s = this.constructor.elementProperties
+    for (const i of s.keys())
+      this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i])
+    t.size > 0 && (this._$Ep = t)
+  }
+  createRenderRoot() {
+    const t =
+      this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions)
+    return S$1(t, this.constructor.elementStyles), t
+  }
+  connectedCallback() {
+    ;(this.renderRoot ??= this.createRenderRoot()),
+      this.enableUpdating(!0),
+      this._$E_?.forEach(t => t.hostConnected?.())
+  }
+  enableUpdating(t) {}
+  disconnectedCallback() {
+    this._$E_?.forEach(t => t.hostDisconnected?.())
+  }
+  attributeChangedCallback(t, s, i) {
+    this._$AK(t, i)
+  }
+  _$EO(t, s) {
+    const i = this.constructor.elementProperties.get(t),
+      e = this.constructor._$Eu(t, i)
+    if (void 0 !== e && !0 === i.reflect) {
+      const r = (void 0 !== i.converter?.toAttribute
+        ? i.converter
+        : u$1
+      ).toAttribute(s, i.type)
+      ;(this._$Em = t),
+        null == r ? this.removeAttribute(e) : this.setAttribute(e, r),
+        (this._$Em = null)
+    }
+  }
+  _$AK(t, s) {
+    const i = this.constructor,
+      e = i._$Eh.get(t)
+    if (void 0 !== e && this._$Em !== e) {
+      const t = i.getPropertyOptions(e),
+        r =
+          'function' == typeof t.converter
+            ? { fromAttribute: t.converter }
+            : void 0 !== t.converter?.fromAttribute
+            ? t.converter
+            : u$1
+      ;(this._$Em = e),
+        (this[e] = r.fromAttribute(s, t.type)),
+        (this._$Em = null)
+    }
+  }
+  requestUpdate(t, s, i, e = !1, r) {
+    if (void 0 !== t) {
+      if (
+        ((i ??= this.constructor.getPropertyOptions(t)),
+        !(i.hasChanged ?? f$1)(e ? r : this[t], s))
+      )
+        return
+      this.C(t, s, i)
+    }
+    !1 === this.isUpdatePending && (this._$Eg = this._$EP())
+  }
+  C(t, s, i) {
+    this._$AL.has(t) || this._$AL.set(t, s),
+      !0 === i.reflect && this._$Em !== t && (this._$Ej ??= new Set()).add(t)
+  }
+  async _$EP() {
+    this.isUpdatePending = !0
+    try {
+      await this._$Eg
+    } catch (t) {
+      Promise.reject(t)
+    }
+    const t = this.scheduleUpdate()
+    return null != t && (await t), !this.isUpdatePending
+  }
+  scheduleUpdate() {
+    return this.performUpdate()
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return
+    if (!this.hasUpdated) {
+      if (((this.renderRoot ??= this.createRenderRoot()), this._$Ep)) {
+        for (const [t, s] of this._$Ep) this[t] = s
+        this._$Ep = void 0
+      }
+      const t = this.constructor.elementProperties
+      if (t.size > 0)
+        for (const [s, i] of t)
+          !0 !== i.wrapped ||
+            this._$AL.has(s) ||
+            void 0 === this[s] ||
+            this.C(s, this[s], i)
+    }
+    let t = !1
+    const s = this._$AL
+    try {
+      ;(t = this.shouldUpdate(s)),
+        t
+          ? (this.willUpdate(s),
+            this._$E_?.forEach(t => t.hostUpdate?.()),
+            this.update(s))
+          : this._$ET()
+    } catch (s) {
+      throw ((t = !1), this._$ET(), s)
+    }
+    t && this._$AE(s)
+  }
+  willUpdate(t) {}
+  _$AE(t) {
+    this._$E_?.forEach(t => t.hostUpdated?.()),
+      this.hasUpdated || ((this.hasUpdated = !0), this.firstUpdated(t)),
+      this.updated(t)
+  }
+  _$ET() {
+    ;(this._$AL = new Map()), (this.isUpdatePending = !1)
+  }
+  get updateComplete() {
+    return this.getUpdateComplete()
+  }
+  getUpdateComplete() {
+    return this._$Eg
+  }
+  shouldUpdate(t) {
+    return !0
+  }
+  update(t) {
+    ;(this._$Ej &&= this._$Ej.forEach(t => this._$EO(t, this[t]))), this._$ET()
+  }
+  updated(t) {}
+  firstUpdated(t) {}
+}
+;(b.elementStyles = []),
+  (b.shadowRootOptions = { mode: 'open' }),
+  (b[d$1('elementProperties')] = new Map()),
+  (b[d$1('finalized')] = new Map()),
+  p$1?.({ ReactiveElement: b }),
+  (a$2.reactiveElementVersions ??= []).push('2.0.2')
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const o$4 = {
+    attribute: !0,
+    type: String,
+    converter: u$1,
+    reflect: !1,
+    hasChanged: f$1,
+  },
+  r$4 = (t = o$4, e, r) => {
+    const { kind: n, metadata: i } = r
+    let s = globalThis.litPropertyMetadata.get(i)
+    if (
+      (void 0 === s && globalThis.litPropertyMetadata.set(i, (s = new Map())),
+      s.set(r.name, t),
+      'accessor' === n)
+    ) {
+      const { name: o } = r
+      return {
+        set(r) {
+          const n = e.get.call(this)
+          e.set.call(this, r), this.requestUpdate(o, n, t)
+        },
+        init(e) {
+          return void 0 !== e && this.C(o, void 0, t), e
+        },
+      }
+    }
+    if ('setter' === n) {
+      const { name: o } = r
+      return function(r) {
+        const n = this[o]
+        e.call(this, r), this.requestUpdate(o, n, t)
+      }
+    }
+    throw Error('Unsupported decorator location: ' + n)
+  }
+function n$3(t) {
+  return (e, o) =>
+    'object' == typeof o
+      ? r$4(t, e, o)
+      : ((t, e, o) => {
+          const r = e.hasOwnProperty(o)
+          return (
+            e.constructor.createProperty(o, r ? { ...t, wrapped: !0 } : t),
+            r ? Object.getOwnPropertyDescriptor(e, o) : void 0
+          )
+        })(t, e, o)
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function r$3(r) {
+  return n$3({ ...r, state: !0, attribute: !1 })
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$6 = (e, t, c) => (
+  (c.configurable = !0),
+  (c.enumerable = !0),
+  Reflect.decorate && 'object' != typeof t && Object.defineProperty(e, t, c),
+  c
+)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function e$5(e, r) {
+  return (n, s, i) => {
+    const o = t => t.renderRoot?.querySelector(e) ?? null
+    if (r) {
+      const { get: e, set: r } =
+        'object' == typeof s
+          ? n
+          : i ??
+            (() => {
+              const t = Symbol()
+              return {
+                get() {
+                  return this[t]
+                },
+                set(e) {
+                  this[t] = e
+                },
+              }
+            })()
+      return e$6(n, s, {
+        get() {
+          let t = e.call(this)
+          return (
+            void 0 === t &&
+              ((t = o(this)),
+              (null !== t || this.hasUpdated) && r.call(this, t)),
+            t
+          )
+        },
+      })
+    }
+    return e$6(n, s, {
+      get() {
+        return o(this)
+      },
+    })
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let e$4
+function r$2(r) {
+  return (n, o) =>
+    e$6(n, o, {
+      get() {
+        return (
+          this.renderRoot ?? (e$4 ??= document.createDocumentFragment())
+        ).querySelectorAll(r)
+      },
+    })
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function o$3(o) {
+  return (e, n) => {
+    const { slot: r, selector: s } = o ?? {},
+      c = 'slot' + (r ? `[name=${r}]` : ':not([name])')
+    return e$6(e, n, {
+      get() {
+        const t = this.renderRoot?.querySelector(c),
+          e = t?.assignedElements(o) ?? []
+        return void 0 === s ? e : e.filter(t => t.matches(s))
+      },
+    })
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1 = globalThis,
+  i$2 = t$1.trustedTypes,
+  s$2 = i$2 ? i$2.createPolicy('lit-html', { createHTML: t => t }) : void 0,
+  e$3 = '$lit$',
+  h = `lit$${(Math.random() + '').slice(9)}$`,
+  o$2 = '?' + h,
+  n$2 = `<${o$2}>`,
+  r$1 = document,
+  l$1 = () => r$1.createComment(''),
+  c = t => null === t || ('object' != typeof t && 'function' != typeof t),
+  a$1 = Array.isArray,
+  u = t => a$1(t) || 'function' == typeof t?.[Symbol.iterator],
+  d = '[ \t\n\f\r]',
+  f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
+  v = /-->/g,
+  _ = />/g,
+  m = RegExp(
+    `>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,
+    'g'
+  ),
+  p = /'/g,
+  g = /"/g,
+  $ = /^(?:script|style|textarea|title)$/i,
+  y = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
+  x = y(1),
+  w = Symbol.for('lit-noChange'),
+  T = Symbol.for('lit-nothing'),
+  A = new WeakMap(),
+  E = r$1.createTreeWalker(r$1, 129)
+function C(t, i) {
+  if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
+    throw Error('invalid template strings array')
+  return void 0 !== s$2 ? s$2.createHTML(i) : i
+}
+const P = (t, i) => {
+  const s = t.length - 1,
+    o = []
+  let r,
+    l = 2 === i ? '<svg>' : '',
+    c = f
+  for (let i = 0; i < s; i++) {
+    const s = t[i]
+    let a,
+      u,
+      d = -1,
+      y = 0
+    for (; y < s.length && ((c.lastIndex = y), (u = c.exec(s)), null !== u); )
+      (y = c.lastIndex),
+        c === f
+          ? '!--' === u[1]
+            ? (c = v)
+            : void 0 !== u[1]
+            ? (c = _)
+            : void 0 !== u[2]
+            ? ($.test(u[2]) && (r = RegExp('</' + u[2], 'g')), (c = m))
+            : void 0 !== u[3] && (c = m)
+          : c === m
+          ? '>' === u[0]
+            ? ((c = r ?? f), (d = -1))
+            : void 0 === u[1]
+            ? (d = -2)
+            : ((d = c.lastIndex - u[2].length),
+              (a = u[1]),
+              (c = void 0 === u[3] ? m : '"' === u[3] ? g : p))
+          : c === g || c === p
+          ? (c = m)
+          : c === v || c === _
+          ? (c = f)
+          : ((c = m), (r = void 0))
+    const x = c === m && t[i + 1].startsWith('/>') ? ' ' : ''
+    l +=
+      c === f
+        ? s + n$2
+        : d >= 0
+        ? (o.push(a), s.slice(0, d) + e$3 + s.slice(d) + h + x)
+        : s + h + (-2 === d ? i : x)
+  }
+  return [C(t, l + (t[s] || '<?>') + (2 === i ? '</svg>' : '')), o]
+}
+class V {
+  constructor({ strings: t, _$litType$: s }, n) {
+    let r
+    this.parts = []
+    let c = 0,
+      a = 0
+    const u = t.length - 1,
+      d = this.parts,
+      [f, v] = P(t, s)
+    if (
+      ((this.el = V.createElement(f, n)),
+      (E.currentNode = this.el.content),
+      2 === s)
+    ) {
+      const t = this.el.content.firstChild
+      t.replaceWith(...t.childNodes)
+    }
+    for (; null !== (r = E.nextNode()) && d.length < u; ) {
+      if (1 === r.nodeType) {
+        if (r.hasAttributes())
+          for (const t of r.getAttributeNames())
+            if (t.endsWith(e$3)) {
+              const i = v[a++],
+                s = r.getAttribute(t).split(h),
+                e = /([.?@])?(.*)/.exec(i)
+              d.push({
+                type: 1,
+                index: c,
+                name: e[2],
+                strings: s,
+                ctor:
+                  '.' === e[1] ? k : '?' === e[1] ? H : '@' === e[1] ? I : R,
+              }),
+                r.removeAttribute(t)
+            } else
+              t.startsWith(h) &&
+                (d.push({ type: 6, index: c }), r.removeAttribute(t))
+        if ($.test(r.tagName)) {
+          const t = r.textContent.split(h),
+            s = t.length - 1
+          if (s > 0) {
+            r.textContent = i$2 ? i$2.emptyScript : ''
+            for (let i = 0; i < s; i++)
+              r.append(t[i], l$1()),
+                E.nextNode(),
+                d.push({ type: 2, index: ++c })
+            r.append(t[s], l$1())
+          }
+        }
+      } else if (8 === r.nodeType)
+        if (r.data === o$2) d.push({ type: 2, index: c })
+        else {
+          let t = -1
+          for (; -1 !== (t = r.data.indexOf(h, t + 1)); )
+            d.push({ type: 7, index: c }), (t += h.length - 1)
+        }
+      c++
+    }
+  }
+  static createElement(t, i) {
+    const s = r$1.createElement('template')
+    return (s.innerHTML = t), s
+  }
+}
+function N(t, i, s = t, e) {
+  if (i === w) return i
+  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl
+  const o = c(i) ? void 0 : i._$litDirective$
+  return (
+    h?.constructor !== o &&
+      (h?._$AO?.(!1),
+      void 0 === o ? (h = void 0) : ((h = new o(t)), h._$AT(t, s, e)),
+      void 0 !== e ? ((s._$Co ??= [])[e] = h) : (s._$Cl = h)),
+    void 0 !== h && (i = N(t, h._$AS(t, i.values), h, e)),
+    i
+  )
+}
+class S {
+  constructor(t, i) {
+    ;(this._$AV = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
+  }
+  get parentNode() {
+    return this._$AM.parentNode
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  u(t) {
+    const {
+        el: { content: i },
+        parts: s,
+      } = this._$AD,
+      e = (t?.creationScope ?? r$1).importNode(i, !0)
+    E.currentNode = e
+    let h = E.nextNode(),
+      o = 0,
+      n = 0,
+      l = s[0]
+    for (; void 0 !== l; ) {
+      if (o === l.index) {
+        let i
+        2 === l.type
+          ? (i = new M(h, h.nextSibling, this, t))
+          : 1 === l.type
+          ? (i = new l.ctor(h, l.name, l.strings, this, t))
+          : 6 === l.type && (i = new L(h, this, t)),
+          this._$AV.push(i),
+          (l = s[++n])
+      }
+      o !== l?.index && ((h = E.nextNode()), o++)
+    }
+    return (E.currentNode = r$1), e
+  }
+  p(t) {
+    let i = 0
+    for (const s of this._$AV)
+      void 0 !== s &&
+        (void 0 !== s.strings
+          ? (s._$AI(t, s, i), (i += s.strings.length - 2))
+          : s._$AI(t[i])),
+        i++
+  }
+}
+class M {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv
+  }
+  constructor(t, i, s, e) {
+    ;(this.type = 2),
+      (this._$AH = T),
+      (this._$AN = void 0),
+      (this._$AA = t),
+      (this._$AB = i),
+      (this._$AM = s),
+      (this.options = e),
+      (this._$Cv = e?.isConnected ?? !0)
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode
+    const i = this._$AM
+    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t
+  }
+  get startNode() {
+    return this._$AA
+  }
+  get endNode() {
+    return this._$AB
+  }
+  _$AI(t, i = this) {
+    ;(t = N(this, t, i)),
+      c(t)
+        ? t === T || null == t || '' === t
+          ? (this._$AH !== T && this._$AR(), (this._$AH = T))
+          : t !== this._$AH && t !== w && this._(t)
+        : void 0 !== t._$litType$
+        ? this.g(t)
+        : void 0 !== t.nodeType
+        ? this.$(t)
+        : u(t)
+        ? this.T(t)
+        : this._(t)
+  }
+  k(t) {
+    return this._$AA.parentNode.insertBefore(t, this._$AB)
+  }
+  $(t) {
+    this._$AH !== t && (this._$AR(), (this._$AH = this.k(t)))
+  }
+  _(t) {
+    this._$AH !== T && c(this._$AH)
+      ? (this._$AA.nextSibling.data = t)
+      : this.$(r$1.createTextNode(t)),
+      (this._$AH = t)
+  }
+  g(t) {
+    const { values: i, _$litType$: s } = t,
+      e =
+        'number' == typeof s
+          ? this._$AC(t)
+          : (void 0 === s.el &&
+              (s.el = V.createElement(C(s.h, s.h[0]), this.options)),
+            s)
+    if (this._$AH?._$AD === e) this._$AH.p(i)
+    else {
+      const t = new S(e, this),
+        s = t.u(this.options)
+      t.p(i), this.$(s), (this._$AH = t)
+    }
+  }
+  _$AC(t) {
+    let i = A.get(t.strings)
+    return void 0 === i && A.set(t.strings, (i = new V(t))), i
+  }
+  T(t) {
+    a$1(this._$AH) || ((this._$AH = []), this._$AR())
+    const i = this._$AH
+    let s,
+      e = 0
+    for (const h of t)
+      e === i.length
+        ? i.push((s = new M(this.k(l$1()), this.k(l$1()), this, this.options)))
+        : (s = i[e]),
+        s._$AI(h),
+        e++
+    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), (i.length = e))
+  }
+  _$AR(t = this._$AA.nextSibling, i) {
+    for (this._$AP?.(!1, !0, i); t && t !== this._$AB; ) {
+      const i = t.nextSibling
+      t.remove(), (t = i)
+    }
+  }
+  setConnected(t) {
+    void 0 === this._$AM && ((this._$Cv = t), this._$AP?.(t))
+  }
+}
+class R {
+  get tagName() {
+    return this.element.tagName
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  constructor(t, i, s, e, h) {
+    ;(this.type = 1),
+      (this._$AH = T),
+      (this._$AN = void 0),
+      (this.element = t),
+      (this.name = i),
+      (this._$AM = e),
+      (this.options = h),
+      s.length > 2 || '' !== s[0] || '' !== s[1]
+        ? ((this._$AH = Array(s.length - 1).fill(new String())),
+          (this.strings = s))
+        : (this._$AH = T)
+  }
+  _$AI(t, i = this, s, e) {
+    const h = this.strings
+    let o = !1
+    if (void 0 === h)
+      (t = N(this, t, i, 0)),
+        (o = !c(t) || (t !== this._$AH && t !== w)),
+        o && (this._$AH = t)
+    else {
+      const e = t
+      let n, r
+      for (t = h[0], n = 0; n < h.length - 1; n++)
+        (r = N(this, e[s + n], i, n)),
+          r === w && (r = this._$AH[n]),
+          (o ||= !c(r) || r !== this._$AH[n]),
+          r === T ? (t = T) : t !== T && (t += (r ?? '') + h[n + 1]),
+          (this._$AH[n] = r)
+    }
+    o && !e && this.O(t)
+  }
+  O(t) {
+    t === T
+      ? this.element.removeAttribute(this.name)
+      : this.element.setAttribute(this.name, t ?? '')
+  }
+}
+class k extends R {
+  constructor() {
+    super(...arguments), (this.type = 3)
+  }
+  O(t) {
+    this.element[this.name] = t === T ? void 0 : t
+  }
+}
+class H extends R {
+  constructor() {
+    super(...arguments), (this.type = 4)
+  }
+  O(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== T)
+  }
+}
+class I extends R {
+  constructor(t, i, s, e, h) {
+    super(t, i, s, e, h), (this.type = 5)
+  }
+  _$AI(t, i = this) {
+    if ((t = N(this, t, i, 0) ?? T) === w) return
+    const s = this._$AH,
+      e =
+        (t === T && s !== T) ||
+        t.capture !== s.capture ||
+        t.once !== s.once ||
+        t.passive !== s.passive,
+      h = t !== T && (s === T || e)
+    e && this.element.removeEventListener(this.name, this, s),
+      h && this.element.addEventListener(this.name, this, t),
+      (this._$AH = t)
+  }
+  handleEvent(t) {
+    'function' == typeof this._$AH
+      ? this._$AH.call(this.options?.host ?? this.element, t)
+      : this._$AH.handleEvent(t)
+  }
+}
+class L {
+  constructor(t, i, s) {
+    ;(this.element = t),
+      (this.type = 6),
+      (this._$AN = void 0),
+      (this._$AM = i),
+      (this.options = s)
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AI(t) {
+    N(this, t)
+  }
+}
+const Z = t$1.litHtmlPolyfillSupport
+Z?.(V, M), (t$1.litHtmlVersions ??= []).push('3.1.0')
+const j = (t, i, s) => {
+  const e = s?.renderBefore ?? i
+  let h = e._$litPart$
+  if (void 0 === h) {
+    const t = s?.renderBefore ?? null
+    e._$litPart$ = h = new M(i.insertBefore(l$1(), t), t, void 0, s ?? {})
+  }
+  return h._$AI(t), h
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ class s$1 extends b {
+  constructor() {
+    super(...arguments),
+      (this.renderOptions = { host: this }),
+      (this._$Do = void 0)
+  }
+  createRenderRoot() {
+    const t = super.createRenderRoot()
+    return (this.renderOptions.renderBefore ??= t.firstChild), t
+  }
+  update(t) {
+    const i = this.render()
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected),
+      super.update(t),
+      (this._$Do = j(i, this.renderRoot, this.renderOptions))
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(!0)
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(!1)
+  }
+  render() {
+    return w
+  }
+}
+;(s$1._$litElement$ = !0),
+  (s$1['finalized'] = !0),
+  globalThis.litElementHydrateSupport?.({ LitElement: s$1 })
+const r = globalThis.litElementPolyfillSupport
+r?.({ LitElement: s$1 })
+;(globalThis.litElementVersions ??= []).push('4.0.2')
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController')
+let FOR_ATTRIBUTE_OBSERVER
+{
+  /**
+   * A global `MutationObserver` that reacts to `for` attribute changes on
+   * `Attachable` elements. If the `for` attribute changes, the controller will
+   * re-attach to the new referenced element.
+   */
+  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+    for (const record of records) {
+      // When a control's `for` attribute changes, inform its
+      // `AttachableController` to update to a new control.
+      record.target[ATTACHABLE_CONTROLLER]?.hostConnected()
     }
-    return activeItem
+  })
+}
+/**
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+class AttachableController {
+  get htmlFor() {
+    return this.host.getAttribute('for')
   }
-  focus() {
-    this.listRoot.focus()
+  set htmlFor(htmlFor) {
+    if (htmlFor === null) {
+      this.host.removeAttribute('for')
+    } else {
+      this.host.setAttribute('for', htmlFor)
+    }
+  }
+  get control() {
+    if (this.host.hasAttribute('for')) {
+      if (!this.htmlFor || !this.host.isConnected) {
+        return null
+      }
+      return this.host.getRootNode().querySelector(`#${this.htmlFor}`)
+    }
+    return this.currentControl || this.host.parentElement
+  }
+  set control(control) {
+    if (control) {
+      this.attach(control)
+    } else {
+      this.detach()
+    }
   }
   /**
-   * Retrieves the the first activated item of a given array of items.
+   * Creates a new controller for an `Attachable` element.
    *
-   * @param items {Array<ListItem>} The items to search.
-   * @returns A record of the first activated item including the item and the
-   * index of the item or `null` if none are activated.
+   * @param host The `Attachable` element.
+   * @param onControlChange A callback with two parameters for the previous and
+   *     next control. An `Attachable` element may perform setup or teardown
+   *     logic whenever the control changes.
    */
-  static getActiveItem(items) {
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i]
-      if (item.active) {
-        return {
-          item,
-          index: i,
+  constructor(host, onControlChange) {
+    this.host = host
+    this.onControlChange = onControlChange
+    this.currentControl = null
+    host.addController(this)
+    host[ATTACHABLE_CONTROLLER] = this
+    FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] })
+  }
+  attach(control) {
+    if (control === this.currentControl) {
+      return
+    }
+    this.setCurrentControl(control)
+    // When imperatively attaching, remove the `for` attribute so
+    // that the attached control is used instead of a referenced one.
+    this.host.removeAttribute('for')
+  }
+  detach() {
+    this.setCurrentControl(null)
+    // When imperatively detaching, add an empty `for=""` attribute. This will
+    // ensure the control is `null` rather than the `parentElement`.
+    this.host.setAttribute('for', '')
+  }
+  /** @private */
+  hostConnected() {
+    this.setCurrentControl(this.control)
+  }
+  /** @private */
+  hostDisconnected() {
+    this.setCurrentControl(null)
+  }
+  setCurrentControl(control) {
+    this.onControlChange(this.currentControl, control)
+    this.currentControl = control
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Events that the focus ring listens to.
+ *
+ * @fires visibility-changed Fired whenever `visible` changes.
+ */
+const EVENTS$1 = ['focusin', 'focusout', 'pointerdown']
+/**
+ * A focus ring component.
+ */
+class FocusRing extends s$1 {
+  constructor() {
+    super(...arguments)
+    /**
+     * Makes the focus ring visible.
+     */
+    this.visible = false
+    /**
+     * Makes the focus ring animate inwards instead of outwards.
+     */
+    this.inward = false
+    this.attachableController = new AttachableController(
+      this,
+      this.onControlChange.bind(this)
+    )
+  }
+  get htmlFor() {
+    return this.attachableController.htmlFor
+  }
+  set htmlFor(htmlFor) {
+    this.attachableController.htmlFor = htmlFor
+  }
+  get control() {
+    return this.attachableController.control
+  }
+  set control(control) {
+    this.attachableController.control = control
+  }
+  attach(control) {
+    this.attachableController.attach(control)
+  }
+  detach() {
+    this.attachableController.detach()
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
+  }
+  /** @private */
+  handleEvent(event) {
+    if (event[HANDLED_BY_FOCUS_RING]) {
+      // This ensures the focus ring does not activate when multiple focus rings
+      // are used within a single component.
+      return
+    }
+    switch (event.type) {
+      default:
+        return
+      case 'focusin':
+        this.visible = this.control?.matches(':focus-visible') ?? false
+        break
+      case 'focusout':
+      case 'pointerdown':
+        this.visible = false
+        break
+    }
+    event[HANDLED_BY_FOCUS_RING] = true
+  }
+  onControlChange(prev, next) {
+    for (const event of EVENTS$1) {
+      prev?.removeEventListener(event, this)
+      next?.addEventListener(event, this)
+    }
+  }
+  update(changed) {
+    if (changed.has('visible')) {
+      // This logic can be removed once the `:has` selector has been introduced
+      // to Firefox. This is necessary to allow correct submenu styles.
+      this.dispatchEvent(new Event('visibility-changed'))
+    }
+    super.update(changed)
+  }
+}
+__decorate(
+  [n$3({ type: Boolean, reflect: true })],
+  FocusRing.prototype,
+  'visible',
+  void 0
+)
+__decorate(
+  [n$3({ type: Boolean, reflect: true })],
+  FocusRing.prototype,
+  'inward',
+  void 0
+)
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing')
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$a = i$4`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/267336424): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFocusRing = class MdFocusRing extends FocusRing {}
+MdFocusRing.styles = [styles$a]
+MdFocusRing = __decorate([t$3('md-focus-ring')], MdFocusRing)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A component for elevation.
+ */
+class Elevation extends s$1 {
+  connectedCallback() {
+    super.connectedCallback()
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
+  }
+  render() {
+    return x`<span class="shadow"></span>`
+  }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$9 = i$4`:host{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}/*# sourceMappingURL=elevation-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The `<md-elevation>` custom element with default styles.
+ *
+ * Elevation is the relative distance between two surfaces along the z-axis.
+ */
+let MdElevation = class MdElevation extends Elevation {}
+MdElevation.styles = [styles$9]
+MdElevation = __decorate([t$3('md-elevation')], MdElevation)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = {
+    ATTRIBUTE: 1,
+    CHILD: 2,
+    PROPERTY: 3,
+    BOOLEAN_ATTRIBUTE: 4,
+    EVENT: 5,
+    ELEMENT: 6,
+  },
+  e$2 = t => (...e) => ({ _$litDirective$: t, values: e })
+class i$1 {
+  constructor(t) {}
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AT(t, e, i) {
+    ;(this._$Ct = t), (this._$AM = e), (this._$Ci = i)
+  }
+  _$AS(t, e) {
+    return this.update(t, e)
+  }
+  update(t, e) {
+    return this.render(...e)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e$1 = e$2(
+  class extends i$1 {
+    constructor(t$1) {
+      if (
+        (super(t$1),
+        t$1.type !== t.ATTRIBUTE ||
+          'class' !== t$1.name ||
+          t$1.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.it) {
+        ;(this.it = new Set()),
+          void 0 !== s.strings &&
+            (this.st = new Set(
+              s.strings
+                .join(' ')
+                .split(/\s/)
+                .filter(t => '' !== t)
+            ))
+        for (const t in i) i[t] && !this.st?.has(t) && this.it.add(t)
+        return this.render(i)
+      }
+      const r = s.element.classList
+      for (const t of this.it) t in i || (r.remove(t), this.it.delete(t))
+      for (const t in i) {
+        const s = !!i[t]
+        s === this.it.has(t) ||
+          this.st?.has(t) ||
+          (s ? (r.add(t), this.it.add(t)) : (r.remove(t), this.it.delete(t)))
+      }
+      return w
+    }
+  }
+)
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const n$1 = 'important',
+  i = ' !' + n$1,
+  o$1 = e$2(
+    class extends i$1 {
+      constructor(t$1) {
+        if (
+          (super(t$1),
+          t$1.type !== t.ATTRIBUTE ||
+            'style' !== t$1.name ||
+            t$1.strings?.length > 2)
+        )
+          throw Error(
+            'The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.'
+          )
+      }
+      render(t) {
+        return Object.keys(t).reduce((e, r) => {
+          const s = t[r]
+          return null == s
+            ? e
+            : e +
+                `${(r = r.includes('-')
+                  ? r
+                  : r
+                      .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')
+                      .toLowerCase())}:${s};`
+        }, '')
+      }
+      update(e, [r]) {
+        const { style: s } = e.element
+        if (void 0 === this.ut)
+          return (this.ut = new Set(Object.keys(r))), this.render(r)
+        for (const t of this.ut)
+          null == r[t] &&
+            (this.ut.delete(t),
+            t.includes('-') ? s.removeProperty(t) : (s[t] = null))
+        for (const t in r) {
+          const e = r[t]
+          if (null != e) {
+            this.ut.add(t)
+            const r = 'string' == typeof e && e.endsWith(i)
+            t.includes('-') || r
+              ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n$1 : '')
+              : (s[t] = e)
+          }
+        }
+        return w
+      }
+    }
+  )
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+const ARIA_PROPERTIES = [
+  'ariaAtomic',
+  'ariaAutoComplete',
+  'ariaBusy',
+  'ariaChecked',
+  'ariaColCount',
+  'ariaColIndex',
+  'ariaColSpan',
+  'ariaCurrent',
+  'ariaDisabled',
+  'ariaExpanded',
+  'ariaHasPopup',
+  'ariaHidden',
+  'ariaInvalid',
+  'ariaKeyShortcuts',
+  'ariaLabel',
+  'ariaLevel',
+  'ariaLive',
+  'ariaModal',
+  'ariaMultiLine',
+  'ariaMultiSelectable',
+  'ariaOrientation',
+  'ariaPlaceholder',
+  'ariaPosInSet',
+  'ariaPressed',
+  'ariaReadOnly',
+  'ariaRequired',
+  'ariaRoleDescription',
+  'ariaRowCount',
+  'ariaRowIndex',
+  'ariaRowSpan',
+  'ariaSelected',
+  'ariaSetSize',
+  'ariaSort',
+  'ariaValueMax',
+  'ariaValueMin',
+  'ariaValueNow',
+  'ariaValueText',
+]
+/**
+ * Accessibility Object Model aria attributes.
+ */
+ARIA_PROPERTIES.map(ariaPropertyToAttribute)
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+function ariaPropertyToAttribute(property) {
+  return (
+    property
+      .replace('aria', 'aria-')
+      // IDREF attributes also include an "Element" or "Elements" suffix
+      .replace(/Elements?/g, '')
+      .toLowerCase()
+  )
+}
+/**
+ * Enables a host custom element to be the target for aria roles and attributes.
+ * Components should set the `elementInternals.role` property.
+ *
+ * By default, aria components are tab focusable. Provide a `focusable: false`
+ * option for components that should not be tab focusable, such as
+ * `role="listbox"`.
+ *
+ * This function will also polyfill aria `ElementInternals` properties for
+ * Firefox.
+ *
+ * @param ctor The `ReactiveElement` constructor to set up.
+ * @param options Options to configure the element's host aria.
+ */
+function setupHostAria(ctor, { focusable } = {}) {
+  if (focusable !== false) {
+    ctor.addInitializer(host => {
+      host.addController({
+        hostConnected() {
+          if (host.hasAttribute('tabindex')) {
+            return
+          }
+          host.tabIndex = 0
+        },
+      })
+    })
+  }
+  if ('role' in Element.prototype) {
+    return
+  }
+  // Polyfill reflective aria properties for Firefox
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    ctor.createProperty(ariaProperty, {
+      attribute: ariaPropertyToAttribute(ariaProperty),
+      reflect: true,
+    })
+  }
+  ctor.createProperty('role', { reflect: true })
+}
+/**
+ * Polyfills an element and its `ElementInternals` to support `ARIAMixin`
+ * properties on internals. This is needed for Firefox.
+ *
+ * `setupHostAria()` must be called for the element class.
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     setupHostAria(XButton);
+ *   }
+ *
+ *   private internals =
+ *       polyfillElementInternalsAria(this, this.attachInternals());
+ *
+ *   constructor() {
+ *     super();
+ *     this.internals.role = 'button';
+ *   }
+ * }
+ */
+function polyfillElementInternalsAria(host, internals) {
+  if (checkIfElementInternalsSupportsAria(internals)) {
+    return internals
+  }
+  if (!('role' in host)) {
+    throw new Error('Missing setupHostAria()')
+  }
+  let firstConnectedCallbacks = []
+  let hasBeenConnected = false
+  // Add support for Firefox, which has not yet implement ElementInternals aria
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    let internalAriaValue = null
+    Object.defineProperty(internals, ariaProperty, {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return internalAriaValue
+      },
+      set(value) {
+        const setValue = () => {
+          internalAriaValue = value
+          if (!hasBeenConnected) {
+            firstConnectedCallbacks.push({
+              property: ariaProperty,
+              callback: setValue,
+            })
+            return
+          }
+          // Dynamic lookup rather than hardcoding all properties.
+          // tslint:disable-next-line:no-dict-access-on-struct-type
+          host[ariaProperty] = value
         }
-      }
-    }
-    return null
+        setValue()
+      },
+    })
   }
-  /**
-   * Retrieves the the first non-disabled item of a given array of items. This
-   * the first item that is not disabled.
-   *
-   * @param items {Array<ListItem>} The items to search.
-   * @returns The first activatable item or `null` if none are activatable.
-   */
-  static getFirstActivatableItem(items) {
-    for (const item of items) {
-      if (!item.disabled) {
-        return item
+  let internalRoleValue = null
+  Object.defineProperty(internals, 'role', {
+    enumerable: true,
+    configurable: true,
+    get() {
+      return internalRoleValue
+    },
+    set(value) {
+      const setRole = () => {
+        internalRoleValue = value
+        if (!hasBeenConnected) {
+          firstConnectedCallbacks.push({
+            property: 'role',
+            callback: setRole,
+          })
+          return
+        }
+        if (value === null) {
+          host.removeAttribute('role')
+        } else {
+          host.setAttribute('role', value)
+        }
       }
-    }
-    return null
-  }
-  /**
-   * Retrieves the the last non-disabled item of a given array of items.
-   *
-   * @param items {Array<ListItem>} The items to search.
-   * @returns The last activatable item or `null` if none are activatable.
-   */
-  static getLastActivatableItem(items) {
-    for (let i = items.length - 1; i >= 0; i--) {
-      const item = items[i]
-      if (!item.disabled) {
-        return item
+      setRole()
+    },
+  })
+  host.addController({
+    hostConnected() {
+      if (hasBeenConnected) {
+        return
       }
-    }
-    return null
-  }
-  /**
-   * Retrieves the the next non-disabled item of a given array of items.
-   *
-   * @param items {Array<ListItem>} The items to search.
-   * @param index {{index: number}} The index to search from.
-   * @returns The next activatable item or `null` if none are activatable.
-   */
-  static getNextItem(items, index) {
-    for (let i = 1; i < items.length; i++) {
-      const nextIndex = (i + index) % items.length
-      const item = items[nextIndex]
-      if (!item.disabled) {
-        return item
+      hasBeenConnected = true
+      const propertiesSetByUser = new Set()
+      // See which properties were set by the user on host before we apply
+      // internals values as attributes to host. Needs to be done in another
+      // for loop because the callbacks set these attributes on host.
+      for (const { property } of firstConnectedCallbacks) {
+        const wasSetByUser =
+          host.getAttribute(ariaPropertyToAttribute(property)) !== null ||
+          // Dynamic lookup rather than hardcoding all properties.
+          // tslint:disable-next-line:no-dict-access-on-struct-type
+          host[property] !== undefined
+        if (wasSetByUser) {
+          propertiesSetByUser.add(property)
+        }
       }
-    }
-    return null
-  }
-  /**
-   * Retrieves the the previous non-disabled item of a given array of items.
-   *
-   * @param items {Array<ListItem>} The items to search.
-   * @param index {{index: number}} The index to search from.
-   * @returns The previous activatable item or `null` if none are activatable.
-   */
-  static getPrevItem(items, index) {
-    for (let i = 1; i < items.length; i++) {
-      const prevIndex = (index - i + items.length) % items.length
-      const item = items[prevIndex]
-      if (!item.disabled) {
-        return item
+      for (const { property, callback } of firstConnectedCallbacks) {
+        // If the user has set the attribute or property, do not override the
+        // user's value
+        if (propertiesSetByUser.has(property)) {
+          continue
+        }
+        callback()
       }
-    }
-    return null
-  }
+      // Remove strong callback references
+      firstConnectedCallbacks = []
+    },
+  })
+  return internals
+}
+// Separate function so that typescript doesn't complain about internals being
+// "never".
+function checkIfElementInternalsSupportsAria(internals) {
+  return 'role' in internals
 }
-List.shadowRootOptions = { mode: 'open', delegatesFocus: true }
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  List.prototype,
-  'ariaLabel',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({
-      type: String,
-      attribute: 'data-aria-activedescendant',
-      noAccessor: true,
-    }),
-    __metadata('design:type', String),
-  ],
-  List.prototype,
-  'ariaActivedescendant',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    // tslint:disable-next-line
-    e$8({ type: String, attribute: 'data-role', noAccessor: true }),
-    // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-    __metadata('design:type', String),
-  ],
-  List.prototype,
-  'role',
-  void 0
-)
-__decorate(
-  [e$8({ type: Number }), __metadata('design:type', Number)],
-  List.prototype,
-  'listTabIndex',
-  void 0
-)
-__decorate(
-  [i$2('.md3-list'), __metadata('design:type', HTMLElement)],
-  List.prototype,
-  'listRoot',
-  void 0
-)
-__decorate(
-  [
-    l$2({ flatten: true, selector: '[md-list-item]' }),
-    __metadata('design:type', Array),
-  ],
-  List.prototype,
-  'items',
-  void 0
-)
 
 /**
  * @license
- * Copyright 2022 Google LLC
+ * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$b = i$5`:host{--_container-color: var(--md-list-container-color, var(--md-sys-color-surface, #fffbfe));color:unset}.md3-list{background-color:var(--_container-color);display:block;list-style-type:none;margin:0;min-width:300px;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
-`
-
 /**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
  */
+const EASING = {
+  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
+  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
+  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
+  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
+  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
+  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
+}
 /**
- * @summary Lists are continuous, vertical indexes of text or images.
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
  *
- * @description
- * Lists consist of one or more list items, and can contain actions represented
- * by icons and text. List items come in three sizes: one-line, two-line, and
- * three-line.
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
  *
- * __Takeaways:__
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
  *
- * - Lists should be sorted in logical ways that make content easy to scan, such
- *   as alphabetical, numerical, chronological, or by user preference.
- * - Lists present content in a way that makes it easy to identify a specific
- *   item in a collection and act on it.
- * - Lists should present icons, text, and actions in a consistent format.
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
  *
- * @final
- * @suppress {visibility}
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
  */
-let MdList = class MdList extends List {}
-MdList.styles = [styles$b]
-MdList = __decorate([e$9('md-list')], MdList)
+function createAnimationSignal() {
+  // The current animation's AbortController
+  let animationAbortController = null
+  return {
+    start() {
+      // Tell the previous animation to cancel.
+      animationAbortController?.abort()
+      // Set up a new AbortController for the current animation.
+      animationAbortController = new AbortController()
+      // Provide the AbortSignal so that the caller can check aborted status
+      // and add listeners.
+      return animationAbortController.signal
+    },
+    finish() {
+      animationAbortController = null
+    },
+  }
+}
 
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * @summary An accessible, themable ring designed to be shown on
- * `:focus-visible`.
+ * Activates the first non-disabled item of a given array of items.
  *
- * @description
- * An accessible, themable ring designed to be shown on focus-visible.
- * Focus ring is designed to be controlled by the `strong-focus` module in the
- * same package.
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     first item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ */
+function activateFirstItem(items, isActivatable = isItemNotDisabled) {
+  // NOTE: These selector functions are static and not on the instance such
+  // that multiple operations can be chained and we do not have to re-query
+  // the DOM
+  const firstItem = getFirstActivatableItem(items, isActivatable)
+  if (firstItem) {
+    firstItem.tabIndex = 0
+    firstItem.focus()
+  }
+  return firstItem
+}
+/**
+ * Activates the last non-disabled item of a given array of items.
  *
- * In most cases, `visible` should be set to
- * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`
- * documentation in the `strong-focus` module), and `false` on `blur`.
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     last item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
  */
-class FocusRing extends s$4 {
-  constructor() {
-    super(...arguments)
-    /**
-     * Makes the focus ring visible.
-     */
-    this.visible = false
+function activateLastItem(items, isActivatable = isItemNotDisabled) {
+  const lastItem = getLastActivatableItem(items, isActivatable)
+  if (lastItem) {
+    lastItem.tabIndex = 0
+    lastItem.focus()
   }
+  return lastItem
 }
-__decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
-  FocusRing.prototype,
-  'visible',
-  void 0
-)
-
 /**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
  */
-const styles$a = i$5`:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px));--_shape-start-end: var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px));--_shape-end-end: var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px));--_shape-end-start: var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px));--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;position:absolute;box-sizing:border-box;pointer-events:none;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}:host([visible]){display:flex}/*# sourceMappingURL=focus-ring-styles.css.map */
-`
-
+function getActiveItem(items, isActivatable = isItemNotDisabled) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.tabIndex === 0 && isActivatable(item)) {
+      return {
+        item,
+        index: i,
+      }
+    }
+  }
+  return null
+}
 /**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Retrieves the first non-disabled item of a given array of items. This
+ * the first item that is not disabled.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
  */
+function getFirstActivatableItem(items, isActivatable = isItemNotDisabled) {
+  for (const item of items) {
+    if (isActivatable(item)) {
+      return item
+    }
+  }
+  return null
+}
 /**
- * @soyCompatible
- * @final
- * @suppress {visibility}
+ * Retrieves the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
  */
-let MdFocusRing = class MdFocusRing extends FocusRing {}
-MdFocusRing.styles = [styles$a]
-MdFocusRing = __decorate([e$9('md-focus-ring')], MdFocusRing)
-
+function getLastActivatableItem(items, isActivatable = isItemNotDisabled) {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i]
+    if (isActivatable(item)) {
+      return item
+    }
+  }
+  return null
+}
 /**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Retrieves the next non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The next activatable item or `null` if none are activatable.
  */
+function getNextItem(items, index, isActivatable = isItemNotDisabled) {
+  for (let i = 1; i < items.length; i++) {
+    const nextIndex = (i + index) % items.length
+    const item = items[nextIndex]
+    if (isActivatable(item)) {
+      return item
+    }
+  }
+  return items[index] ? items[index] : null
+}
 /**
- * A component for elevation.
+ * Retrieves the previous non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The previous activatable item or `null` if none are activatable.
  */
-class Elevation extends s$4 {
-  constructor() {
-    super(...arguments)
-    /**
-     * Whether or not the elevation level should display a shadow.
-     */
-    this.shadow = false
-    /**
-     * Whether or not the elevation level should display a surface tint color.
-     */
-    this.surface = false
-  }
-  render() {
-    return y`
-       <span class="surface"></span>
-       <span class="shadow"></span>
-     `
+function getPrevItem(items, index, isActivatable = isItemNotDisabled) {
+  for (let i = 1; i < items.length; i++) {
+    const prevIndex = (index - i + items.length) % items.length
+    const item = items[prevIndex]
+    if (isActivatable(item)) {
+      return item
+    }
   }
+  return items[index] ? items[index] : null
 }
-__decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
-  Elevation.prototype,
-  'shadow',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
-  Elevation.prototype,
-  'surface',
-  void 0
-)
-
 /**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
  */
-const styles$9 = i$5`:host{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:"";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{opacity:.15;box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */
-`
-
+function activateNextItem(
+  items,
+  activeItemRecord,
+  isActivatable = isItemNotDisabled
+) {
+  if (activeItemRecord) {
+    const next = getNextItem(items, activeItemRecord.index, isActivatable)
+    if (next) {
+      next.tabIndex = 0
+      next.focus()
+    }
+    return next
+  } else {
+    return activateFirstItem(items, isActivatable)
+  }
+}
 /**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
  */
+function activatePreviousItem(
+  items,
+  activeItemRecord,
+  isActivatable = isItemNotDisabled
+) {
+  if (activeItemRecord) {
+    const prev = getPrevItem(items, activeItemRecord.index, isActivatable)
+    if (prev) {
+      prev.tabIndex = 0
+      prev.focus()
+    }
+    return prev
+  } else {
+    return activateLastItem(items, isActivatable)
+  }
+}
 /**
- * The `<md-elevation>` custom element with default styles.
+ * The default `isActivatable` function, which checks if an item is not
+ * disabled.
  *
- * Elevation is the relative distance between two surfaces along the z-axis.
+ * @param item The item to check.
+ * @return true if `item.disabled` is `false.
  */
-let MdElevation = class MdElevation extends Elevation {}
-MdElevation.styles = [styles$9]
-MdElevation = __decorate([e$9('md-elevation')], MdElevation)
+function isItemNotDisabled(item) {
+  return !item.disabled
+}
 
 /**
  * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const i = e$1(
-  class extends i$1 {
-    constructor(t$1) {
-      var e
-      if (
-        (super(t$1),
-        t$1.type !== t.ATTRIBUTE ||
-          'style' !== t$1.name ||
-          (null === (e = t$1.strings) || void 0 === e ? void 0 : e.length) > 2)
-      )
-        throw Error(
-          'The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.'
-        )
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// TODO: move this file to List and make List use this
+/**
+ * Default keys that trigger navigation.
+ */
+// tslint:disable:enforce-name-casing Following Enum style
+const NavigableKeys = {
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowUp: 'ArrowUp',
+  ArrowRight: 'ArrowRight',
+  Home: 'Home',
+  End: 'End',
+}
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+class ListController {
+  constructor(config) {
+    /**
+     * Handles keyboard navigation. Should be bound to the node that will act as
+     * the List.
+     */
+    this.handleKeydown = event => {
+      const key = event.key
+      if (event.defaultPrevented || !this.isNavigableKey(key)) {
+        return
+      }
+      // do not use this.items directly in upcoming calculations so we don't
+      // re-query the DOM unnecessarily
+      const items = this.items
+      if (!items.length) {
+        return
+      }
+      const activeItemRecord = getActiveItem(items, this.isActivatable)
+      if (activeItemRecord) {
+        activeItemRecord.item.tabIndex = -1
+      }
+      event.preventDefault()
+      const isRtl = this.isRtl()
+      const inlinePrevious = isRtl
+        ? NavigableKeys.ArrowRight
+        : NavigableKeys.ArrowLeft
+      const inlineNext = isRtl
+        ? NavigableKeys.ArrowLeft
+        : NavigableKeys.ArrowRight
+      switch (key) {
+        // Activate the next item
+        case NavigableKeys.ArrowDown:
+        case inlineNext:
+          activateNextItem(items, activeItemRecord, this.isActivatable)
+          break
+        // Activate the previous item
+        case NavigableKeys.ArrowUp:
+        case inlinePrevious:
+          activatePreviousItem(items, activeItemRecord, this.isActivatable)
+          break
+        // Activate the first item
+        case NavigableKeys.Home:
+          activateFirstItem(items, this.isActivatable)
+          break
+        // Activate the last item
+        case NavigableKeys.End:
+          activateLastItem(items, this.isActivatable)
+          break
+      }
     }
-    render(t) {
-      return Object.keys(t).reduce((e, r) => {
-        const s = t[r]
-        return null == s
-          ? e
-          : e +
-              `${(r = r
-                .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')
-                .toLowerCase())}:${s};`
-      }, '')
+    /**
+     * Listener to be bound to the `deactivate-items` item event.
+     */
+    this.onDeactivateItems = () => {
+      const items = this.items
+      for (const item of items) {
+        this.deactivateItem(item)
+      }
+    }
+    /**
+     * Listener to be bound to the `request-activation` item event..
+     */
+    this.onRequestActivation = event => {
+      this.onDeactivateItems()
+      const target = event.target
+      this.activateItem(target)
+      target.focus()
+    }
+    /**
+     * Listener to be bound to the `slotchange` event for the slot that renders
+     * the items.
+     */
+    this.onSlotchange = () => {
+      const items = this.items
+      // Whether we have encountered an item that has been activated
+      let encounteredActivated = false
+      for (const item of items) {
+        const isActivated = !item.disabled && item.tabIndex > -1
+        if (isActivated && !encounteredActivated) {
+          encounteredActivated = true
+          item.tabIndex = 0
+          continue
+        }
+        // Deactivate the rest including disabled
+        item.tabIndex = -1
+      }
+      if (encounteredActivated) {
+        return
+      }
+      const firstActivatableItem = getFirstActivatableItem(
+        items,
+        this.isActivatable
+      )
+      if (!firstActivatableItem) {
+        return
+      }
+      firstActivatableItem.tabIndex = 0
     }
-    update(e, [r]) {
-      const { style: s } = e.element
-      if (void 0 === this.vt) {
-        this.vt = new Set()
-        for (const t in r) this.vt.add(t)
-        return this.render(r)
+    const {
+      isItem,
+      getPossibleItems,
+      isRtl,
+      deactivateItem,
+      activateItem,
+      isNavigableKey,
+      isActivatable,
+    } = config
+    this.isItem = isItem
+    this.getPossibleItems = getPossibleItems
+    this.isRtl = isRtl
+    this.deactivateItem = deactivateItem
+    this.activateItem = activateItem
+    this.isNavigableKey = isNavigableKey
+    this.isActivatable = isActivatable
+  }
+  /**
+   * The items being managed by the list. Additionally, attempts to see if the
+   * object has a sub-item in the `.item` property.
+   */
+  get items() {
+    const maybeItems = this.getPossibleItems()
+    const items = []
+    for (const itemOrParent of maybeItems) {
+      const isItem = this.isItem(itemOrParent)
+      // if the item is a list item, add it to the list of items
+      if (isItem) {
+        items.push(itemOrParent)
+        continue
       }
-      this.vt.forEach(t => {
-        null == r[t] &&
-          (this.vt.delete(t),
-          t.includes('-') ? s.removeProperty(t) : (s[t] = ''))
-      })
-      for (const t in r) {
-        const e = r[t]
-        null != e &&
-          (this.vt.add(t), t.includes('-') ? s.setProperty(t, e) : (s[t] = e))
+      // If the item exposes an `item` property check if it is a list item.
+      const subItem = itemOrParent.item
+      if (subItem && this.isItem(subItem)) {
+        items.push(subItem)
       }
-      return x
     }
+    return items
   }
-)
+  /**
+   * Activates the next item in the list. If at the end of the list, the first
+   * item will be activated.
+   *
+   * @return The activated list item or `null` if there are no items.
+   */
+  activateNextItem() {
+    const items = this.items
+    const activeItemRecord = getActiveItem(items, this.isActivatable)
+    if (activeItemRecord) {
+      activeItemRecord.item.tabIndex = -1
+    }
+    return activateNextItem(items, activeItemRecord, this.isActivatable)
+  }
+  /**
+   * Activates the previous item in the list. If at the start of the list, the
+   * last item will be activated.
+   *
+   * @return The activated list item or `null` if there are no items.
+   */
+  activatePreviousItem() {
+    const items = this.items
+    const activeItemRecord = getActiveItem(items, this.isActivatable)
+    if (activeItemRecord) {
+      activeItemRecord.item.tabIndex = -1
+    }
+    return activatePreviousItem(items, activeItemRecord, this.isActivatable)
+  }
+}
 
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-class FocusGlobal {
-  constructor() {
-    this.visible = false
-  }
-  setVisible(visible) {
-    this.visible = visible
-  }
+/**
+ * Creates an event that closes any parent menus.
+ */
+function createCloseMenuEvent(initiator, reason) {
+  return new CustomEvent('close-menu', {
+    bubbles: true,
+    composed: true,
+    detail: { initiator, reason, itemPath: [initiator] },
+  })
 }
 /**
- * This object can be overwritten by the `setup()` function to use a different
- * focus coordination object.
+ * Creates a default close menu event used by md-menu.
  */
-let focusObject = new FocusGlobal()
+const createDefaultCloseMenuEvent = createCloseMenuEvent
 /**
- * Set of keyboard event codes that correspond to keyboard navigation
+ * Keys that are used for selection in menus.
  */
-const KEYBOARD_NAVIGATION_KEYS = new Set([
-  'Tab',
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowUp',
-  'ArrowDown',
-])
-function keydownHandler(e) {
-  if (KEYBOARD_NAVIGATION_KEYS.has(e.key)) {
-    focusObject.setVisible(true)
-  }
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const SelectionKey = {
+  SPACE: 'Space',
+  ENTER: 'Enter',
 }
 /**
- * Set up integration with alternate global focus tracking object
- *
- * @param focusGlobal A global focus object to coordinate between multiple
- *     systems
- * @param enableKeydownHandler Set to true to let StrongFocusService listen for
- *     keyboard navigation
+ * Default close `Reason` kind values.
  */
-function setup(focusGlobal, enableKeydownHandler = false) {
-  focusObject = focusGlobal
-  if (enableKeydownHandler) {
-    window.addEventListener('keydown', keydownHandler)
-  } else {
-    window.removeEventListener('keydown', keydownHandler)
-  }
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const CloseReason = {
+  CLICK_SELECTION: 'click-selection',
+  KEYDOWN: 'keydown',
 }
 /**
- * Returns `true` if the component should show strong focus.
- *
- * By default, strong focus is shown only on keyboard navigation, and not on
- * pointer interaction.
+ * Keys that can close menus.
  */
-function shouldShowStrongFocus() {
-  return focusObject.visible
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const KeydownCloseKey = {
+  ESCAPE: 'Escape',
+  SPACE: SelectionKey.SPACE,
+  ENTER: SelectionKey.ENTER,
 }
 /**
- * Components should call this when a user interacts with a component with a
- * pointing device.
+ * Determines whether the given key code is a key code that should close the
+ * menu.
  *
- * By default, this will prevent the strong focus from being shown.
+ * @param code The KeyboardEvent code to check.
+ * @return Whether or not the key code is in the predetermined list to close the
+ * menu.
  */
-function pointerPress() {
-  focusObject.setVisible(false)
+function isClosableKey(code) {
+  return Object.values(KeydownCloseKey).some(value => value === code)
 }
-setup(focusObject, true)
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
 /**
- * Easing functions to use for web animations.
+ * Determines whether a target element is contained inside another element's
+ * composed tree.
  *
- * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
- *
- * TODO(b/241113345): replace with tokens
+ * @param target The potential contained element.
+ * @param container The potential containing element of the target.
+ * @returns Whether the target element is contained inside the container's
+ * composed subtree
  */
-const EASING = {
-  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
-  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
-  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
-  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
-  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
-  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
+function isElementInSubtree(target, container) {
+  // Dispatch a composed, bubbling event to check its path to see if the
+  // newly-focused element is contained in container's subtree
+  const focusEv = new Event('md-contains', { bubbles: true, composed: true })
+  let composedPath = []
+  const listener = ev => {
+    composedPath = ev.composedPath()
+  }
+  container.addEventListener('md-contains', listener)
+  target.dispatchEvent(focusEv)
+  container.removeEventListener('md-contains', listener)
+  const isContained = composedPath.length > 0
+  return isContained
 }
 /**
- * Creates an `AnimationSignal` that can be used to cancel a previous task.
- *
- * @example
- * class MyClass {
- *   private labelAnimationSignal = createAnimationSignal();
- *
- *   private async animateLabel() {
- *     // Start of the task. Previous tasks will be canceled.
- *     const signal = this.labelAnimationSignal.start();
- *
- *     // Do async work...
- *     if (signal.aborted) {
- *       // Use AbortSignal to check if a request was made to abort after some
- *       // asynchronous work.
- *       return;
- *     }
- *
- *     const animation = this.animate(...);
- *     // Add event listeners to be notified when the task should be canceled.
- *     signal.addEventListener('abort', () => {
- *       animation.cancel();
- *     });
- *
- *     animation.addEventListener('finish', () => {
- *       // Tell the signal that the current task is finished.
- *       this.labelAnimationSignal.finish();
- *     });
- *   }
- * }
- *
- * @return An `AnimationSignal`.
+ * Element to focus on when menu is first opened.
  */
-function createAnimationSignal() {
-  // The current animation's AbortController
-  let animationAbortController = null
-  return {
-    start() {
-      // Tell the previous animation to cancel.
-      animationAbortController?.abort()
-      // Set up a new AbortController for the current animation.
-      animationAbortController = new AbortController()
-      // Provide the AbortSignal so that the caller can check aborted status
-      // and add listeners.
-      return animationAbortController.signal
-    },
-    finish() {
-      animationAbortController = null
-    },
-  }
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const FocusState = {
+  NONE: 'none',
+  LIST_ROOT: 'list-root',
+  FIRST_ITEM: 'first-item',
+  LAST_ITEM: 'last-item',
 }
 
 /**
@@ -5234,6 +6552,16 @@ function createAnimationSignal() {
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+/**
+ * An enum of supported Menu corners
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const Corner = {
+  END_START: 'end-start',
+  END_END: 'end-end',
+  START_START: 'start-start',
+  START_END: 'start-end',
+}
 /**
  * Given a surface, an anchor, corners, and some options, this surface will
  * calculate the position of a surface to align the two given corners and keep
@@ -5276,15 +6604,20 @@ class SurfacePositionController {
       anchorEl,
       anchorCorner: anchorCornerRaw,
       surfaceCorner: surfaceCornerRaw,
-      isTopLayer: topLayerRaw,
+      positioning,
       xOffset,
       yOffset,
+      repositionStrategy,
     } = this.getProperties()
-    const anchorCorner = anchorCornerRaw.toUpperCase().trim()
-    const surfaceCorner = surfaceCornerRaw.toUpperCase().trim()
+    const anchorCorner = anchorCornerRaw.toLowerCase().trim()
+    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim()
     if (!surfaceEl || !anchorEl) {
       return
     }
+    // Store these before we potentially resize the window with the next set of
+    // lines
+    const windowInnerWidth = window.innerWidth
+    const windowInnerHeight = window.innerHeight
     // Paint the surface transparently so that we can get the position and the
     // rect info of the surface.
     this.surfaceStylesInternal = {
@@ -5294,22 +6627,16 @@ class SurfacePositionController {
     // Wait for it to be visible.
     this.host.requestUpdate()
     await this.host.updateComplete
-    const surfaceRect = surfaceEl.getBoundingClientRect()
-    const anchorRect = anchorEl.getBoundingClientRect()
-    const [surfaceBlock, surfaceInline] = surfaceCorner.split('_')
-    const [anchorBlock, anchorInline] = anchorCorner.split('_')
-    // We use number booleans to multiply values rather than `if` / ternary
-    // statements because it _heavily_ cuts down on nesting and readability
-    const isTopLayer = topLayerRaw ? 1 : 0
+    const surfaceRect = surfaceEl.getSurfacePositionClientRect
+      ? surfaceEl.getSurfacePositionClientRect()
+      : surfaceEl.getBoundingClientRect()
+    const anchorRect = anchorEl.getSurfacePositionClientRect
+      ? anchorEl.getSurfacePositionClientRect()
+      : anchorEl.getBoundingClientRect()
+    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-')
+    const [anchorBlock, anchorInline] = anchorCorner.split('-')
     // LTR depends on the direction of the SURFACE not the anchor.
-    const isLTR = getComputedStyle(surfaceEl).direction === 'ltr' ? 1 : 0
-    const isRTL = isLTR ? 0 : 1
-    const isSurfaceInlineStart = surfaceInline === 'START' ? 1 : 0
-    const isSurfaceInlineEnd = surfaceInline === 'END' ? 1 : 0
-    const isSurfaceBlockStart = surfaceBlock === 'START' ? 1 : 0
-    const isSurfaceBlockEnd = surfaceBlock === 'END' ? 1 : 0
-    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0
-    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0
+    const isLTR = getComputedStyle(surfaceEl).direction === 'ltr'
     /*
      * A diagram that helps describe some of the variables used in the following
      * calculations.
@@ -5341,64 +6668,214 @@ class SurfacePositionController {
      *             └────────────────────────┐▼───┼┘
      *                                      └────┘
      */
+    // Calculate the block positioning properties
+    let {
+      blockInset,
+      blockOutOfBoundsCorrection,
+      surfaceBlockProperty,
+    } = this.calculateBlock({
+      surfaceRect,
+      anchorRect,
+      anchorBlock,
+      surfaceBlock,
+      yOffset,
+      positioning,
+      windowInnerHeight,
+    })
+    // If the surface should be out of bounds in the block direction, flip the
+    // surface and anchor corner block values and recalculate
+    if (blockOutOfBoundsCorrection) {
+      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start'
+      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start'
+      const flippedBlock = this.calculateBlock({
+        surfaceRect,
+        anchorRect,
+        anchorBlock: flippedAnchorBlock,
+        surfaceBlock: flippedSurfaceBlock,
+        yOffset,
+        positioning,
+        windowInnerHeight,
+      })
+      // In the case that the flipped verion would require less out of bounds
+      // correcting, use the flipped corner block values
+      if (
+        blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection
+      ) {
+        blockInset = flippedBlock.blockInset
+        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection
+        surfaceBlockProperty = flippedBlock.surfaceBlockProperty
+      }
+    }
+    // Calculate the inline positioning properties
+    let {
+      inlineInset,
+      inlineOutOfBoundsCorrection,
+      surfaceInlineProperty,
+    } = this.calculateInline({
+      surfaceRect,
+      anchorRect,
+      anchorInline,
+      surfaceInline,
+      xOffset,
+      positioning,
+      isLTR,
+      windowInnerWidth,
+    })
+    // If the surface should be out of bounds in the inline direction, flip the
+    // surface and anchor corner inline values and recalculate
+    if (inlineOutOfBoundsCorrection) {
+      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start'
+      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start'
+      const flippedInline = this.calculateInline({
+        surfaceRect,
+        anchorRect,
+        anchorInline: flippedAnchorInline,
+        surfaceInline: flippedSurfaceInline,
+        xOffset,
+        positioning,
+        isLTR,
+        windowInnerWidth,
+      })
+      // In the case that the flipped verion would require less out of bounds
+      // correcting, use the flipped corner inline values
+      if (
+        Math.abs(inlineOutOfBoundsCorrection) >
+        Math.abs(flippedInline.inlineOutOfBoundsCorrection)
+      ) {
+        inlineInset = flippedInline.inlineInset
+        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection
+        surfaceInlineProperty = flippedInline.surfaceInlineProperty
+      }
+    }
+    // If we are simply repositioning the surface back inside the viewport,
+    // subtract the out of bounds correction values from the positioning.
+    if (repositionStrategy === 'move') {
+      blockInset = blockInset - blockOutOfBoundsCorrection
+      inlineInset = inlineInset - inlineOutOfBoundsCorrection
+    }
+    this.surfaceStylesInternal = {
+      display: 'block',
+      opacity: '1',
+      [surfaceBlockProperty]: `${blockInset}px`,
+      [surfaceInlineProperty]: `${inlineInset}px`,
+    }
+    // In the case that we are resizing the surface to stay inside the viewport
+    // we need to set height and width on the surface.
+    if (repositionStrategy === 'resize') {
+      // Add a height property to the styles if there is block height correction
+      if (blockOutOfBoundsCorrection) {
+        this.surfaceStylesInternal['height'] = `${surfaceRect.height -
+          blockOutOfBoundsCorrection}px`
+      }
+      // Add a width property to the styles if there is block height correction
+      if (inlineOutOfBoundsCorrection) {
+        this.surfaceStylesInternal['width'] = `${surfaceRect.width -
+          inlineOutOfBoundsCorrection}px`
+      }
+    }
+    this.host.requestUpdate()
+  }
+  /**
+   * Calculates the css property, the inset, and the out of bounds correction
+   * for the surface in the block direction.
+   */
+  calculateBlock(config) {
+    const {
+      surfaceRect,
+      anchorRect,
+      anchorBlock,
+      surfaceBlock,
+      yOffset,
+      positioning,
+      windowInnerHeight,
+    } = config
+    // We use number booleans to multiply values rather than `if` / ternary
+    // statements because it _heavily_ cuts down on nesting and readability
+    const relativeToWindow = positioning === 'fixed' ? 1 : 0
+    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0
+    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0
+    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0
+    // Whether or not to apply the height of the anchor
+    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset
+    // The absolute block position of the anchor relative to window
+    const blockTopLayerOffset =
+      isSurfaceBlockStart * anchorRect.top +
+      isSurfaceBlockEnd * (windowInnerHeight - anchorRect.bottom)
+    // If the surface's block would be out of bounds of the window, move it back
+    // in
+    const blockOutOfBoundsCorrection = Math.abs(
+      Math.min(
+        0,
+        windowInnerHeight -
+          blockTopLayerOffset -
+          blockAnchorOffset -
+          surfaceRect.height
+      )
+    )
+    // The block logical value of the surface
+    const blockInset =
+      relativeToWindow * blockTopLayerOffset + blockAnchorOffset
+    const surfaceBlockProperty =
+      surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end'
+    return { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty }
+  }
+  /**
+   * Calculates the css property, the inset, and the out of bounds correction
+   * for the surface in the inline direction.
+   */
+  calculateInline(config) {
+    const {
+      isLTR: isLTRBool,
+      surfaceInline,
+      anchorInline,
+      anchorRect,
+      surfaceRect,
+      xOffset,
+      positioning,
+      windowInnerWidth,
+    } = config
+    // We use number booleans to multiply values rather than `if` / ternary
+    // statements because it _heavily_ cuts down on nesting and readability
+    const relativeToWindow = positioning === 'fixed' ? 1 : 0
+    const isLTR = isLTRBool ? 1 : 0
+    const isRTL = isLTRBool ? 0 : 1
+    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0
+    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0
+    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0
     // Whether or not to apply the width of the anchor
     const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset
     // The inline position of the anchor relative to window in LTR
     const inlineTopLayerOffsetLTR =
       isSurfaceInlineStart * anchorRect.left +
-      isSurfaceInlineEnd * (window.innerWidth - anchorRect.right)
+      isSurfaceInlineEnd * (windowInnerWidth - anchorRect.right)
     // The inline position of the anchor relative to window in RTL
     const inlineTopLayerOffsetRTL =
-      isSurfaceInlineStart * (window.innerWidth - anchorRect.right) +
+      isSurfaceInlineStart * (windowInnerWidth - anchorRect.right) +
       isSurfaceInlineEnd * anchorRect.left
     // The inline position of the anchor relative to window
     const inlineTopLayerOffset =
       isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL
     // If the surface's inline would be out of bounds of the window, move it
     // back in
-    const inlineOutOfBoundsCorrection = Math.min(
-      0,
-      window.innerWidth -
-        inlineTopLayerOffset -
-        inlineAnchorOffset -
-        surfaceRect.width
+    const inlineOutOfBoundsCorrection = Math.abs(
+      Math.min(
+        0,
+        windowInnerWidth -
+          inlineTopLayerOffset -
+          inlineAnchorOffset -
+          surfaceRect.width
+      )
     )
     // The inline logical value of the surface
-    const inline =
-      isTopLayer * inlineTopLayerOffset +
-      inlineAnchorOffset +
-      inlineOutOfBoundsCorrection
-    // Whether or not to apply the height of the anchor
-    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset
-    // The absolute block position of the anchor relative to window
-    const blockTopLayerOffset =
-      isSurfaceBlockStart * anchorRect.top +
-      isSurfaceBlockEnd * (window.innerHeight - anchorRect.bottom)
-    // If the surface's block would be out of bounds of the window, move it back
-    // in
-    const blockOutOfBoundsCorrection = Math.min(
-      0,
-      window.innerHeight -
-        blockTopLayerOffset -
-        blockAnchorOffset -
-        surfaceRect.height
-    )
-    // The block logical value of the surface
-    const block =
-      isTopLayer * blockTopLayerOffset +
-      blockAnchorOffset +
-      blockOutOfBoundsCorrection
-    const surfaceBlockProperty =
-      surfaceBlock === 'START' ? 'inset-block-start' : 'inset-block-end'
+    const inlineInset =
+      relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset
     const surfaceInlineProperty =
-      surfaceInline === 'START' ? 'inset-inline-start' : 'inset-inline-end'
-    this.surfaceStylesInternal = {
-      display: 'block',
-      opacity: '1',
-      [surfaceBlockProperty]: `${block}px`,
-      [surfaceInlineProperty]: `${inline}px`,
+      surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end'
+    return {
+      inlineInset,
+      inlineOutOfBoundsCorrection,
+      surfaceInlineProperty,
     }
-    this.host.requestUpdate()
   }
   hostUpdate() {
     this.onUpdate()
@@ -5456,10 +6933,14 @@ class SurfacePositionController {
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-// Indicies to access the TypeaheadRecord tuple
-const TYPEAHEAD_INDEX = 0
-const TYPEAHEAD_ITEM = 1
-const TYPEAHEAD_TEXT = 2
+/**
+ * Indicies to access the TypeaheadRecord tuple type.
+ */
+const TYPEAHEAD_RECORD = {
+  INDEX: 0,
+  ITEM: 1,
+  TEXT: 2,
+}
 /**
  * This controller listens to `keydown` events and searches the header text of
  * an array of `MenuItem`s with the corresponding entered keys within the buffer
@@ -5526,13 +7007,13 @@ class TypeaheadController {
      * Apply this listener to the element that will receive `keydown` events that
      * should trigger this controller.
      *
-     * @param e The native browser `KeyboardEvent` from the `keydown` event.
+     * @param event The native browser `KeyboardEvent` from the `keydown` event.
      */
-    this.onKeydown = e => {
+    this.onKeydown = event => {
       if (this.isTypingAhead) {
-        this.typeahead(e)
+        this.typeahead(event)
       } else {
-        this.beginTypeahead(e)
+        this.beginTypeahead(event)
       }
     }
     /**
@@ -5547,22 +7028,25 @@ class TypeaheadController {
   get items() {
     return this.getProperties().getItems()
   }
+  get active() {
+    return this.getProperties().active
+  }
   /**
    * Sets up typingahead
    */
-  beginTypeahead(e) {
+  beginTypeahead(event) {
+    if (!this.active) {
+      return
+    }
     // We don't want to typeahead if the _beginning_ of the typeahead is a menu
     // navigation, or a selection. We will handle "Space" only if it's in the
     // middle of a typeahead
     if (
-      e.code === 'Space' ||
-      e.code === 'Enter' ||
-      e.code.startsWith('Arrow') ||
-      e.code === 'Escape'
+      event.code === 'Space' ||
+      event.code === 'Enter' ||
+      event.code.startsWith('Arrow') ||
+      event.code === 'Escape'
     ) {
-      if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_ITEM].active = false
-      }
       return
     }
     this.isTypingAhead = true
@@ -5571,15 +7055,16 @@ class TypeaheadController {
     this.typeaheadRecords = this.items.map((el, index) => [
       index,
       el,
-      el.headline.trim().toLowerCase(),
+      el.typeaheadText.trim().toLowerCase(),
     ])
     this.lastActiveRecord =
-      this.typeaheadRecords.find(record => record[TYPEAHEAD_ITEM].active) ??
-      null
+      this.typeaheadRecords.find(
+        record => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0
+      ) ?? null
     if (this.lastActiveRecord) {
-      this.lastActiveRecord[TYPEAHEAD_ITEM].active = false
+      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
     }
-    this.typeahead(e)
+    this.typeahead(event)
   }
   /**
    * Performs the typeahead. Based on the normalized items and the current text
@@ -5617,33 +7102,34 @@ class TypeaheadController {
    *
    * activates Olive
    */
-  typeahead(e) {
+  typeahead(event) {
+    if (event.defaultPrevented) return
     clearTimeout(this.cancelTypeaheadTimeout)
     // Stop typingahead if one of the navigation or selection keys (except for
     // Space) are pressed
     if (
-      e.code === 'Enter' ||
-      e.code.startsWith('Arrow') ||
-      e.code === 'Escape'
+      event.code === 'Enter' ||
+      event.code.startsWith('Arrow') ||
+      event.code === 'Escape'
     ) {
       this.endTypeahead()
       if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_ITEM].active = false
+        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
       }
       return
     }
     // If Space is pressed, prevent it from selecting and closing the menu
-    if (e.code === 'Space') {
-      e.stopPropagation()
+    if (event.code === 'Space') {
+      event.preventDefault()
     }
     // Start up a new keystroke buffer timeout
     this.cancelTypeaheadTimeout = setTimeout(
       this.endTypeahead,
       this.getProperties().typeaheadBufferTime
     )
-    this.typaheadBuffer += e.key.toLowerCase()
+    this.typaheadBuffer += event.key.toLowerCase()
     const lastActiveIndex = this.lastActiveRecord
-      ? this.lastActiveRecord[TYPEAHEAD_INDEX]
+      ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]
       : -1
     const numRecords = this.typeaheadRecords.length
     /**
@@ -5670,15 +7156,16 @@ class TypeaheadController {
      */
     const rebaseIndexOnActive = record => {
       return (
-        (record[TYPEAHEAD_INDEX] + numRecords - lastActiveIndex) % numRecords
+        (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
+        numRecords
       )
     }
     // records filtered and sorted / rebased around the last active index
     const matchingRecords = this.typeaheadRecords
       .filter(
         record =>
-          !record[TYPEAHEAD_ITEM].disabled &&
-          record[TYPEAHEAD_TEXT].startsWith(this.typaheadBuffer)
+          !record[TYPEAHEAD_RECORD.ITEM].disabled &&
+          record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer)
       )
       .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b))
     // Just leave if there's nothing that matches. Native select will just
@@ -5687,7 +7174,7 @@ class TypeaheadController {
     if (matchingRecords.length === 0) {
       clearTimeout(this.cancelTypeaheadTimeout)
       if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_ITEM].active = false
+        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
       }
       this.endTypeahead()
       return
@@ -5702,19 +7189,35 @@ class TypeaheadController {
       nextRecord = matchingRecords[0]
     }
     if (this.lastActiveRecord) {
-      this.lastActiveRecord[TYPEAHEAD_ITEM].active = false
+      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
     }
     this.lastActiveRecord = nextRecord
-    nextRecord[TYPEAHEAD_ITEM].active = true
+    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0
+    nextRecord[TYPEAHEAD_RECORD.ITEM].focus()
     return
   }
 }
 
 /**
  * @license
- * Copyright 2022 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+/**
+ * The default value for the typeahead buffer time in Milliseconds.
+ */
+const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200
+const submenuNavKeys = new Set([
+  NavigableKeys.ArrowDown,
+  NavigableKeys.ArrowUp,
+  NavigableKeys.Home,
+  NavigableKeys.End,
+])
+const menuNavKeys = new Set([
+  NavigableKeys.ArrowLeft,
+  NavigableKeys.ArrowRight,
+  ...submenuNavKeys,
+])
 /**
  * Gets the currently focused element on the page.
  *
@@ -5723,38 +7226,75 @@ class TypeaheadController {
  * @return Returns the currently deeply focused element or `null` if none.
  */
 function getFocusedElement(activeDoc = document) {
-  const activeEl = activeDoc.activeElement
-  if (!activeEl) {
-    return null
-  }
-  if (activeEl.shadowRoot) {
-    return getFocusedElement(activeEl.shadowRoot) ?? activeEl
+  let activeEl = activeDoc.activeElement
+  // Check for activeElement in the case that an element with a shadow root host
+  // is currently focused.
+  while (activeEl && activeEl?.shadowRoot?.activeElement) {
+    activeEl = activeEl.shadowRoot.activeElement
   }
   return activeEl
 }
 /**
- * @fires opening Fired before the opening animation begins (not fired on quick)
+ * @fires opening Fired before the opening animation begins
  * @fires opened Fired once the menu is open, after any animations
- * @fires closing Fired before the closing animation begins (not fired on quick)
+ * @fires closing Fired before the closing animation begins
  * @fires closed Fired once the menu is closed, after any animations
  */
-class Menu extends s$4 {
+class Menu extends s$1 {
+  /**
+   * Whether the menu is animating upwards or downwards when opening. This is
+   * helpful for calculating some animation calculations.
+   */
+  get openDirection() {
+    const menuCornerBlock = this.menuCorner.split('-')[0]
+    return menuCornerBlock === 'start' ? 'DOWN' : 'UP'
+  }
+  /**
+   * The element which the menu should align to. If `anchor` is set to a
+   * non-empty idref string, then `anchorEl` will resolve to the element with
+   * the given id in the same root node. Otherwise, `null`.
+   */
+  get anchorElement() {
+    if (this.anchor) {
+      return this.getRootNode().querySelector(`#${this.anchor}`)
+    }
+    return this.currentAnchorElement
+  }
+  set anchorElement(element) {
+    this.currentAnchorElement = element
+    this.requestUpdate('anchorElement')
+  }
   constructor() {
-    super(...arguments)
+    super()
     /**
-     * The element in which the menu should align to.
+     * The ID of the element in the same root node in which the menu should align
+     * to. Overrides setting `anchorElement = elementReference`.
+     *
+     * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
+     * to an HTMLElement in order for menu to open.
      */
-    this.anchor = null
+    this.anchor = ''
     /**
-     * Makes the element use `position:fixed` instead of `position:absolute`. In
-     * most cases, the menu should position itself above most other
-     * `position:absolute` or `position:fixed` elements when placed inside of
-     * them. e.g. using a menu inside of an `md-dialog`.
+     * Whether the positioning algorithim should calculate relative to the parent
+     * of the anchor element (absolute) or relative to the window (fixed).
+     *
+     * Examples for `position = 'fixed'`:
+     *
+     * - If there is no `position:relative` in the given parent tree and the
+     *   surface is `position:absolute`
+     * - If the surface is `position:fixed`
+     * - If the surface is in the "top layer"
+     * - The anchor and the surface do not share a common `position:relative`
+     *   ancestor
+     *
+     * When using positioning = fixed, in most cases, the menu should position
+     * itself above most other `position:absolute` or `position:fixed` elements
+     * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
      *
      * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
      * the window instead.
      */
-    this.fixed = false
+    this.positioning = 'absolute'
     /**
      * Skips the opening and closing animations.
      */
@@ -5788,29 +7328,41 @@ class Menu extends s$4 {
      * e.g. positive -> down, negative -> up
      */
     this.yOffset = 0
-    /**
-     * The tabindex of the underlying list element.
-     */
-    this.listTabIndex = 0
     /**
      * The max time between the keystrokes of the typeahead menu behavior before
      * it clears the typeahead buffer.
      */
-    this.typeaheadBufferTime = 200
+    this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME
     /**
      * The corner of the anchor which to align the menu in the standard logical
-     * property style of <block>_<inline>.
+     * property style of <block>-<inline> e.g. `'end-start'`.
+     *
+     * NOTE: This value may not be respected by the menu positioning algorithm
+     * if the menu would render outisde the viewport.
      */
-    this.anchorCorner = 'END_START'
+    this.anchorCorner = Corner.END_START
     /**
      * The corner of the menu which to align the anchor in the standard logical
-     * property style of <block>_<inline>.
+     * property style of <block>-<inline> e.g. `'start-start'`.
+     *
+     * NOTE: This value may not be respected by the menu positioning algorithm
+     * if the menu would render outisde the viewport.
      */
-    this.menuCorner = 'START_START'
+    this.menuCorner = Corner.START_START
     /**
-     * Keeps the user clicks outside the menu
+     * Keeps the user clicks outside the menu.
+     *
+     * NOTE: clicking outside may still cause focusout to close the menu so see
+     * `stayOpenOnFocusout`.
      */
     this.stayOpenOnOutsideClick = false
+    /**
+     * Keeps the menu open when focus leaves the menu's composed subtree.
+     *
+     * NOTE: Focusout behavior will stop propagation of the focusout event. Set
+     * this property to true to opt-out of menu's focuout handling altogether.
+     */
+    this.stayOpenOnFocusout = false
     /**
      * After closing, does not restore focus to the last focused element before
      * the menu was opened.
@@ -5818,9 +7370,57 @@ class Menu extends s$4 {
     this.skipRestoreFocus = false
     /**
      * The element that should be focused by default once opened.
+     *
+     * NOTE: When setting default focus to 'LIST_ROOT', remember to change
+     * `tabindex` to `0` and change md-menu's display to something other than
+     * `display: contents` when necessary.
+     */
+    this.defaultFocus = FocusState.FIRST_ITEM
+    this.typeaheadActive = true
+    /**
+     * Whether or not the current menu is a submenu and should not handle specific
+     * navigation keys.
+     *
+     * @exports
+     */
+    this.isSubmenu = false
+    /**
+     * The event path of the last window pointerdown event.
      */
-    this.defaultFocus = 'LIST_ROOT'
+    this.pointerPath = []
     this.openCloseAnimationSignal = createAnimationSignal()
+    this.listController = new ListController({
+      isItem: maybeItem => {
+        return maybeItem.hasAttribute('md-menu-item')
+      },
+      getPossibleItems: () => this.slotItems,
+      isRtl: () => getComputedStyle(this).direction === 'rtl',
+      deactivateItem: item => {
+        item.selected = false
+        item.tabIndex = -1
+      },
+      activateItem: item => {
+        item.selected = true
+        item.tabIndex = 0
+      },
+      isNavigableKey: key => {
+        if (!this.isSubmenu) {
+          return menuNavKeys.has(key)
+        }
+        const isRtl = getComputedStyle(this).direction === 'rtl'
+        // we want md-submenu to handle the submenu's left/right arrow exit
+        // key so it can close the menu instead of navigate the list.
+        // Therefore we need to include all keys but left/right arrow close
+        // key
+        const arrowOpen = isRtl
+          ? NavigableKeys.ArrowLeft
+          : NavigableKeys.ArrowRight
+        if (key === arrowOpen) {
+          return true
+        }
+        return submenuNavKeys.has(key)
+      },
+    })
     /**
      * The element that was focused before the menu opened.
      */
@@ -5831,64 +7431,120 @@ class Menu extends s$4 {
     this.typeaheadController = new TypeaheadController(() => {
       return {
         getItems: () => this.items,
-        typeaheadBufferTime: this.typeaheadBufferTime,
+        typeaheadBufferTime: this.typeaheadDelay,
+        active: this.typeaheadActive,
       }
     })
+    this.currentAnchorElement = null
+    this.internals = polyfillElementInternalsAria(
+      this,
+      this /* needed for closure */.attachInternals()
+    )
     /**
-     * Handles positioning the surface and aligning it to the anchor.
+     * Handles positioning the surface and aligning it to the anchor as well as
+     * keeping it in the viewport.
      */
     this.menuPositionController = new SurfacePositionController(this, () => {
       return {
         anchorCorner: this.anchorCorner,
         surfaceCorner: this.menuCorner,
         surfaceEl: this.surfaceEl,
-        anchorEl: this.anchor,
-        isTopLayer: this.fixed,
+        anchorEl: this.anchorElement,
+        positioning: this.positioning,
         isOpen: this.open,
         xOffset: this.xOffset,
         yOffset: this.yOffset,
         onOpen: this.onOpened,
         beforeClose: this.beforeClose,
         onClose: this.onClosed,
+        // We can't resize components that have overflow like menus with
+        // submenus because the overflow-y will show menu items / content
+        // outside the bounds of the menu. (to be fixed w/ popover API)
+        repositionStrategy: this.hasOverflow ? 'move' : 'resize',
       }
     })
+    this.handleFocusout = async event => {
+      const anchorEl = this.anchorElement
+      // Do not close if we focused out by clicking on the anchor element. We
+      // can't assume anchor buttons can be the related target because of iOS does
+      // not focus buttons.
+      if (
+        this.stayOpenOnFocusout ||
+        !this.open ||
+        this.pointerPath.includes(anchorEl)
+      ) {
+        return
+      }
+      if (event.relatedTarget) {
+        // Don't close the menu if we are switching focus between menu,
+        // md-menu-item, and md-list or if the anchor was click focused.
+        if (
+          isElementInSubtree(event.relatedTarget, this) ||
+          isElementInSubtree(event.relatedTarget, anchorEl)
+        ) {
+          return
+        }
+      } else if (this.pointerPath.includes(this)) {
+        // If menu tabindex == -1 and the user clicks on the menu or a divider, we
+        // want to keep the menu open.
+        return
+      }
+      const oldRestoreFocus = this.skipRestoreFocus
+      // allow focus to continue to the next focused object rather than returning
+      this.skipRestoreFocus = true
+      this.close()
+      // await for close
+      await this.updateComplete
+      // return to previous behavior
+      this.skipRestoreFocus = oldRestoreFocus
+    }
     /**
      * Saves the last focused element focuses the new element based on
      * `defaultFocus`, and animates open.
      */
-    this.onOpened = () => {
+    this.onOpened = async () => {
       this.lastFocusedElement = getFocusedElement()
-      if (!this.listElement) return
-      const items = this.listElement.items
-      const activeItemRecord = List.getActiveItem(items)
-      if (activeItemRecord && this.defaultFocus !== 'NONE') {
-        activeItemRecord.item.active = false
+      const items = this.items
+      const activeItemRecord = getActiveItem(items)
+      if (activeItemRecord && this.defaultFocus !== FocusState.NONE) {
+        activeItemRecord.item.tabIndex = -1
+      }
+      let animationAborted = !this.quick
+      if (this.quick) {
+        this.dispatchEvent(new Event('opening'))
+      } else {
+        animationAborted = !!(await this.animateOpen())
       }
+      // This must come after the opening animation or else it may focus one of
+      // the items before the animation has begun and causes the list to slide
+      // (block-padding-of-the-menu)px at the end of the animation
       switch (this.defaultFocus) {
-        case 'FIRST_ITEM':
-          const first = List.getFirstActivatableItem(items)
+        case FocusState.FIRST_ITEM:
+          const first = getFirstActivatableItem(items)
           if (first) {
-            first.active = true
+            first.tabIndex = 0
+            first.focus()
+            await first.updateComplete
           }
           break
-        case 'LAST_ITEM':
-          const last = List.getLastActivatableItem(items)
+        case FocusState.LAST_ITEM:
+          const last = getLastActivatableItem(items)
           if (last) {
-            last.active = true
+            last.tabIndex = 0
+            last.focus()
+            await last.updateComplete
           }
           break
-        case 'LIST_ROOT':
-          this.listElement?.focus()
+        case FocusState.LIST_ROOT:
+          this.focus()
           break
         default:
-        case 'NONE':
+        case FocusState.NONE:
           // Do nothing.
           break
       }
-      if (this.quick) {
+      if (!animationAborted) {
         this.dispatchEvent(new Event('opened'))
-      } else {
-        this.animateOpen()
       }
     }
     /**
@@ -5896,6 +7552,9 @@ class Menu extends s$4 {
      */
     this.beforeClose = async () => {
       this.open = false
+      if (!this.skipRestoreFocus) {
+        this.lastFocusedElement?.focus?.()
+      }
       if (!this.quick) {
         await this.animateClose()
       }
@@ -5905,36 +7564,77 @@ class Menu extends s$4 {
      */
     this.onClosed = () => {
       if (this.quick) {
+        this.dispatchEvent(new Event('closing'))
         this.dispatchEvent(new Event('closed'))
       }
-      if (!this.skipRestoreFocus) {
-        this.lastFocusedElement?.focus?.()
-      }
     }
-    this.onWindowClick = e => {
-      if (!this.stayOpenOnOutsideClick && !e.composedPath().includes(this)) {
+    this.onWindowPointerdown = event => {
+      this.pointerPath = event.composedPath()
+    }
+    /**
+     * We cannot listen to window click because Safari on iOS will not bubble a
+     * click event on window if the item clicked is not a "clickable" item such as
+     * <body>
+     */
+    this.onDocumentClick = event => {
+      if (!this.open) {
+        return
+      }
+      const path = event.composedPath()
+      if (
+        !this.stayOpenOnOutsideClick &&
+        !path.includes(this) &&
+        !path.includes(this.anchorElement)
+      ) {
         this.open = false
       }
     }
-  }
-  /**
-   * Whether the menu is animating upwards or downwards when opening. This is
-   * helpful for calculating some animation calculations.
-   */
-  get openDirection() {
-    const menuCornerBlock = this.menuCorner.split('_')[0]
-    return menuCornerBlock === 'START' ? 'DOWN' : 'UP'
+    {
+      this.internals.role = 'menu'
+      this.addEventListener('keydown', this.handleKeydown)
+      // Capture so that we can grab the event before it reaches the menu item
+      // istelf. Specifically useful for the case where typeahead encounters a
+      // space and we don't want the menu item to close the menu.
+      this.addEventListener('keydown', this.captureKeydown, { capture: true })
+      this.addEventListener('focusout', this.handleFocusout)
+    }
   }
   /**
    * The menu items associated with this menu. The items must be `MenuItem`s and
    * have both the `md-menu-item` and `md-list-item` attributes.
    */
   get items() {
-    const listElement = this.listElement
-    if (listElement) {
-      return listElement.items.filter(el => el.hasAttribute('md-menu-item'))
+    return this.listController.items
+  }
+  willUpdate(changed) {
+    if (!changed.has('open')) {
+      return
+    }
+    if (this.open) {
+      this.removeAttribute('aria-hidden')
+      return
     }
-    return []
+    this.setAttribute('aria-hidden', 'true')
+  }
+  update(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        this.setUpGlobalEventListeners()
+      } else {
+        this.cleanUpGlobalEventListeners()
+      }
+    }
+    super.update(changed)
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    if (this.open) {
+      this.setUpGlobalEventListeners()
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.cleanUpGlobalEventListeners()
   }
   render() {
     return this.renderSurface()
@@ -5943,79 +7643,69 @@ class Menu extends s$4 {
    * Renders the positionable surface element and its contents.
    */
   renderSurface() {
-    return y`
+    return x`
        <div
-           class="menu ${o(this.getSurfaceClasses())}"
-           style=${i(this.menuPositionController.surfaceStyles)}>
-        ${this.renderList()} 
+          class="menu ${e$1(this.getSurfaceClasses())}"
+          style=${o$1(this.menuPositionController.surfaceStyles)}>
         ${this.renderElevation()}
-        ${this.renderFocusRing()}
+        <div class="items">
+          <div class="item-padding">
+            ${this.renderMenuItems()}
+          </div>
+        </div>
        </div>
      `
   }
-  /**
-   * Renders the List element and its items
-   */
-  renderList() {
-    return y`
-       <md-list
-          role="menu"
-          class="list"
-          .ariaLabel=${this.ariaLabel}
-          listTabIndex=${this.listTabIndex}
-          @focus=${this.onListFocus}
-          @blur=${this.onListBlur}
-          @click=${this.onListClick}
-          @keydown=${this.typeaheadController.onKeydown}>
-         ${this.renderMenuItems()}
-       </md-list>`
-  }
   /**
    * Renders the menu items' slot
    */
   renderMenuItems() {
-    return y`<slot
+    return x`<slot
         @close-menu=${this.onCloseMenu}
-        @deactivate-items=${this.onDeactivateItems}></slot>`
+        @deactivate-items=${this.onDeactivateItems}
+        @request-activation=${this.onRequestActivation}
+        @deactivate-typeahead=${this.handleDeactivateTypeahead}
+        @activate-typeahead=${this.handleActivateTypeahead}
+        @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+        @close-on-focusout=${this.handleCloseOnFocusout}
+        @slotchange=${this.listController.onSlotchange}></slot>`
   }
   /**
    * Renders the elevation component.
    */
   renderElevation() {
-    return y`<md-elevation shadow surface></md-elevation>`
-  }
-  /**
-   * Renders the focus ring component.
-   */
-  renderFocusRing() {
-    return y`<md-focus-ring></md-focus-ring>`
+    return x`<md-elevation part="elevation"></md-elevation>`
   }
   getSurfaceClasses() {
     return {
       open: this.open,
-      fixed: this.fixed,
+      fixed: this.positioning === 'fixed',
       'has-overflow': this.hasOverflow,
     }
   }
-  onListFocus() {
-    this.focusRing.visible = shouldShowStrongFocus()
-  }
-  onListClick() {
-    pointerPress()
-    this.focusRing.visible = shouldShowStrongFocus()
-  }
-  onListBlur() {
-    this.focusRing.visible = false
+  captureKeydown(event) {
+    if (
+      event.target === this &&
+      !event.defaultPrevented &&
+      isClosableKey(event.code)
+    ) {
+      event.preventDefault()
+      this.close()
+    }
+    this.typeaheadController.onKeydown(event)
   }
   /**
    * Performs the opening animation:
    *
    * https://direct.googleplex.com/#/spec/295000003+271060003
+   *
+   * @return A promise that resolve to `true` if the animation was aborted,
+   *     `false` if it was not aborted.
    */
-  animateOpen() {
+  async animateOpen() {
     const surfaceEl = this.surfaceEl
     const slotEl = this.slotEl
-    if (!surfaceEl || !slotEl) return
+    if (!surfaceEl || !slotEl) return true
     const openDirection = this.openDirection
     this.dispatchEvent(new Event('opening'))
     // needs to be imperative because we don't want to mix animation and Lit
@@ -6064,26 +7754,32 @@ class Menu extends s$4 {
       })
       // Make them all initially hidden and then clean up at the end of each
       // animation.
-      child.classList.toggle('hidden', true)
+      child.classList.toggle('md-menu-hidden', true)
       animation.addEventListener('finish', () => {
-        child.classList.toggle('hidden', false)
+        child.classList.toggle('md-menu-hidden', false)
       })
       childrenAnimations.push([child, animation])
     }
+    let resolveAnimation = value => {}
+    const animationFinished = new Promise(resolve => {
+      resolveAnimation = resolve
+    })
     signal.addEventListener('abort', () => {
       surfaceHeightAnimation.cancel()
       upPositionCorrectionAnimation.cancel()
       surfaceOpacityAnimation.cancel()
       childrenAnimations.forEach(([child, animation]) => {
-        child.classList.toggle('hidden', false)
+        child.classList.toggle('md-menu-hidden', false)
         animation.cancel()
       })
+      resolveAnimation(true)
     })
     surfaceHeightAnimation.addEventListener('finish', () => {
       surfaceEl.classList.toggle('animating', false)
       this.openCloseAnimationSignal.finish()
-      this.dispatchEvent(new Event('opened'))
+      resolveAnimation(false)
     })
+    return await animationFinished
   }
   /**
    * Performs the closing animation:
@@ -6120,7 +7816,7 @@ class Menu extends s$4 {
     const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION
     const ITEM_OPACITY_DURATION = 50
     const ITEM_OPACITY_INITIAL_DELAY = 50
-    const END_HEIGHT_PRECENTAGE = 0.35
+    const END_HEIGHT_PERCENTAGE = 0.35
     // We want to fit every child fade-out animation within the full duration of
     // the animation.
     const DELAY_BETWEEN_ITEMS =
@@ -6130,7 +7826,7 @@ class Menu extends s$4 {
     const surfaceHeightAnimation = surfaceEl.animate(
       [
         { height: `${height}px` },
-        { height: `${height * END_HEIGHT_PRECENTAGE}px` },
+        { height: `${height * END_HEIGHT_PERCENTAGE}px` },
       ],
       {
         duration: FULL_DURATION,
@@ -6145,7 +7841,7 @@ class Menu extends s$4 {
         { transform: '' },
         {
           transform: closingDownwards
-            ? `translateY(-${height * (1 - END_HEIGHT_PRECENTAGE)}px)`
+            ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
             : '',
         },
       ],
@@ -6168,7 +7864,7 @@ class Menu extends s$4 {
       // Make sure the items stay hidden at the end of each child animation.
       // We clean this up at the end of the overall animation.
       animation.addEventListener('finish', () => {
-        child.classList.toggle('hidden', true)
+        child.classList.toggle('md-menu-hidden', true)
       })
       childrenAnimations.push([child, animation])
     }
@@ -6178,14 +7874,14 @@ class Menu extends s$4 {
       surfaceOpacityAnimation.cancel()
       childrenAnimations.forEach(([child, animation]) => {
         animation.cancel()
-        child.classList.toggle('hidden', false)
+        child.classList.toggle('md-menu-hidden', false)
       })
       reject()
     })
     surfaceHeightAnimation.addEventListener('finish', () => {
       surfaceEl.classList.toggle('animating', false)
       childrenAnimations.forEach(([child]) => {
-        child.classList.toggle('hidden', false)
+        child.classList.toggle('md-menu-hidden', false)
       })
       this.openCloseAnimationSignal.finish()
       this.dispatchEvent(new Event('closed'))
@@ -6193,272 +7889,169 @@ class Menu extends s$4 {
     })
     return animationEnded
   }
-  connectedCallback() {
-    super.connectedCallback()
-    if (window && window.addEventListener) {
-      window.addEventListener('click', this.onWindowClick, { capture: true })
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    if (window && window.removeEventListener) {
-      window.removeEventListener('click', this.onWindowClick)
-    }
+  handleKeydown(event) {
+    // At any key event, the pointer interaction is done so we need to clear our
+    // cached pointerpath. This handles the case where the user clicks on the
+    // anchor, and then hits shift+tab
+    this.pointerPath = []
+    this.listController.handleKeydown(event)
+  }
+  setUpGlobalEventListeners() {
+    document.addEventListener('click', this.onDocumentClick, { capture: true })
+    window.addEventListener('pointerdown', this.onWindowPointerdown)
+  }
+  cleanUpGlobalEventListeners() {
+    document.removeEventListener('click', this.onDocumentClick, {
+      capture: true,
+    })
+    window.removeEventListener('pointerdown', this.onWindowPointerdown)
   }
-  onCloseMenu(e) {
+  onCloseMenu() {
     this.close()
   }
-  onDeactivateItems(e) {
-    e.stopPropagation()
-    const items = this.items
-    for (const item of items) {
-      item.active = false
-    }
+  onDeactivateItems(event) {
+    event.stopPropagation()
+    this.listController.onDeactivateItems()
   }
-  focus() {
-    this.listElement?.focus()
+  onRequestActivation(event) {
+    event.stopPropagation()
+    this.listController.onRequestActivation(event)
+  }
+  handleDeactivateTypeahead(event) {
+    // stopPropagation so that this does not deactivate any typeaheads in menus
+    // nested above it e.g. md-sub-menu
+    event.stopPropagation()
+    this.typeaheadActive = false
+  }
+  handleActivateTypeahead(event) {
+    // stopPropagation so that this does not activate any typeaheads in menus
+    // nested above it e.g. md-sub-menu
+    event.stopPropagation()
+    this.typeaheadActive = true
+  }
+  handleStayOpenOnFocusout(event) {
+    event.stopPropagation()
+    this.stayOpenOnFocusout = true
+  }
+  handleCloseOnFocusout(event) {
+    event.stopPropagation()
+    this.stayOpenOnFocusout = false
   }
   close() {
     this.open = false
-    this.items.forEach(item => {
+    const maybeSubmenu = this.slotItems
+    maybeSubmenu.forEach(item => {
       item.close?.()
     })
   }
   show() {
     this.open = true
   }
+  /**
+   * Activates the next item in the menu. If at the end of the menu, the first
+   * item will be activated.
+   *
+   * @return The activated menu item or `null` if there are no items.
+   */
+  activateNextItem() {
+    return this.listController.activateNextItem() ?? null
+  }
+  /**
+   * Activates the previous item in the menu. If at the start of the menu, the
+   * last item will be activated.
+   *
+   * @return The activated menu item or `null` if there are no items.
+   */
+  activatePreviousItem() {
+    return this.listController.activatePreviousItem() ?? null
+  }
 }
+;(() => {
+  // We want to manage tabindex ourselves.
+  setupHostAria(Menu, { focusable: false })
+})()
+__decorate([e$5('.menu')], Menu.prototype, 'surfaceEl', void 0)
+__decorate([e$5('slot')], Menu.prototype, 'slotEl', void 0)
+__decorate([n$3()], Menu.prototype, 'anchor', void 0)
+__decorate([n$3()], Menu.prototype, 'positioning', void 0)
+__decorate([n$3({ type: Boolean })], Menu.prototype, 'quick', void 0)
 __decorate(
-  [i$2('md-list'), __metadata('design:type', List)],
-  Menu.prototype,
-  'listElement',
-  void 0
-)
-__decorate(
-  [i$2('.menu'), __metadata('design:type', HTMLElement)],
-  Menu.prototype,
-  'surfaceEl',
-  void 0
-)
-__decorate(
-  [i$2('slot'), __metadata('design:type', HTMLSlotElement)],
-  Menu.prototype,
-  'slotEl',
-  void 0
-)
-__decorate(
-  [i$2('md-focus-ring'), __metadata('design:type', MdFocusRing)],
-  Menu.prototype,
-  'focusRing',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  Menu.prototype,
-  'ariaLabel',
-  void 0
-)
-__decorate(
-  [e$8({ attribute: false }), __metadata('design:type', HTMLElement)],
-  Menu.prototype,
-  'anchor',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean }), __metadata('design:type', Object)],
-  Menu.prototype,
-  'fixed',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean }), __metadata('design:type', Object)],
-  Menu.prototype,
-  'quick',
-  void 0
-)
-__decorate(
-  [
-    e$8({ type: Boolean, attribute: 'has-overflow' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Boolean, attribute: 'has-overflow' })],
   Menu.prototype,
   'hasOverflow',
   void 0
 )
 __decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
+  [n$3({ type: Boolean, reflect: true })],
   Menu.prototype,
   'open',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: Number, attribute: 'x-offset' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Number, attribute: 'x-offset' })],
   Menu.prototype,
   'xOffset',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: Number, attribute: 'y-offset' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Number, attribute: 'y-offset' })],
   Menu.prototype,
   'yOffset',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: Number, attribute: 'list-tab-index' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Number, attribute: 'typeahead-delay' })],
   Menu.prototype,
-  'listTabIndex',
+  'typeaheadDelay',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: Number, attribute: 'typeahead-delay' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ attribute: 'anchor-corner' })],
   Menu.prototype,
-  'typeaheadBufferTime',
+  'anchorCorner',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: String, attribute: 'anchor-corner' }),
-    __metadata('design:type', String),
-  ],
+  [n$3({ attribute: 'menu-corner' })],
   Menu.prototype,
-  'anchorCorner',
+  'menuCorner',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: String, attribute: 'menu-corner' }),
-    __metadata('design:type', String),
-  ],
+  [n$3({ type: Boolean, attribute: 'stay-open-on-outside-click' })],
   Menu.prototype,
-  'menuCorner',
+  'stayOpenOnOutsideClick',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: Boolean, attribute: 'stay-open-on-outside-click' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Boolean, attribute: 'stay-open-on-focusout' })],
   Menu.prototype,
-  'stayOpenOnOutsideClick',
+  'stayOpenOnFocusout',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: Boolean, attribute: 'skip-restore-focus' }),
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Boolean, attribute: 'skip-restore-focus' })],
   Menu.prototype,
   'skipRestoreFocus',
   void 0
 )
 __decorate(
-  [
-    e$8({ type: String, attribute: 'default-focus' }),
-    __metadata('design:type', String),
-  ],
+  [n$3({ attribute: 'default-focus' })],
   Menu.prototype,
   'defaultFocus',
   void 0
 )
+__decorate([o$3({ flatten: true })], Menu.prototype, 'slotItems', void 0)
+__decorate([r$3()], Menu.prototype, 'typeaheadActive', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$8 = i$5`:host{--_container-color: var(--md-menu-container-color, var(--md-sys-color-surface, #fffbfe));--_container-elevation: var(--md-menu-container-elevation, 3);--_container-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-menu-container-shape, 4px);--_container-surface-tint-layer-color: var(--md-menu-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--md-list-container-color:var(--_container-color);--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color);--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape))}.menu{border-radius:var(--_container-shape);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit}.menu.fixed{position:fixed}.menu md-list{height:inherit;max-height:inherit;display:block;overflow:auto}.menu.has-overflow md-list{overflow:visible}.menu.animating md-list{pointer-events:none;overflow:hidden}.menu.animating ::slotted(.hidden){opacity:0}.menu slot{display:block;height:inherit;max-height:inherit}md-elevation{position:absolute;inset:0;pointer-events:none}/*# sourceMappingURL=menu-styles.css.map */
+const styles$8 = i$4`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow .items{overflow:visible}.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
 `
 
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * The event that closes any parent menus. It is recommended to subclass and
- * dispatch this event rather than creating your own `close-menu` event.
- */
-class CloseMenuEvent extends Event {
-  constructor(initiator, reason) {
-    super('close-menu', { bubbles: true, composed: true })
-    this.initiator = initiator
-    this.reason = reason
-    this.itemPath = [initiator]
-  }
-}
-/**
- * The default close menu event used by md-menu. To create your own `close-menu`
- * event, you should subclass the `CloseMenuEvent` instead.
- */
-// tslint:disable-next-line
-const DefaultCloseMenuEvent = CloseMenuEvent
-/**
- * The event that requests the parent md-menu to deactivate all other items.
- */
-class DeactivateItemsEvent extends Event {
-  constructor() {
-    super('deactivate-items', { bubbles: true, composed: true })
-  }
-}
-/**
- * Keys that are used to navigate menus.
- */
-const NAVIGABLE_KEY = {
-  UP: 'ArrowUp',
-  DOWN: 'ArrowDown',
-  RIGHT: 'ArrowRight',
-  LEFT: 'ArrowLeft',
-}
-/**
- * Keys that are used for selection in menus.
- */
-const SELECTION_KEY = {
-  SPACE: 'Space',
-  ENTER: 'Enter',
-}
-/**
- * Default close `Reason` kind values.
- */
-const CLOSE_REASON = {
-  CLICK_SELECTION: 'CLICK_SELECTION',
-  KEYDOWN: 'KEYDOWN',
-}
-/**
- * Keys that can close menus.
- */
-const KEYDOWN_CLOSE_KEYS = {
-  ESCAPE: 'Escape',
-  SPACE: SELECTION_KEY.SPACE,
-  ENTER: SELECTION_KEY.ENTER,
-}
-/**
- * Determines whether the given key code is a key code that should close the
- * menu.
- *
- * @param code The KeyboardEvent code to check.
- * @return Whether or not the key code is in the predetermined list to close the
- * menu.
- */
-function isClosableKey(code) {
-  return Object.values(KEYDOWN_CLOSE_KEYS).some(value => value === code)
-}
-
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -6482,21 +8075,28 @@ function isClosableKey(code) {
  * ```html
  * <div style="position:relative;">
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
  *   <!--
  *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
  *   -->
- *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
- * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
- *     <md-sub-menu-item header="this is a submenu item">
- *       <md-menu slot="submenu">
- *         <md-menu-item
- *           header="This is an item inside a submenu"></md-menu-item>
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
  *       </md-menu>
  *     </md-sub-menu>
  *   </md-menu>
@@ -6508,23 +8108,7 @@ function isClosableKey(code) {
  */
 let MdMenu = class MdMenu extends Menu {}
 MdMenu.styles = [styles$8]
-MdMenu = __decorate([e$9('md-menu')], MdMenu)
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const styles$7 = i$5`:host{--_list-item-container-color: var(--md-list-list-item-container-color, var(--md-sys-color-surface, #fffbfe));--_list-item-container-shape: var(--md-list-list-item-container-shape, 0px);--_list-item-disabled-label-text-color: var(--md-list-list-item-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-label-text-opacity: var(--md-list-list-item-disabled-label-text-opacity, 0.3);--_list-item-disabled-leading-icon-color: var(--md-list-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-leading-icon-opacity: var(--md-list-list-item-disabled-leading-icon-opacity, 0.38);--_list-item-disabled-trailing-icon-color: var(--md-list-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-disabled-trailing-icon-opacity: var(--md-list-list-item-disabled-trailing-icon-opacity, 0.38);--_list-item-focus-label-text-color: var(--md-list-list-item-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-leading-icon-icon-color: var(--md-list-list-item-focus-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-focus-state-layer-color: var(--md-list-list-item-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-focus-state-layer-opacity: var(--md-list-list-item-focus-state-layer-opacity, 0.12);--_list-item-focus-trailing-icon-icon-color: var(--md-list-list-item-focus-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-label-text-color: var(--md-list-list-item-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-leading-icon-icon-color: var(--md-list-list-item-hover-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-hover-state-layer-color: var(--md-list-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-hover-state-layer-opacity: var(--md-list-list-item-hover-state-layer-opacity, 0.08);--_list-item-hover-trailing-icon-icon-color: var(--md-list-list-item-hover-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-label-text-color: var(--md-list-list-item-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-label-text-line-height: var(--md-list-list-item-label-text-line-height, 1.5rem);--_list-item-label-text-type: var(--md-list-list-item-label-text-type, 400 1rem / 1.5rem Roboto);--_list-item-large-leading-video-height: var(--md-list-list-item-large-leading-video-height, 69px);--_list-item-leading-avatar-label-color: var(--md-list-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container, #21005d));--_list-item-leading-avatar-label-type: var(--md-list-list-item-leading-avatar-label-type, 500 1rem / 1.5rem Roboto);--_list-item-leading-avatar-color: var(--md-list-list-item-leading-avatar-color, var(--md-sys-color-primary-container, #eaddff));--_list-item-leading-avatar-shape: var(--md-list-list-item-leading-avatar-shape, 9999px);--_list-item-leading-avatar-size: var(--md-list-list-item-leading-avatar-size, 40px);--_list-item-leading-icon-color: var(--md-list-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-leading-icon-size: var(--md-list-list-item-leading-icon-size, 18px);--_list-item-leading-image-height: var(--md-list-list-item-leading-image-height, 56px);--_list-item-leading-image-shape: var(--md-list-list-item-leading-image-shape, 0px);--_list-item-leading-image-width: var(--md-list-list-item-leading-image-width, 56px);--_list-item-leading-video-shape: var(--md-list-list-item-leading-video-shape, 0px);--_list-item-leading-video-width: var(--md-list-list-item-leading-video-width, 100px);--_list-item-one-line-container-height: var(--md-list-list-item-one-line-container-height, 56px);--_list-item-pressed-label-text-color: var(--md-list-list-item-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-leading-icon-icon-color: var(--md-list-list-item-pressed-leading-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-pressed-state-layer-color: var(--md-list-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_list-item-pressed-state-layer-opacity: var(--md-list-list-item-pressed-state-layer-opacity, 0.12);--_list-item-pressed-trailing-icon-icon-color: var(--md-list-list-item-pressed-trailing-icon-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-small-leading-video-height: var(--md-list-list-item-small-leading-video-height, 56px);--_list-item-supporting-text-color: var(--md-list-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-supporting-text-type: var(--md-list-list-item-supporting-text-type, 400 0.875rem / 1.25rem Roboto);--_list-item-three-line-container-height: var(--md-list-list-item-three-line-container-height, 88px);--_list-item-trailing-icon-color: var(--md-list-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-icon-size: var(--md-list-list-item-trailing-icon-size, 24px);--_list-item-trailing-supporting-text-color: var(--md-list-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_list-item-trailing-supporting-text-line-height: var(--md-list-list-item-trailing-supporting-text-line-height, 1rem);--_list-item-trailing-supporting-text-type: var(--md-list-list-item-trailing-supporting-text-type, 500 0.688rem / 1rem Roboto);--_list-item-two-line-container-height: var(--md-list-list-item-two-line-container-height, 72px)}:host{color:unset;--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, 4px);--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, 4px);--md-focus-ring-offset-vertical:-2px;--md-focus-ring-offset-horizontal:-3px;--md-ripple-hover-color:var(--_list-item-hover-state-layer-color);--md-ripple-hover-opacity:var(--_list-item-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_list-item-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_list-item-pressed-state-layer-opacity);--md-ripple-focus-color:var(--_list-item-focus-state-layer-color);--md-ripple-focus-opacity:var(--_list-item-focus-state-layer-opacity)}.list-item{align-items:center;box-sizing:border-box;display:flex;outline:none;position:relative;width:100%;text-decoration:none;background-color:var(--_list-item-container-color);border-radius:var(--_list-item-container-shape)}.list-item:not(.disabled){cursor:pointer}.list-item.disabled{pointer-events:none}.content-wrapper{display:flex;width:100%}.with-one-line{min-height:var(--_list-item-one-line-container-height)}.with-two-line{min-height:var(--_list-item-two-line-container-height)}.with-three-line{min-height:var(--_list-item-three-line-container-height)}.start{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;z-index:1}.with-three-line .start{justify-content:start}.with-leading-thumbnail .start,.with-leading-image .start{padding-inline-start:16px}.with-leading-video .start{padding-inline-start:0}.body{display:inline-flex;justify-content:center;flex-direction:column;box-sizing:border-box;flex:1 0 0;padding-inline-start:16px;z-index:1}.end{display:inline-flex;flex-direction:column;justify-content:center;flex:0 0 auto;padding-inline-end:24px;z-index:1}.with-three-line .end{justify-content:start}.label-text{display:flex;color:var(--_list-item-label-text-color);font:var(--_list-item-label-text-type)}:hover .label-text{color:var(--_list-item-hover-label-text-color)}:focus .label-text{color:var(--_list-item-focus-label-text-color)}:active .label-text{color:var(--_list-item-pressed-label-text-color)}.disabled .label-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;color:var(--_list-item-supporting-text-color);font:var(--_list-item-supporting-text-type)}.disabled .supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.supporting-text--multi-line{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;white-space:normal}.trailing-supporting-text{padding-inline-start:16px;font:var(--_list-item-trailing-supporting-text-type)}.list-item:not(.disabled) .trailing-supporting-text{color:var(--_list-item-trailing-supporting-text-color)}.disabled .trailing-supporting-text{color:var(--_list-item-disabled-label-text-color);opacity:var(--_list-item-disabled-label-text-opacity)}.with-three-line .trailing-supporting-text{padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-supporting-text-line-height))/2)}.focus-ring{z-index:1}::slotted([data-variant=image]){display:inline-flex;margin-inline-start:16px;height:var(--_list-item-leading-image-height);width:var(--_list-item-leading-image-width);border-radius:var(--_list-item-leading-image-shape);padding-block:calc((var(--_list-item-two-line-container-height) - var(--_list-item-leading-image-height))/2)}.with-three-line ::slotted([data-variant=image]){padding-block:0}slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-leading-icon-color);--md-icon-size:var(--_list-item-leading-icon-size)}.with-three-line slot[name=start]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-leading-icon-size))/2)}slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-trailing-icon-color);--md-icon-size:var(--_list-item-trailing-icon-size)}.with-three-line slot[name=end]::slotted([data-variant=icon]){padding-block-start:calc((var(--_list-item-label-text-line-height) - var(--_list-item-trailing-icon-size))/2)}::slotted([data-variant=icon]){padding-inline-start:16px}:hover slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-leading-icon-icon-color)}:hover slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-hover-trailing-icon-icon-color)}:focus slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-leading-icon-icon-color)}:focus slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-focus-trailing-icon-icon-color)}:active slot[name=start]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-leading-icon-icon-color)}:active slot[name=end]::slotted([data-variant=icon]){--md-icon-color:var(--_list-item-pressed-trailing-icon-icon-color)}.disabled slot[name=start]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-leading-icon-opacity);--md-icon-color:var(--_list-item-disabled-leading-icon-color)}.disabled slot[name=end]::slotted([data-variant=icon]){opacity:var(--_list-item-disabled-trailing-icon-opacity);--md-icon-color:var(--_list-item-disabled-trailing-icon-color)}::slotted([data-variant=avatar]){display:inline-flex;justify-content:center;align-items:center;margin-inline-start:16px;background-color:var(--_list-item-leading-avatar-color);height:var(--_list-item-leading-avatar-size);width:var(--_list-item-leading-avatar-size);border-radius:var(--_list-item-leading-avatar-shape);color:var(--_list-item-leading-avatar-label-color);font:var(--_list-item-leading-avatar-label-type)}::slotted([data-variant=video]),::slotted([data-variant=video-large]){display:inline-flex;object-fit:cover;height:var(--_list-item-small-leading-video-height);width:var(--_list-item-leading-video-width);border-radius:var(--_list-item-leading-video-shape);padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-small-leading-video-height))/2)}.with-three-line ::slotted([data-variant=video]),.with-three-line ::slotted([data-variant=video-large]){padding-block:0}::slotted([data-variant=video-large]){padding-block:calc((var(--_list-item-three-line-container-height) - var(--_list-item-large-leading-video-height))/2);height:var(--_list-item-large-leading-video-height)}/*# sourceMappingURL=list-item-styles.css.map */
-`
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const styles$6 = i$5`:host{--_list-item-selected-container-color: var(--md-menu-list-item-selected-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}:host([active]) .list-item,:host(:active) .list-item,.list-item:focus{background-color:var(--_list-item-selected-container-color)}.list-item:has(.submenu:hover){--md-ripple-hover-opacity:0}/*# sourceMappingURL=menu-item-styles.css.map */
-`
+MdMenu = __decorate([t$3('md-menu')], MdMenu)
 
 /**
  * @license
@@ -6584,6 +8168,18 @@ var State
    */
   State[(State['WAITING_FOR_CLICK'] = 3)] = 'WAITING_FOR_CLICK'
 })(State || (State = {}))
+/**
+ * Events that the ripple listens to.
+ */
+const EVENTS = [
+  'click',
+  'contextmenu',
+  'pointercancel',
+  'pointerdown',
+  'pointerenter',
+  'pointerleave',
+  'pointerup',
+]
 /**
  * Delay reacting to touch so that we do not show the ripple for a swipe or
  * scroll interaction.
@@ -6592,35 +8188,77 @@ const TOUCH_DELAY_MS = 150
 /**
  * A ripple component.
  */
-class Ripple extends s$4 {
+class Ripple extends s$1 {
   constructor() {
     super(...arguments)
-    // TODO(https://bugs.webkit.org/show_bug.cgi?id=247546)
-    // Remove Safari workaround that requires reflecting `unbounded` so
-    // it can be styled against.
-    /**
-     * Sets the ripple to be an unbounded circle.
-     */
-    this.unbounded = false
     /**
      * Disables the ripple.
      */
     this.disabled = false
     this.hovered = false
-    this.focused = false
     this.pressed = false
     this.rippleSize = ''
     this.rippleScale = ''
     this.initialSize = 0
     this.state = State.INACTIVE
     this.checkBoundsAfterContextMenu = false
+    this.attachableController = new AttachableController(
+      this,
+      this.onControlChange.bind(this)
+    )
+  }
+  get htmlFor() {
+    return this.attachableController.htmlFor
+  }
+  set htmlFor(htmlFor) {
+    this.attachableController.htmlFor = htmlFor
+  }
+  get control() {
+    return this.attachableController.control
+  }
+  set control(control) {
+    this.attachableController.control = control
+  }
+  attach(control) {
+    this.attachableController.attach(control)
+  }
+  detach() {
+    this.attachableController.detach()
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
+  }
+  render() {
+    const classes = {
+      hovered: this.hovered,
+      pressed: this.pressed,
+    }
+    return x`<div class="surface ${e$1(classes)}"></div>`
   }
+  update(changedProps) {
+    if (changedProps.has('disabled') && this.disabled) {
+      this.hovered = false
+      this.pressed = false
+    }
+    super.update(changedProps)
+  }
+  /**
+   * TODO(b/269799771): make private
+   * @private only public for slider
+   */
   handlePointerenter(event) {
     if (!this.shouldReactToEvent(event)) {
       return
     }
     this.hovered = true
   }
+  /**
+   * TODO(b/269799771): make private
+   * @private only public for slider
+   */
   handlePointerleave(event) {
     if (!this.shouldReactToEvent(event)) {
       return
@@ -6631,12 +8269,6 @@ class Ripple extends s$4 {
       this.endPressAnimation()
     }
   }
-  handleFocusin() {
-    this.focused = true
-  }
-  handleFocusout() {
-    this.focused = false
-  }
   handlePointerup(event) {
     if (!this.shouldReactToEvent(event)) {
       return
@@ -6708,55 +8340,30 @@ class Ripple extends s$4 {
     this.checkBoundsAfterContextMenu = true
     this.endPressAnimation()
   }
-  render() {
-    const classes = {
-      hovered: this.hovered,
-      focused: this.focused,
-      pressed: this.pressed,
-      unbounded: this.unbounded,
-    }
-    return y`<div class="surface ${o(classes)}"></div>`
-  }
-  update(changedProps) {
-    if (changedProps.has('disabled') && this.disabled) {
-      this.hovered = false
-      this.focused = false
-      this.pressed = false
-    }
-    super.update(changedProps)
-  }
-  getDimensions() {
-    return (this.parentElement ?? this).getBoundingClientRect()
-  }
   determineRippleSize() {
-    const { height, width } = this.getDimensions()
+    const { height, width } = this.getBoundingClientRect()
     const maxDim = Math.max(height, width)
     const softEdgeSize = Math.max(
       SOFT_EDGE_CONTAINER_RATIO * maxDim,
       SOFT_EDGE_MINIMUM_SIZE
     )
-    let maxRadius = maxDim
-    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
+    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
     const hypotenuse = Math.sqrt(width ** 2 + height ** 2)
-    maxRadius = hypotenuse + PADDING$1
-    // ensure `initialSize` is even for unbounded
-    if (this.unbounded) {
-      initialSize = initialSize - (initialSize % 2)
-    }
+    const maxRadius = hypotenuse + PADDING$1
     this.initialSize = initialSize
     this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
-    this.rippleSize = `${this.initialSize}px`
+    this.rippleSize = `${initialSize}px`
   }
   getNormalizedPointerEventCoords(pointerEvent) {
     const { scrollX, scrollY } = window
-    const { left, top } = this.getDimensions()
+    const { left, top } = this.getBoundingClientRect()
     const documentX = scrollX + left
     const documentY = scrollY + top
     const { pageX, pageY } = pointerEvent
     return { x: pageX - documentX, y: pageY - documentY }
   }
   getTranslationCoordinates(positionEvent) {
-    const { height, width } = this.getDimensions()
+    const { height, width } = this.getBoundingClientRect()
     // end in the center
     const endPoint = {
       x: (width - this.initialSize) / 2,
@@ -6779,6 +8386,9 @@ class Ripple extends s$4 {
     return { startPoint, endPoint }
   }
   startPressAnimation(positionEvent) {
+    if (!this.mdRoot) {
+      return
+    }
     this.pressed = true
     this.growAnimation?.cancel()
     this.determineRippleSize()
@@ -6807,8 +8417,14 @@ class Ripple extends s$4 {
     )
   }
   async endPressAnimation() {
+    this.state = State.INACTIVE
     const animation = this.growAnimation
-    const pressAnimationPlayState = animation?.currentTime ?? Infinity
+    let pressAnimationPlayState = Infinity
+    if (typeof animation?.currentTime === 'number') {
+      pressAnimationPlayState = animation.currentTime
+    } else if (animation?.currentTime) {
+      pressAnimationPlayState = animation.currentTime.to('ms').value
+    }
     if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
       this.pressed = false
       return
@@ -6860,832 +8476,643 @@ class Ripple extends s$4 {
   isTouch({ pointerType }) {
     return pointerType === 'touch'
   }
-}
-__decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
-  Ripple.prototype,
-  'unbounded',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
-  Ripple.prototype,
-  'disabled',
-  void 0
-)
-__decorate(
-  [t$3(), __metadata('design:type', Object)],
-  Ripple.prototype,
-  'hovered',
-  void 0
-)
-__decorate(
-  [t$3(), __metadata('design:type', Object)],
-  Ripple.prototype,
-  'focused',
-  void 0
-)
-__decorate(
-  [t$3(), __metadata('design:type', Object)],
-  Ripple.prototype,
-  'pressed',
-  void 0
-)
-__decorate(
-  [i$2('.surface'), __metadata('design:type', HTMLElement)],
-  Ripple.prototype,
-  'mdRoot',
-  void 0
-)
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-const styles$5 = i$5`:host{--_focus-color: var(--md-ripple-focus-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-opacity: var(--md-ripple-focus-opacity, 0.12);--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);--_shape: var(--md-ripple-shape, 0px)}:host{display:flex}:host([disabled]){opacity:0}:host,.surface{position:absolute;inset:0;pointer-events:none;overflow:hidden}.surface{will-change:transform;border-radius:var(--_shape);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{position:absolute;opacity:0;pointer-events:none;content:""}.surface::before{background-color:var(--_hover-color);transition:opacity 15ms linear,background-color 15ms linear;inset:0}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transition:opacity 375ms linear;transform-origin:center center}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.focused::before{background-color:var(--_focus-color);opacity:var(--_focus-opacity);transition-duration:75ms}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}.unbounded{--_shape: var(--md-ripple-shape, 9999px)}@media screen and (forced-colors: active){:host{display:none}}/*# sourceMappingURL=ripple-styles.css.map */
-`
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * @summary Ripples, also known as state layers, are visual indicators used to
- * communicate the status of a component or interactive element.
- *
- * @description A state layer is a semi-transparent covering on an element that
- * indicates its state. State layers provide a systematic approach to
- * visualizing states by using opacity. A layer can be applied to an entire
- * element or in a circular shape and only one state layer can be applied at a
- * given time.
- *
- * @final
- * @suppress {visibility}
- */
-let MdRipple = class MdRipple extends Ripple {}
-MdRipple.styles = [styles$5]
-MdRipple = __decorate([e$9('md-ripple')], MdRipple)
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-class RippleDirective extends i$1 {
-  constructor(partInfo) {
-    super(partInfo)
-    this.rippleGetter = async () => null
-    if (partInfo.type !== t.ELEMENT) {
-      throw new Error('The `ripple` directive must be used on an element')
-    }
-  }
-  render(ripple) {
-    return x
-  }
-  // Use EventListenerObject::handleEvent interface to handle events without
-  // generating bound event handlers
+  /** @private */
   async handleEvent(event) {
-    const ripple = await this.rippleGetter()
-    if (!ripple) {
-      return
-    }
     switch (event.type) {
       case 'click':
-        ripple.handleClick()
-        break
-      case 'contextmenu':
-        ripple.handleContextmenu()
-        break
-      case 'pointercancel':
-        ripple.handlePointercancel(event)
-        break
-      case 'pointerdown':
-        await ripple.handlePointerdown(event)
-        break
-      case 'pointerenter':
-        ripple.handlePointerenter(event)
-        break
-      case 'pointerleave':
-        ripple.handlePointerleave(event)
-        break
-      case 'pointerup':
-        ripple.handlePointerup(event)
-        break
-    }
-  }
-  update(part, [ripple]) {
-    if (!this.element) {
-      // NOTE: addEventListener typing needs to be used with HTMLElements or a
-      // subclass
-      this.element = part.element
-      this.element.addEventListener('click', this)
-      this.element.addEventListener('contextmenu', this)
-      this.element.addEventListener('pointercancel', this)
-      this.element.addEventListener('pointerdown', this)
-      this.element.addEventListener('pointerenter', this)
-      this.element.addEventListener('pointerleave', this)
-      this.element.addEventListener('pointerup', this)
-    }
-    // Normalize given ripple accessor
-    this.rippleGetter = typeof ripple === 'function' ? ripple : () => ripple
-    return x
-  }
-}
-/**
- * Connects a Ripple element to a node that drives the interaction
- *
- * @param rippleGetter A function that returns an `md-ripple` element
- * @param simulateKeyboardClick For elements that do not issue a click on
- *     keyboard interaction, pass `true` to enable press animations on Enter or
- *     Spacebar
- */
-const ripple = e$1(RippleDirective)
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// tslint:disable-next-line:enforce-comments-on-exported-symbols
-class ListItemEl extends s$4 {
-  constructor() {
-    super(...arguments)
-    // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-    this.role = 'listitem'
-    /**
-     * The primary, headline text of the list item.
-     */
-    this.headline = ''
-    /**
-     * The one-line supporting text below the headline. Set
-     * `multiLineSupportingText` to `true` to support multiple lines in the
-     * supporting text.
-     */
-    this.supportingText = ''
-    /**
-     * Modifies `supportingText` to support multiple lines.
-     */
-    this.multiLineSupportingText = false
-    /**
-     * The supporting text placed at the end of the item. Overriden by elements
-     * slotted into the `end` slot.
-     */
-    this.trailingSupportingText = ''
-    /**
-     * Disables the item and makes it non-selectable and non-interactive.
-     */
-    this.disabled = false
-    /**
-     * The tabindex of the underlying item.
-     *
-     * __NOTE:__ this is overriden by the keyboard behavior of `md-list` and by
-     * setting `selected`.
-     */
-    this.itemTabIndex = -1
-    /**
-     * Whether or not the element is in the selected visual state. When active,
-     * tabindex is set to 0, and in some list item variants (like md-list-item),
-     * focuses the underlying item.
-     */
-    this.active = false
-    /**
-     * READONLY. Sets the `md-list-item` attribute on the element.
-     */
-    this.isListItem = true
-    this.showFocusRing = false
-    this.showRipple = false
-    /**
-     * Only meant to be overriden by subclassing and not by the user. This is
-     * so that we have control over focus on specific variants such as disabling
-     * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
-     */
-    this.focusOnSelection = true
-    this.getRipple = () => {
-      this.showRipple = true
-      return this.ripple
-    }
-    this.isFirstUpdate = true
-  }
-  willUpdate(changed) {
-    if (changed.has('active') && !this.disabled) {
-      if (this.active) {
-        this.itemTabIndex = 0
-        if (this.focusOnSelection) {
-          this.showFocusRing = shouldShowStrongFocus()
-        }
-        // Do not reset anything if it's the first render because user could
-        // have set `itemTabIndex` manually.
-      } else if (!this.isFirstUpdate) {
-        this.itemTabIndex = -1
-      }
-    }
-  }
-  render() {
-    return this.renderListItem(y`
-      <div class="content-wrapper">
-        ${this.renderStart()}
-        ${this.renderBody()}
-        ${this.renderEnd()}
-        ${this.renderRipple()}
-        ${this.renderFocusRing()}
-      </div>`)
-  }
-  /**
-   * Renders the root list item.
-   *
-   * @param content {unkown} the child content of the list item.
-   */
-  renderListItem(content) {
-    return y`
-      <li
-          tabindex=${this.disabled ? -1 : this.itemTabIndex}
-          role=${this.role}
-          aria-selected=${this.ariaSelected || b}
-          aria-checked=${this.ariaChecked || b}
-          class="list-item ${o(this.getRenderClasses())}"
-          @pointerdown=${this.onPointerdown}
-          @focus=${this.onFocus}
-          @blur=${this.onBlur}
-          @click=${this.onClick}
-          @pointerenter=${this.onPointerenter}
-          @pointerleave=${this.onPointerleave}
-          @keydown=${this.onKeydown}
-          ${ripple(this.getRipple)}>${content}</li>`
-  }
-  /**
-   * Handles rendering of the ripple element.
-   */
-  renderRipple() {
-    return this.showRipple
-      ? y`<md-ripple ?disabled="${this.disabled}"></md-ripple>`
-      : b
-  }
-  /**
-   * Handles rendering of the focus ring.
-   */
-  renderFocusRing() {
-    return y`<md-focus-ring class="focus-ring" .visible="${this.showFocusRing}"></md-focus-ring>`
-  }
-  /**
-   * Classes applied to the list item root.
-   */
-  getRenderClasses() {
-    return {
-      'with-one-line': this.supportingText === '',
-      'with-two-line':
-        this.supportingText !== '' && !this.multiLineSupportingText,
-      'with-three-line':
-        this.supportingText !== '' && this.multiLineSupportingText,
-      disabled: this.disabled,
-    }
-  }
-  /**
-   * The content rendered at the start of the list item.
-   */
-  renderStart() {
-    return y`<div class="start"><slot name="start"></slot></div>`
-  }
-  /**
-   * Handles rendering the headline and supporting text.
-   */
-  renderBody() {
-    const supportingText =
-      this.supportingText !== '' ? this.renderSupportingText() : ''
-    return y`<div class="body"
-      ><span class="label-text">${this.headline}</span>${supportingText}</div>`
-  }
-  /**
-   * Renders the one-line supporting text.
-   */
-  renderSupportingText() {
-    return y`<span
-        class="supporting-text ${o(this.getSupportingTextClasses())}"
-      >${this.supportingText}</span>`
-  }
-  /**
-   * Gets the classes for the supporting text node
-   */
-  getSupportingTextClasses() {
-    return { 'supporting-text--multi-line': this.multiLineSupportingText }
-  }
-  /**
-   * The content rendered at the end of the list item.
-   */
-  renderEnd() {
-    const supportingText =
-      this.trailingSupportingText !== ''
-        ? this.renderTrailingSupportingText()
-        : ''
-    return y`<div class="end"
-      ><slot name="end">${supportingText}</slot></div>`
-  }
-  /**
-   * Renders the supporting text at the end of the list item.
-   */
-  renderTrailingSupportingText() {
-    return y`<span class="trailing-supporting-text"
-      >${this.trailingSupportingText}</span>`
-  }
-  onPointerdown() {
-    pointerPress()
-    this.showFocusRing = shouldShowStrongFocus()
-  }
-  onFocus() {
-    this.showFocusRing = shouldShowStrongFocus()
-  }
-  onBlur() {
-    this.showFocusRing = false
-  }
-  // For easier overriding in menu-item
-  onClick(e) {}
-  onKeydown(e) {}
-  onPointerenter(e) {}
-  onPointerleave(e) {}
-  updated(changed) {
-    super.updated(changed)
-    // will focus the list item root if it is selected but not on the first
-    // update or else it may cause the page to jump on first load.
-    if (
-      changed.has('active') &&
-      !this.isFirstUpdate &&
-      this.active &&
-      this.focusOnSelection
-    ) {
-      this.listItemRoot.focus()
-    }
-    this.isFirstUpdate = false
-  }
-}
-__decorate(
-  [
-    ariaProperty,
-    // tslint:disable-next-line
-    e$8({ type: String, attribute: 'data-role', noAccessor: true }),
-    // @ts-ignore(b/264292293): Use `override` with TS 4.9+
-    __metadata('design:type', String),
-  ],
-  ListItemEl.prototype,
-  'role',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-selected', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  ListItemEl.prototype,
-  'ariaSelected',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-checked', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  ListItemEl.prototype,
-  'ariaChecked',
-  void 0
-)
-__decorate(
-  [e$8(), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'headline',
-  void 0
-)
-__decorate(
-  [e$8(), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'supportingText',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean }), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'multiLineSupportingText',
-  void 0
-)
-__decorate(
-  [e$8(), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'trailingSupportingText',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean }), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'disabled',
-  void 0
-)
-__decorate(
-  [e$8({ type: Number }), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'itemTabIndex',
-  void 0
-)
-__decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'active',
-  void 0
-)
-__decorate(
-  [
-    e$8({ type: Boolean, attribute: 'md-list-item', reflect: true }),
-    __metadata('design:type', Object),
-  ],
-  ListItemEl.prototype,
-  'isListItem',
-  void 0
-)
-__decorate(
-  [e$7('md-ripple'), __metadata('design:type', Promise)],
-  ListItemEl.prototype,
-  'ripple',
-  void 0
-)
-__decorate(
-  [i$2('.list-item'), __metadata('design:type', HTMLElement)],
-  ListItemEl.prototype,
-  'listItemRoot',
-  void 0
-)
-__decorate(
-  [t$3(), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'showFocusRing',
-  void 0
-)
+        this.handleClick()
+        break
+      case 'contextmenu':
+        this.handleContextmenu()
+        break
+      case 'pointercancel':
+        this.handlePointercancel(event)
+        break
+      case 'pointerdown':
+        await this.handlePointerdown(event)
+        break
+      case 'pointerenter':
+        this.handlePointerenter(event)
+        break
+      case 'pointerleave':
+        this.handlePointerleave(event)
+        break
+      case 'pointerup':
+        this.handlePointerup(event)
+        break
+    }
+  }
+  onControlChange(prev, next) {
+    for (const event of EVENTS) {
+      prev?.removeEventListener(event, this)
+      next?.addEventListener(event, this)
+    }
+  }
+}
 __decorate(
-  [t$3(), __metadata('design:type', Object)],
-  ListItemEl.prototype,
-  'showRipple',
+  [n$3({ type: Boolean, reflect: true })],
+  Ripple.prototype,
+  'disabled',
   void 0
 )
+__decorate([r$3()], Ripple.prototype, 'hovered', void 0)
+__decorate([r$3()], Ripple.prototype, 'pressed', void 0)
+__decorate([e$5('.surface')], Ripple.prototype, 'mdRoot', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+const styles$7 = i$4`:host{--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--_hover-color);inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */
+`
+
 /**
- * @fires close-menu {CloseMenuEvent}
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Ripples, also known as state layers, are visual indicators used to
+ * communicate the status of a component or interactive element.
+ *
+ * @description A state layer is a semi-transparent covering on an element that
+ * indicates its state. State layers provide a systematic approach to
+ * visualizing states by using opacity. A layer can be applied to an entire
+ * element or in a circular shape and only one state layer can be applied at a
+ * given time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdRipple = class MdRipple extends Ripple {}
+MdRipple.styles = [styles$7]
+MdRipple = __decorate([t$3('md-ripple')], MdRipple)
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An item layout component.
  */
-class MenuItemEl extends ListItemEl {
+class Item extends s$1 {
   constructor() {
     super(...arguments)
-    this.role = 'menuitem'
     /**
-     * READONLY: self-identifies as a menu item and sets its identifying attribute
-     */
-    this.isMenuItem = true
-    /**
-     * Keeps the menu open if clicked or keyboard selected.
-     */
-    this.keepOpen = false
-    /**
-     * Used for overriding e.g. sub-menu-item.
+     * Only needed for SSR.
+     *
+     * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+     * Content. This attribute is not needed for single line items or items with
+     * three or more lines.
      */
-    this.keepOpenOnClick = false
+    this.multiline = false
   }
-  onClick() {
-    if (this.keepOpen || this.keepOpenOnClick) return
-    this.dispatchEvent(
-      new DefaultCloseMenuEvent(this, { kind: CLOSE_REASON.CLICK_SELECTION })
-    )
+  render() {
+    return x`
+      <slot name="container"></slot>
+      <slot class="non-text" name="start"></slot>
+      <div class="text">
+        <slot name="overline"
+            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot class="default-slot"
+            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline"
+            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="supporting-text"
+            @slotchange=${this.handleTextSlotChange}></slot>
+      </div>
+      <slot class="non-text" name="trailing-supporting-text"></slot>
+      <slot class="non-text" name="end"></slot>
+    `
   }
-  onKeydown(e) {
-    if (this.keepOpen) return
-    const keyCode = e.code
-    if (isClosableKey(keyCode)) {
-      e.preventDefault()
-      this.dispatchEvent(
-        new DefaultCloseMenuEvent(this, {
-          kind: CLOSE_REASON.KEYDOWN,
-          key: keyCode,
-        })
-      )
+  handleTextSlotChange() {
+    // Check if there's more than one text slot with content. If so, the item is
+    // multiline, which has a different min-height than single line items.
+    let isMultiline = false
+    let slotsWithContent = 0
+    for (const slot of this.textSlots) {
+      if (slotHasContent(slot)) {
+        slotsWithContent += 1
+      }
+      if (slotsWithContent > 1) {
+        isMultiline = true
+        break
+      }
     }
+    this.multiline = isMultiline
   }
 }
 __decorate(
-  [
-    e$8({ type: Boolean, attribute: 'md-menu-item', reflect: true }),
-    __metadata('design:type', Object),
-  ],
-  MenuItemEl.prototype,
-  'isMenuItem',
-  void 0
-)
-__decorate(
-  [
-    e$8({ type: Boolean, attribute: 'keep-open' }),
-    __metadata('design:type', Object),
-  ],
-  MenuItemEl.prototype,
-  'keepOpen',
+  [n$3({ type: Boolean, reflect: true })],
+  Item.prototype,
+  'multiline',
   void 0
 )
+__decorate([r$2('.text slot')], Item.prototype, 'textSlots', void 0)
+function slotHasContent(slot) {
+  for (const node of slot.assignedNodes({ flatten: true })) {
+    // Assume there's content if there's an element slotted in
+    const isElement = node.nodeType === Node.ELEMENT_NODE
+    // If there's only text nodes for the default slot, check if there's
+    // non-whitespace.
+    const isTextWithContent =
+      node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\S/)
+    if (isElement || isTextWithContent) {
+      return true
+    }
+  }
+  return false
+}
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+const styles$6 = i$4`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */
+`
+
 /**
- * @summary Menus display a list of choices on a temporary surface.
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An item layout component that can be used inside list items to give them
+ * their customizable structure.
  *
- * @description
- * Menu items are the selectable choices within the menu. Menu items must
- * implement the `MenuItem` interface and also have the `md-menu-item`
- * attribute. Additionally menu items are list items so they must also have the
- * `md-list-item` attribute.
+ * `<md-item>` does not have any functionality, which must be added by the
+ * component using it.
  *
- * Menu items can control a menu by selectively firing the `close-menu` and
- * `deselect-items` events.
+ * All text will wrap unless `white-space: nowrap` is set on the item or any of
+ * its children.
  *
- * @final
- * @suppress {visibility}
+ * Slots available:
+ * - `<default>`: The headline, or custom content.
+ * - `headline`: The first line.
+ * - `supporting-text`: Supporting text lines underneath the headline.
+ * - `trailing-supporting-text`: A small text snippet at the end of the item.
+ * - `start`: Any leading content, such as icons, avatars, or checkboxes.
+ * - `end`: Any trailing content, such as icons and buttons.
+ * - `container`: Background container content, intended for adding additional
+ *     styles, such as ripples or focus rings.
+ *
+ * @example
+ * ```html
+ * <md-item>Single line</md-item>
+ *
+ * <md-item>
+ *   <div class="custom-content">...</div>
+ * </md-item>
+ *
+ * <!-- Classic 1 to 3+ line list items -->
+ * <md-item>
+ *   <md-icon slot="start">image</md-icon>
+ *   <div slot="overline">Overline</div>
+ *   <div slot="headline">Headline</div>
+ *   <div="supporting-text">Supporting text</div>
+ *   <div="trailing-supporting-text">Trailing</div>
+ *   <md-icon slot="end">image</md-icon>
+ * </md-item>
+ * ```
+ *
+ * When wrapping `<md-item>`, forward the available slots to use the same slot
+ * structure for the wrapping component (this is what `<md-list-item>` does).
+ *
+ * @example
+ * ```html
+ * <md-item>
+ *   <slot></slot>
+ *   <slot name="overline" slot="overline"></slot>
+ *   <slot name="headline" slot="headline"></slot>
+ *   <slot name="supporting-text" slot="supporting-text"></slot>
+ *   <slot name="trailing-supporting-text"
+ *       slot="trailing-supporting-text"></slot>
+ *   <slot name="start" slot="start"></slot>
+ *   <slot name="end" slot="end"></slot>
+ * </md-item>
+ * ```
  */
-let MdMenuItem = class MdMenuItem extends MenuItemEl {}
-MdMenuItem.styles = [styles$7, styles$6]
-MdMenuItem = __decorate([e$9('md-menu-item')], MdMenuItem)
+let MdItem = class MdItem extends Item {}
+MdItem.styles = [styles$6]
+MdItem = __decorate([t$3('md-item')], MdItem)
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e = Symbol.for(''),
+  o = t => {
+    if (t?.r === e) return t?._$litStatic$
+  },
+  s = (t, ...r) => ({
+    _$litStatic$: r.reduce(
+      (r, e, o) =>
+        r +
+        (t => {
+          if (void 0 !== t._$litStatic$) return t._$litStatic$
+          throw Error(
+            `Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`
+          )
+        })(e) +
+        t[o + 1],
+      t[0]
+    ),
+    r: e,
+  }),
+  a = new Map(),
+  l = t => (r, ...e) => {
+    const i = e.length
+    let s, l
+    const n = [],
+      u = []
+    let c,
+      $ = 0,
+      f = !1
+    for (; $ < i; ) {
+      for (c = r[$]; $ < i && void 0 !== ((l = e[$]), (s = o(l))); )
+        (c += s + r[++$]), (f = !0)
+      $ !== i && u.push(l), n.push(c), $++
+    }
+    if (($ === i && n.push(r[i]), f)) {
+      const t = n.join('$$lit$$')
+      void 0 === (r = a.get(t)) && ((n.raw = n), a.set(t, (r = n))), (e = u)
+    }
+    return t(r, ...e)
+  },
+  n = l(x)
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Sets up a `ReactiveElement` constructor to enable updates when delegating
+ * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
+ * attributes in their render functions.
+ *
+ * This function will:
+ * - Call `requestUpdate()` when an aria attribute changes.
+ * - Add `role="presentation"` to the host.
+ *
+ * NOTE: The following features are not currently supported:
+ * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
+ * - Delegating the `role` attribute
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     requestUpdateOnAriaChange(XButton);
+ *   }
+ *
+ *   protected override render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+function requestUpdateOnAriaChange(ctor) {
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    ctor.createProperty(ariaProperty, {
+      attribute: ariaPropertyToAttribute(ariaProperty),
+      reflect: true,
+    })
+  }
+  ctor.addInitializer(element => {
+    const controller = {
+      hostConnected() {
+        element.setAttribute('role', 'presentation')
+      },
+    }
+    element.addController(controller)
+  })
+}
 
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-function stopPropagation(e) {
-  e.stopPropagation()
+/**
+ * A controller that provides most functionality of an element that implements
+ * the MenuItem interface.
+ */
+class MenuItemController {
+  /**
+   * @param host The MenuItem in which to attach this controller to.
+   * @param config The object that configures this controller's behavior.
+   */
+  constructor(host, config) {
+    this.host = host
+    this.internalTypeaheadText = null
+    /**
+     * Bind this click listener to the interactive element. Handles closing the
+     * menu.
+     */
+    this.onClick = () => {
+      if (this.host.keepOpen) return
+      this.host.dispatchEvent(
+        createDefaultCloseMenuEvent(this.host, {
+          kind: CloseReason.CLICK_SELECTION,
+        })
+      )
+    }
+    /**
+     * Bind this click listener to the interactive element. Handles closing the
+     * menu.
+     */
+    this.onKeydown = event => {
+      // Check if the interactive element is an anchor tag. If so, click it.
+      if (this.host.href && event.code === 'Enter') {
+        const interactiveElement = this.getInteractiveElement()
+        if (interactiveElement instanceof HTMLAnchorElement) {
+          interactiveElement.click()
+        }
+      }
+      if (this.host.keepOpen || event.defaultPrevented) return
+      const keyCode = event.code
+      if (!event.defaultPrevented && isClosableKey(keyCode)) {
+        event.preventDefault()
+        this.host.dispatchEvent(
+          createDefaultCloseMenuEvent(this.host, {
+            kind: CloseReason.KEYDOWN,
+            key: keyCode,
+          })
+        )
+      }
+    }
+    const { getHeadlineElements, getInteractiveElement } = config
+    this.getHeadlineElements = getHeadlineElements
+    this.getInteractiveElement = getInteractiveElement
+    this.host.addController(this)
+  }
+  /**
+   * The text that is selectable via typeahead. If not set, defaults to the
+   * innerText of the item slotted into the `"headline"` slot.
+   */
+  get typeaheadText() {
+    if (this.internalTypeaheadText !== null) {
+      return this.internalTypeaheadText
+    }
+    const headlineElements = this.getHeadlineElements()
+    const textParts = []
+    headlineElements.forEach(headlineElement => {
+      if (headlineElement.textContent && headlineElement.textContent.trim()) {
+        textParts.push(headlineElement.textContent.trim())
+      }
+    })
+    return textParts.join(' ')
+  }
+  /**
+   * The recommended tag name to render as the list item.
+   */
+  get tagName() {
+    const type = this.host.type
+    switch (type) {
+      case 'link':
+        return 'a'
+      case 'button':
+        return 'button'
+      default:
+      case 'menuitem':
+      case 'option':
+        return 'li'
+    }
+  }
+  /**
+   * The recommended role of the menu item.
+   */
+  get role() {
+    return this.host.type === 'option' ? 'option' : 'menuitem'
+  }
+  hostConnected() {
+    this.host.toggleAttribute('md-menu-item', true)
+  }
+  hostUpdate() {
+    if (this.host.href) {
+      this.host.type = 'link'
+    }
+  }
+  /**
+   * Use to set the typeaheadText when it changes.
+   */
+  setTypeaheadText(text) {
+    this.internalTypeaheadText = text
+  }
 }
+
 /**
- * @fires deactivate-items {DeactivateItemsEvent} Requests the parent menu to
- *     deselect other items when a submenu opens
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fires close-menu {CloseMenuEvent}
  */
-class SubMenuItem extends MenuItemEl {
+class MenuItemEl extends s$1 {
   constructor() {
     super(...arguments)
-    this.role = 'menuitem'
     /**
-     * The anchorCorner to set on the submenu.
+     * Disables the item and makes it non-selectable and non-interactive.
      */
-    this.anchorCorner = 'START_END'
+    this.disabled = false
     /**
-     * The menuCorner to set on the submenu.
+     * Sets the behavior and role of the menu item, defaults to "menuitem".
      */
-    this.menuCorner = 'START_START'
+    this.type = 'menuitem'
     /**
-     * The delay between pointerenter and submenu opening.
+     * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
      */
-    this.hoverOpenDelay = 400
+    this.href = ''
     /**
-     * The delay between ponterleave and the submenu closing.
+     * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is
+     * set.
      */
-    this.hoverCloseDelay = 400
-    this.keepOpenOnClick = true
-    this.previousOpenTimeout = 0
-    this.previousCloseTimeout = 0
+    this.target = ''
     /**
-     * Starts the default 400ms countdown to open the submenu.
+     * Keeps the menu open if clicked or keyboard selected.
      */
-    this.onPointerenter = () => {
-      clearTimeout(this.previousOpenTimeout)
-      clearTimeout(this.previousCloseTimeout)
-      if (this.submenuEl?.open) return
-      // Open synchronously if delay is 0. (screenshot tests infra
-      // would never resolve otherwise)
-      if (!this.hoverOpenDelay) {
-        this.show()
-      } else {
-        this.previousOpenTimeout = setTimeout(() => {
-          this.show()
-        }, this.hoverOpenDelay)
-      }
-    }
+    this.keepOpen = false
     /**
-     * Starts the default 400ms countdown to close the submenu.
+     * Sets the item in the selected visual state when a submenu is opened.
      */
-    this.onPointerleave = () => {
-      clearTimeout(this.previousCloseTimeout)
-      clearTimeout(this.previousOpenTimeout)
-      // Close synchronously if delay is 0. (screenshot tests infra
-      // would never resolve otherwise)
-      if (!this.hoverCloseDelay) {
-        this.close()
-      } else {
-        this.previousCloseTimeout = setTimeout(() => {
-          this.close()
-        }, this.hoverCloseDelay)
-      }
-    }
-  }
-  get submenuEl() {
-    return this.menus[0]
-  }
-  onClick() {
-    this.show()
+    this.selected = false
+    this.menuItemController = new MenuItemController(this, {
+      getHeadlineElements: () => {
+        return this.headlineElements
+      },
+      getInteractiveElement: () => this.listItemRoot,
+    })
   }
   /**
-   * On item keydown handles opening the submenu.
+   * The text that is selectable via typeahead. If not set, defaults to the
+   * innerText of the item slotted into the `"headline"` slot.
    */
-  onKeydown(e) {
-    const shouldOpenSubmenu = this.isSubmenuOpenKey(e.code)
-    if (e.code === SELECTION_KEY.SPACE) {
-      // prevent space from scrolling. Only open the submenu.
-      e.preventDefault()
-    }
-    if (!shouldOpenSubmenu) {
-      super.onKeydown(e)
-      return
-    }
-    const submenu = this.submenuEl
-    if (!submenu) return
-    const submenuItems = submenu.items
-    const firstActivatableItem = List.getFirstActivatableItem(submenuItems)
-    if (firstActivatableItem) {
-      this.show(() => {
-        firstActivatableItem.active = true
-      })
-      return
-    }
+  get typeaheadText() {
+    return this.menuItemController.typeaheadText
   }
-  /**
-   * Render the submenu at the end
-   */
-  renderEnd() {
-    return y`${super.renderEnd()}${this.renderSubMenu()}`
+  set typeaheadText(text) {
+    this.menuItemController.setTypeaheadText(text)
+  }
+  render() {
+    return this.renderListItem(x`
+      <md-item>
+        <div slot="container">
+          ${this.renderRipple()}
+          ${this.renderFocusRing()}
+        </div>
+        <slot name="start" slot="start"></slot>
+        <slot name="end" slot="end"></slot>
+        ${this.renderBody()}
+      </md-item>
+    `)
   }
   /**
-   * Renders the slot for the submenu.
+   * Renders the root list item.
+   *
+   * @param content the child content of the list item.
    */
-  renderSubMenu() {
-    return y`<span class="submenu"><slot
-        name="submenu"
-        @pointerdown=${stopPropagation}
-        @click=${stopPropagation}
-        @keydown=${this.onSubMenuKeydown}
-        @close-menu=${this.onCloseSubmenu}
-    ></slot></span>`
-  }
-  onCloseSubmenu(e) {
-    e.itemPath.push(this)
-    // Escape should only close one menu not all of the menus unlike space or
-    // click selection which should close all menus.
-    if (
-      e.reason.kind === CLOSE_REASON.KEYDOWN &&
-      e.reason.key === KEYDOWN_CLOSE_KEYS.ESCAPE
-    ) {
-      e.stopPropagation()
-      this.active = true
-      // It might already be active so manually focus
-      this.listItemRoot.focus()
-      return
+  renderListItem(content) {
+    const isAnchor = this.type === 'link'
+    let tag
+    switch (this.menuItemController.tagName) {
+      case 'a':
+        tag = s`a`
+        break
+      case 'button':
+        tag = s`button`
+        break
+      default:
+      case 'li':
+        tag = s`li`
+        break
     }
-    this.active = false
-  }
-  async onSubMenuKeydown(e) {
-    // Stop propagation so that we don't accidentally close every parent menu.
-    // Additionally, we want to isolate things like the typeahead keydowns
-    // from bubbling up to the parent menu and confounding things.
-    e.stopPropagation()
-    const shouldClose = this.isSubmenuCloseKey(e.code)
-    if (!shouldClose) return
-    this.close(() => {
-      List.deactivateActiveItem(this.submenuEl.items)
-      this.listItemRoot.focus()
-      this.active = true
-    })
+    // TODO(b/265339866): announce "button"/"link" inside of a list item. Until
+    // then all are "menuitem" roles for correct announcement.
+    const target = isAnchor && !!this.target ? this.target : T
+    return n`
+      <${tag}
+        id="item"
+        tabindex=${this.disabled && !isAnchor ? -1 : 0}
+        role=${this.menuItemController.role}
+        aria-label=${this.ariaLabel || T}
+        aria-selected=${this.ariaSelected || T}
+        aria-checked=${this.ariaChecked || T}
+        aria-expanded=${this.ariaExpanded || T}
+        aria-haspopup=${this.ariaHasPopup || T}
+        class="list-item ${e$1(this.getRenderClasses())}"
+        href=${this.href || T}
+        target=${target}
+        @click=${this.menuItemController.onClick}
+        @keydown=${this.menuItemController.onKeydown}
+      >${content}</${tag}>
+    `
   }
   /**
-   * Shows the submenu.
-   *
-   * @param onOpened A function to call after the menu is opened.
+   * Handles rendering of the ripple element.
    */
-  show(onOpened = () => {}) {
-    const menu = this.submenuEl
-    if (!menu) return
-    menu.quick = true
-    // Submenus are in overflow when not fixed. Can remove once we have native
-    // popup support
-    menu.hasOverflow = true
-    menu.anchorCorner = this.anchorCorner
-    menu.menuCorner = this.menuCorner
-    menu.anchor = this
-    // We manually set focus with `active` on keyboard navigation. And we
-    // want to focus the root on hover, so the user can pick up navigation with
-    // keyboard after hover.
-    menu.defaultFocus = 'LIST_ROOT'
-    menu.skipRestoreFocus = true
-    // Menu could already be opened because of mouse interaction
-    const menuAlreadyOpen = menu.open
-    menu.show()
-    // Deactivate other items. This can be the case if the user has tabbed
-    // around the menu and then mouses over an md-sub-menu.
-    this.dispatchEvent(new DeactivateItemsEvent())
-    this.active = true
-    // This is the case of mouse hovering when already opened via keyboard or
-    // vice versa
-    if (menuAlreadyOpen) {
-      onOpened()
-    } else {
-      menu.addEventListener('opened', onOpened, { once: true })
-    }
+  renderRipple() {
+    return x`
+      <md-ripple
+          part="ripple"
+          for="item"
+          ?disabled=${this.disabled}></md-ripple>`
   }
   /**
-   * Closes the submenu.
-   *
-   * @param onClosed A function to call after the menu is closed.
+   * Handles rendering of the focus ring.
    */
-  close(onClosed = () => {}) {
-    const menu = this.submenuEl
-    if (!menu || !menu.open) return
-    menu.quick = true
-    menu.close()
-    this.active = false
-    menu.addEventListener('closed', onClosed, { once: true })
+  renderFocusRing() {
+    return x`
+      <md-focus-ring
+          part="focus-ring"
+          for="item"
+          inward></md-focus-ring>`
   }
   /**
-   * Determines whether the given KeyboardEvent code is one that should open
-   * the submenu. This is RTL-aware. By default, left, right, space, or enter.
-   *
-   * @param code The native KeyboardEvent code.
-   * @return Whether or not the key code should open the submenu.
+   * Classes applied to the list item root.
    */
-  isSubmenuOpenKey(code) {
-    const isRtl = getComputedStyle(this).direction === 'rtl'
-    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.LEFT : NAVIGABLE_KEY.RIGHT
-    switch (code) {
-      case arrowEnterKey:
-      case SELECTION_KEY.SPACE:
-      case SELECTION_KEY.ENTER:
-        return true
-      default:
-        return false
+  getRenderClasses() {
+    return {
+      disabled: this.disabled,
+      selected: this.selected,
     }
   }
   /**
-   * Determines whether the given KeyboardEvent code is one that should close
-   * the submenu. This is RTL-aware. By default right, left, or escape.
-   *
-   * @param code The native KeyboardEvent code.
-   * @return Whether or not the key code should close the submenu.
+   * Handles rendering the headline and supporting text.
    */
-  isSubmenuCloseKey(code) {
-    const isRtl = getComputedStyle(this).direction === 'rtl'
-    const arrowEnterKey = isRtl ? NAVIGABLE_KEY.RIGHT : NAVIGABLE_KEY.LEFT
-    switch (code) {
-      case arrowEnterKey:
-      case KEYDOWN_CLOSE_KEYS.ESCAPE:
-        return true
-      default:
-        return false
-    }
+  renderBody() {
+    return x`
+      <slot></slot>
+      <slot name="overline" slot="overline"></slot>
+      <slot name="headline" slot="headline"></slot>
+      <slot name="supporting-text" slot="supporting-text"></slot>
+      <slot name="trailing-supporting-text"
+          slot="trailing-supporting-text"></slot>
+    `
+  }
+  focus() {
+    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
+    // work programmatically like in FF and select-option
+    this.listItemRoot?.focus()
   }
 }
+;(() => {
+  requestUpdateOnAriaChange(MenuItemEl)
+})()
+/** @nocollapse */
+MenuItemEl.shadowRootOptions = {
+  ...s$1.shadowRootOptions,
+  delegatesFocus: true,
+}
 __decorate(
-  [e$8({ attribute: 'anchor-corner' }), __metadata('design:type', String)],
-  SubMenuItem.prototype,
-  'anchorCorner',
-  void 0
-)
-__decorate(
-  [e$8({ attribute: 'menu-corner' }), __metadata('design:type', String)],
-  SubMenuItem.prototype,
-  'menuCorner',
+  [n$3({ type: Boolean, reflect: true })],
+  MenuItemEl.prototype,
+  'disabled',
   void 0
 )
+__decorate([n$3()], MenuItemEl.prototype, 'type', void 0)
+__decorate([n$3()], MenuItemEl.prototype, 'href', void 0)
+__decorate([n$3()], MenuItemEl.prototype, 'target', void 0)
 __decorate(
-  [
-    e$8({ type: Number, attribute: 'hover-open-delay' }),
-    __metadata('design:type', Object),
-  ],
-  SubMenuItem.prototype,
-  'hoverOpenDelay',
+  [n$3({ type: Boolean, attribute: 'keep-open' })],
+  MenuItemEl.prototype,
+  'keepOpen',
   void 0
 )
+__decorate([n$3({ type: Boolean })], MenuItemEl.prototype, 'selected', void 0)
+__decorate([e$5('.list-item')], MenuItemEl.prototype, 'listItemRoot', void 0)
 __decorate(
-  [
-    e$8({ type: Number, attribute: 'hover-close-delay' }),
-    __metadata('design:type', Object),
-  ],
-  SubMenuItem.prototype,
-  'hoverCloseDelay',
+  [o$3({ slot: 'headline' })],
+  MenuItemEl.prototype,
+  'headlineElements',
   void 0
 )
 __decorate(
-  [l$2({ slot: 'submenu' }), __metadata('design:type', Array)],
-  SubMenuItem.prototype,
-  'menus',
-  void 0
+  [n$3({ attribute: 'typeahead-text' })],
+  MenuItemEl.prototype,
+  'typeaheadText',
+  null
 )
 
 /**
  * @license
- * Copyright 2023 Google LLC
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$5 = i$4`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
@@ -7700,53 +9127,24 @@ __decorate(
  * Menu items can control a menu by selectively firing the `close-menu` and
  * `deselect-items` events.
  *
- * This menu item will open a sub-menu that is slotted in the `submenu` slot.
- * Additionally, the containing menu must either have `has-overflow` or `fixed`
- * set to `true` in order to display the containing menu properly.
- *
- * @example
- * ```html
- * <div style="position:relative;">
- *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
- *       @click=${() => this.menuRef.value.show()}>
- *     Click to open menu
- *   </button>
- *   <!--
- *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents
- *   -->
- *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
- * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
- *     <md-sub-menu-item header="this is a submenu item">
- *       <md-menu slot="submenu">
- *         <md-menu-item
- *           header="This is an item inside a submenu"></md-menu-item>
- *       </md-menu>
- *     </md-sub-menu>
- *   </md-menu>
- * </div>
- * ```
- *
  * @final
  * @suppress {visibility}
  */
-let MdSubMenuItem = class MdSubMenuItem extends SubMenuItem {}
-MdSubMenuItem.styles = [styles$7, styles$6]
-MdSubMenuItem = __decorate([e$9('md-sub-menu-item')], MdSubMenuItem)
+let MdMenuItem = class MdMenuItem extends MenuItemEl {}
+MdMenuItem.styles = [styles$5]
+MdMenuItem = __decorate([t$3('md-menu-item')], MdMenuItem)
 
-let LayerSettings = class LayerSettings extends s$4 {
+let LayerSettings = class LayerSettings extends s$8 {
   constructor() {
     super(...arguments)
     this.name = ''
     this.otherImages = []
     this.enable = true
-    this.menuRef = e()
-    this.anchorRef = e()
+    this.menuRef = e$9()
+    this.anchorRef = e$9()
     // avoid overflow: hidden on parents clipping menu
     this.floatingAnchor = makeHtml(`<div class="${style.floater}"></div>`)
-    this.stateService = new s$2(this, viewerContext, undefined, true)
+    this.stateService = new s$6(this, viewerContext, undefined, true)
   }
   connectedCallback() {
     super.connectedCallback()
@@ -7769,8 +9167,8 @@ let LayerSettings = class LayerSettings extends s$4 {
     this.floatingAnchor.style.top = `${top}px`
     this.floatingAnchor.style.left = `${left}px`
     if (this.menuRef.value) {
-      this.menuRef.value.anchor = this.floatingAnchor
       this.floatingAnchor.appendChild(this.menuRef.value)
+      this.menuRef.value.anchorElement = this.floatingAnchor
       this.menuRef.value.show()
     }
   }
@@ -7800,7 +9198,7 @@ let LayerSettings = class LayerSettings extends s$4 {
         })
   }
   render() {
-    return y`
+    return y$2`
       <div
         @click=${() => {
           this.showMenu()
@@ -7809,54 +9207,68 @@ let LayerSettings = class LayerSettings extends s$4 {
         class=${this.enable ? 'clickable' : ''}
       >
         <slot></slot>
-        <div ${n$1(this.anchorRef)} style="position:relative; z-index: 4000;">
-          <md-menu ${n$1(this.menuRef)}>
-            ${o$1(
+        <div ${n$6(this.anchorRef)} style="position:relative; z-index: 4000;">
+          <md-menu ${n$6(this.menuRef)} style="min-width: 280px;">
+            ${o$7(
               this.otherImages,
-              name => y`
+              name => y$2`
                   <md-menu-item
-                    headline="Checkerboard compare with ${name}"
                     @click=${() => this.compareWith(name, 'checkerboard')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Checkerboard compare with ${name}"
+                    </div>
+                  </md-menu-item>
                   <md-menu-item
-                    headline="Green-Magenta compare with ${name}"
                     @click=${() => this.compareWith(name, 'green-magenta')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Green-Magenta compare with ${name}"
+                    </div>
+                  </md-menu-item>
                   <md-menu-item
-                    headline="Cyan-Red compare with ${name}"
                     @click=${() => this.compareWith(name, 'cyan-red')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Cyan-Red compare with ${name}"
+                    </div>
+                  </md-menu-item>
                   <md-menu-item
-                    headline="Cyan-Magenta compare with ${name}"
                     @click=${() => this.compareWith(name, 'cyan-magenta')}
-                  ></md-menu-item>
-                  <md-menu-item
-                    headline="Blend compare with ${name}"
-                    @click=${() => this.compareWith(name, 'blend')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Cyan-Magenta compare with ${name}"
+                    </div>
+                  </md-menu-item>
+                  <md-menu-item @click=${() => this.compareWith(name, 'blend')}>
+                    <div slot="headline">
+                      "Blend compare with ${name}"
+                    </div>
+                  </md-menu-item>
                 `
             )}
-            <md-menu-item
-              headline="Stop comparing"
-              @click=${this.stopComparing}
-            ></md-menu-item>
+            <md-menu-item @click=${this.stopComparing}>
+              <div slot="headline">
+                "Stop comparing"
+              </div>
+            </md-menu-item>
           </md-menu>
         </div>
       </div>
     `
   }
 }
-LayerSettings.styles = i$5`
+LayerSettings.styles = i$8`
     .clickable {
       cursor: pointer;
     }
   `
-__decorate([e$8()], LayerSettings.prototype, 'name', void 0)
-__decorate([e$8()], LayerSettings.prototype, 'otherImages', void 0)
-__decorate([e$8()], LayerSettings.prototype, 'enable', void 0)
-LayerSettings = __decorate([e$9('layer-settings')], LayerSettings)
+__decorate([e$f()], LayerSettings.prototype, 'name', void 0)
+__decorate([e$f()], LayerSettings.prototype, 'otherImages', void 0)
+__decorate([e$f()], LayerSettings.prototype, 'enable', void 0)
+LayerSettings = __decorate([e$g('layer-settings')], LayerSettings)
 
-let LayerIcon = class LayerIcon extends s$4 {
+let LayerIcon = class LayerIcon extends s$8 {
   constructor() {
     super(...arguments)
     this.layer = { type: 'image' }
@@ -7904,7 +9316,7 @@ let LayerIcon = class LayerIcon extends s$4 {
   render() {
     const { icon, alt } = this.getIcon()
     const settingsPossible = alt === 'settings'
-    return y`
+    return y$2`
       <div>
         <layer-settings
           .name=${this.name}
@@ -7917,7 +9329,7 @@ let LayerIcon = class LayerIcon extends s$4 {
     `
   }
 }
-LayerIcon.styles = i$5`
+LayerIcon.styles = i$8`
     .icon {
       height: 1.2em;
       width: 1.2em;
@@ -7927,10 +9339,10 @@ LayerIcon.styles = i$5`
       padding-right: 6px;
     }
   `
-__decorate([e$8()], LayerIcon.prototype, 'layer', void 0)
-__decorate([e$8()], LayerIcon.prototype, 'name', void 0)
-__decorate([t$3()], LayerIcon.prototype, 'settingsOpen', void 0)
-LayerIcon = __decorate([e$9('layer-icon')], LayerIcon)
+__decorate([e$f()], LayerIcon.prototype, 'layer', void 0)
+__decorate([e$f()], LayerIcon.prototype, 'name', void 0)
+__decorate([t$7()], LayerIcon.prototype, 'settingsOpen', void 0)
+LayerIcon = __decorate([e$g('layer-icon')], LayerIcon)
 
 function createLayerEntry(context, name, layer) {
   var layerEntry = document.createElement('div')
@@ -8017,7 +9429,7 @@ function createLayerEntry(context, name, layer) {
     .concat(context.id, '-layerBBoxButton" type="checkbox" class="')
     .concat(
       style.toggleInput,
-      '"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Label BBox" class="'
+      '"><label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Bounding Box" class="'
     )
     .concat(style.toggleButton, '" for="')
     .concat(context.id, '-layerBBoxButton"><img src="')
@@ -8044,40 +9456,43 @@ function createLayerEntry(context, name, layer) {
     var actorContext = context.layers.actorContext.get(name)
     layerBBoxButtonInput.checked = actorContext.bbox
   })
-  if (context.layers.showSaveRoiButton) {
-    var downloadImage = document.createElement('div')
-    downloadImage.innerHTML = '\n  <input type="checkbox" checked id='
-      .concat(context.id, '-download-image" class="')
-      .concat(
-        style.toggleInput,
-        '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Save ROI" class="'
-      )
-      .concat(style.toggleButton, '" for="')
-      .concat(
-        context.id,
-        '-download-image">\n    <img style="height: 23px" src="'
-      )
-      .concat(optimizedSVGDataUri$s, '" />\n  </label>\n  ')
-    var downloadImageLabel = downloadImage.children[1]
-    downloadImage.style.height = '23px'
-    applyContrastSensitiveStyleToElement(
-      context,
-      'invertibleButton',
-      downloadImageLabel
+
+  // if (context.layers.showSaveRoiButton) {
+  var downloadImage = document.createElement('div')
+  downloadImage.innerHTML = '\n  <input type="checkbox" checked id='
+    .concat(context.id, '-download-image" class="')
+    .concat(
+      style.toggleInput,
+      '" />\n  <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Save ROI" class="'
     )
-    imageIcons.appendChild(downloadImage)
-    downloadImage.addEventListener('click', function(event) {
-      event.preventDefault()
-      event.stopPropagation()
-      context.service.send({
-        type: 'DOWNLOAD_IMAGE',
-        data: {
-          name: context.images.selectedName,
-          layerName: name,
-        },
-      })
-    })
-  }
+    .concat(style.toggleButton, '" for="')
+    .concat(
+      context.id,
+      '-download-image">\n    <img style="height: 23px" src="'
+    )
+    .concat(optimizedSVGDataUri$s, '" />\n  </label>\n  ')
+  var downloadImageLabel = downloadImage.children[1]
+  downloadImage.style.height = '23px'
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    downloadImageLabel
+  )
+  imageIcons.appendChild(downloadImage)
+  downloadImage.addEventListener('click', function(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    // context.service.send({
+    //   type: 'DOWNLOAD_IMAGE',
+    //   data: {
+    //     name: context.images.selectedName,
+    //     layerName: name,
+    //   },
+    // })
+    console.log('Download image')
+  })
+  // }
+
   var icon = makeHtml(
     '<layer-icon class="'.concat(style.layerIcon, '"></layer-icon>')
   )
@@ -24287,39 +25702,37 @@ function toggleDarkMode(context) {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-/** @soyCompatible */
-class NavigationDrawer extends s$4 {
+/**
+ * TODO(b/265346501): add docs
+ */
+class NavigationDrawer extends s$1 {
   constructor() {
     super(...arguments)
-    // tslint:disable-next-line:no-new-decorators
-    this.ariaModal = 'false'
     this.opened = false
     this.pivot = 'end'
   }
-  /** @soyTemplate */
   render() {
     const ariaExpanded = this.opened ? 'true' : 'false'
     const ariaHidden = !this.opened ? 'true' : 'false'
-    return y`
+    // Needed for closure conformance
+    const { ariaLabel, ariaModal } = this
+    return x`
       <div
-        aria-describedby="${l(this.ariaDescribedBy)}"
         aria-expanded="${ariaExpanded}"
         aria-hidden="${ariaHidden}"
-        aria-label="${l(this.ariaLabel)}"
-        aria-labelledby="${l(this.ariaLabelledBy)}"
-        aria-modal="${this.ariaModal}"
+        aria-label=${ariaLabel || T}
+        aria-modal="${ariaModal || T}"
         class="md3-navigation-drawer ${this.getRenderClasses()}"
         role="dialog">
-        <md-elevation shadow surface></md-elevation>
+        <md-elevation></md-elevation>
         <div class="md3-navigation-drawer__slot-content">
           <slot></slot>
         </div>
       </div>
     `
   }
-  /** @soyTemplate classMap */
   getRenderClasses() {
-    return o({
+    return e$1({
       'md3-navigation-drawer--opened': this.opened,
       'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',
     })
@@ -24338,68 +25751,23 @@ class NavigationDrawer extends s$4 {
     }
   }
 }
+;(() => {
+  requestUpdateOnAriaChange(NavigationDrawer)
+})()
 __decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-describedby', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  NavigationDrawer.prototype,
-  'ariaDescribedBy',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-label', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  NavigationDrawer.prototype,
-  'ariaLabel',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ attribute: 'data-aria-modal', type: String, noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  NavigationDrawer.prototype,
-  'ariaModal',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-labelledby', noAccessor: true }),
-    __metadata('design:type', String),
-  ],
-  NavigationDrawer.prototype,
-  'ariaLabelledBy',
-  void 0
-)
-__decorate(
-  [
-    e$8({ type: Boolean }), // tslint:disable-next-line:no-new-decorators
-    __metadata('design:type', Object),
-  ],
+  [n$3({ type: Boolean })],
   NavigationDrawer.prototype,
   'opened',
   void 0
 )
-__decorate(
-  [e$8({ type: String }), __metadata('design:type', String)],
-  NavigationDrawer.prototype,
-  'pivot',
-  void 0
-)
+__decorate([n$3()], NavigationDrawer.prototype, 'pivot', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$4 = i$5`:host{--_container-shape-start-start: var(--md-navigation-drawer-container-shape-start-start, var(--md-navigation-drawer-container-shape, 0));--_container-shape-start-end: var(--md-navigation-drawer-container-shape-start-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-end: var(--md-navigation-drawer-container-shape-end-end, var(--md-navigation-drawer-container-shape, 16px));--_container-shape-end-start: var(--md-navigation-drawer-container-shape-end-start, var(--md-navigation-drawer-container-shape, 0));--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-surface-tint-layer-color: ;--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level:var(--_standard-container-elevation);--md-elevation-shadow-color:var(--_divider-color);--md-elevation-surface-tint:var(--_container-surface-tint-layer-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{inset:0;position:absolute;width:inherit;z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
+const styles$4 = i$4`:host{--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-shape: var(--md-navigation-drawer-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level: var(--_standard-container-elevation);--md-elevation-shadow-color: var(--_divider-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
 `
 
 /**
@@ -24407,7 +25775,7 @@ const styles$4 = i$5`:host{--_container-shape-start-start: var(--md-navigation-d
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$3 = i$5`.md3-navigation-drawer-modal{background-color:var(--_container-color);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);height:var(--_container-height)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{inline-size:var(--_container-width)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}/*# sourceMappingURL=shared-styles.css.map */
+const styles$3 = i$4`.md3-navigation-drawer-modal{background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{inline-size:var(--_container-width)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}/*# sourceMappingURL=shared-styles.css.map */
 `
 
 /**
@@ -24416,75 +25784,124 @@ const styles$3 = i$5`.md3-navigation-drawer-modal{background-color:var(--_contai
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */
 let MdNavigationDrawer = class MdNavigationDrawer extends NavigationDrawer {}
 MdNavigationDrawer.styles = [styles$3, styles$4]
 MdNavigationDrawer = __decorate(
-  [e$9('md-navigation-drawer')],
+  [t$3('md-navigation-drawer')],
   MdNavigationDrawer
 )
 
-let ServiceContext = class ServiceContext extends s$4 {
+let ServiceContext = class ServiceContext extends s$8 {
   constructor() {
     super(...arguments)
     // @ts-ignore
-    this.provider = new e$5(this, viewerContext, {
+    this.provider = new e$e(this, viewerContext, {
       service: appContext.service,
     })
   }
   render() {
-    return y`
+    return y$2`
       <slot></slot>
     `
   }
 }
-ServiceContext = __decorate([e$9('service-context')], ServiceContext)
+ServiceContext = __decorate([e$g('service-context')], ServiceContext)
 
 /**
  * @license
- * Copyright 2022 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-/** @soyCompatible */
-class Icon extends s$4 {
-  /** @soyTemplate */
-  render() {
-    return y`<span><slot></slot></span>`
-  }
-}
-
 /**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * A unique symbol used for protected access to an instance's
+ * `ElementInternals`.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   static formAssociated = true;
+ *
+ *   [internals] = this.attachInternals();
+ * }
+ *
+ * function getForm(element: MyElement) {
+ *   return element[internals].form;
+ * }
+ * ```
  */
-const styles$2 = i$5`:host{--_color: var(--md-icon-color, inherit);--_font: var(--md-icon-font, "Material Symbols Outlined");--_font-variation-settings: var(--md-icon-font-variation-settings, inherit);--_size: var(--md-icon-size, 24px);--_weight: var(--md-icon-weight, 400);display:inline-flex;color:var(--_color);font-family:var(--_font);font-weight:var(--_weight);font-style:normal;font-size:var(--_size);font-variation-settings:var(--_font-variation-settings);line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}span ::slotted(svg){fill:currentColor}span ::slotted(*){height:var(--_size);width:var(--_size)}/*# sourceMappingURL=icon-styles.css.map */
-`
+const internals = Symbol('internals')
 
 /**
  * @license
- * Copyright 2022 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * @soyCompatible
- * @final
- * @suppress {visibility}
- */
-let MdIcon = class MdIcon extends Icon {}
-MdIcon.styles = [styles$2]
-MdIcon = __decorate([e$9('md-icon')], MdIcon)
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Sets up an element's constructor to enable form submission. The element
+ * instance should be form associated and have a `type` property.
+ *
+ * A click listener is added to each element instance. If the click is not
+ * default prevented, it will submit the element's form, if any.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   static {
+ *     setupFormSubmitter(MyElement);
+ *   }
+ *
+ *   static formAssociated = true;
+ *
+ *   type: FormSubmitterType = 'submit';
+ *
+ *   [internals] = this.attachInternals();
+ * }
+ * ```
+ *
+ * @param ctor The form submitter element's constructor.
  */
-function n(n, o, r) {
-  return n ? o() : null == r ? void 0 : r()
+function setupFormSubmitter(ctor) {
+  ctor.addInitializer(instance => {
+    const submitter = instance
+    submitter.addEventListener('click', async event => {
+      const { type, [internals]: elementInternals } = submitter
+      const { form } = elementInternals
+      if (!form || type === 'button') {
+        return
+      }
+      // Wait a microtask for event bubbling to complete.
+      await new Promise(resolve => {
+        resolve()
+      })
+      if (event.defaultPrevented) {
+        return
+      }
+      if (type === 'reset') {
+        form.reset()
+        return
+      }
+      // form.requestSubmit(submitter) does not work with form associated custom
+      // elements. This patches the dispatched submit event to add the correct
+      // `submitter`.
+      // See https://github.com/WICG/webcomponents/issues/814
+      form.addEventListener(
+        'submit',
+        submitEvent => {
+          Object.defineProperty(submitEvent, 'submitter', {
+            configurable: true,
+            enumerable: true,
+            get: () => submitter,
+          })
+        },
+        { capture: true, once: true }
+      )
+      elementInternals.setFormValue(submitter.value)
+      form.requestSubmit()
+    })
+  })
 }
 
 /**
@@ -24514,8 +25931,9 @@ function isRtl(el, shouldCheck = true) {
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
+var _a
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
-class IconButton extends s$4 {
+class IconButton extends s$1 {
   constructor() {
     super(...arguments)
     /**
@@ -24526,133 +25944,195 @@ class IconButton extends s$4 {
      * Flips the icon if it is in an RTL context at startup.
      */
     this.flipIconInRtl = false
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
+     */
+    this.href = ''
+    /**
+     * Sets the underlying `HTMLAnchorElement`'s `target` attribute.
+     */
+    this.target = ''
+    /**
+     * The `aria-label` of the button when the button is toggleable and selected.
+     */
+    this.ariaLabelSelected = ''
+    /**
+     * When true, the button will toggle between selected and unselected
+     * states
+     */
+    this.toggle = false
+    /**
+     * Sets the selected state. When false, displays the default icon. When true,
+     * displays the selected icon, or the default icon If no `slot="selected"`
+     * icon is provided.
+     */
+    this.selected = false
+    this.type = 'submit'
+    this.value = ''
     this.flipIcon = isRtl(this, this.flipIconInRtl)
-    this.showFocusRing = false
-    this.showRipple = false
-    this.getRipple = () => {
-      this.showRipple = true
-      return this.ripple
-    }
-    this.renderRipple = () => {
-      return y`<md-ripple ?disabled="${this.disabled}"></md-ripple>`
+    /** @private */
+    this[_a] = this /* needed for closure */.attachInternals()
+  }
+  get name() {
+    return this.getAttribute('name') ?? ''
+  }
+  set name(name) {
+    this.setAttribute('name', name)
+  }
+  /**
+   * The associated form element with which this element's value will submit.
+   */
+  get form() {
+    return this[internals].form
+  }
+  /**
+   * The labels this element is associated with.
+   */
+  get labels() {
+    return this[internals].labels
+  }
+  /**
+   * Link buttons cannot be disabled.
+   */
+  willUpdate() {
+    if (this.href) {
+      this.disabled = false
     }
   }
   render() {
-    return y`<button
-        class="md3-icon-button ${o(this.getRenderClasses())}"
-        aria-label="${l(this.ariaLabel)}"
-        aria-haspopup="${l(this.ariaHasPopup)}"
-        ?disabled="${this.disabled}"
-        @focus="${this.handleFocus}"
-        @blur="${this.handleBlur}"
-        @pointerdown="${this.handlePointerDown}"
-        ${ripple(this.getRipple)}>
+    const tag = this.href ? s`div` : s`button`
+    // Needed for closure conformance
+    const { ariaLabel, ariaHasPopup, ariaExpanded } = this
+    const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected
+    const ariaPressedValue = !this.toggle ? T : this.selected
+    let ariaLabelValue = T
+    if (!this.href) {
+      ariaLabelValue =
+        hasToggledAriaLabel && this.selected
+          ? this.ariaLabelSelected
+          : ariaLabel
+    }
+    return n`<${tag}
+        class="icon-button ${e$1(this.getRenderClasses())}"
+        id="button"
+        aria-label="${ariaLabelValue || T}"
+        aria-haspopup="${(!this.href && ariaHasPopup) || T}"
+        aria-expanded="${(!this.href && ariaExpanded) || T}"
+        aria-pressed="${ariaPressedValue}"
+        ?disabled="${!this.href && this.disabled}"
+        @click="${this.handleClick}">
         ${this.renderFocusRing()}
-        ${n(this.showRipple, this.renderRipple)}
-        ${this.renderIcon()}
+        ${this.renderRipple()}
+        ${!this.selected ? this.renderIcon() : T}
+        ${this.selected ? this.renderSelectedIcon() : T}
         ${this.renderTouchTarget()}
-  </button>`
+        ${this.href && this.renderLink()}
+  </${tag}>`
+  }
+  renderLink() {
+    // Needed for closure conformance
+    const { ariaLabel } = this
+    return x`
+      <a class="link"
+        id="link"
+        href="${this.href}"
+        target="${this.target || T}"
+        aria-label="${ariaLabel || T}"
+      ></a>
+    `
   }
   getRenderClasses() {
     return {
-      'md3-icon-button--flip-icon': this.flipIcon,
+      'flip-icon': this.flipIcon,
+      selected: this.toggle && this.selected,
     }
   }
   renderIcon() {
-    // Note, it's important not to render the icon property as a slot fallback
-    // to avoid any whitespace from overridding it.
-    return y`<md-icon class="md3-icon-button__icon"><slot></slot></md-icon>`
+    return x`<span class="icon"><slot></slot></span>`
+  }
+  renderSelectedIcon() {
+    // Use default slot as fallback to not require specifying multiple icons
+    return x`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`
   }
   renderTouchTarget() {
-    return y`<span class="md3-icon-button__touch"></span>`
+    return x`<span class="touch"></span>`
   }
   renderFocusRing() {
-    return y`<md-focus-ring .visible="${this.showFocusRing}"></md-focus-ring>`
+    return x`<md-focus-ring part="focus-ring" for=${
+      this.href ? 'link' : 'button'
+    }></md-focus-ring>`
+  }
+  renderRipple() {
+    return x`<md-ripple
+      for=${this.href ? 'link' : T}
+      ?disabled="${!this.href && this.disabled}"
+    ></md-ripple>`
   }
   connectedCallback() {
     this.flipIcon = isRtl(this, this.flipIconInRtl)
     super.connectedCallback()
   }
-  handlePointerDown() {
-    pointerPress()
-    this.showFocusRing = shouldShowStrongFocus()
-  }
-  handleFocus() {
-    this.showFocusRing = shouldShowStrongFocus()
-  }
-  handleBlur() {
-    this.showFocusRing = false
+  async handleClick(event) {
+    // Allow the event to propagate
+    await 0
+    if (!this.toggle || this.disabled || event.defaultPrevented) {
+      return
+    }
+    this.selected = !this.selected
+    this.dispatchEvent(
+      new InputEvent('input', { bubbles: true, composed: true })
+    )
+    // Bubbles but does not compose to mimic native browser <input> & <select>
+    // Additionally, native change event is not an InputEvent.
+    this.dispatchEvent(new Event('change', { bubbles: true }))
   }
 }
+_a = internals
+;(() => {
+  requestUpdateOnAriaChange(IconButton)
+  setupFormSubmitter(IconButton)
+})()
+/** @nocollapse */
+IconButton.formAssociated = true
+/** @nocollapse */
+IconButton.shadowRootOptions = { mode: 'open', delegatesFocus: true }
 __decorate(
-  [e$8({ type: Boolean, reflect: true }), __metadata('design:type', Object)],
+  [n$3({ type: Boolean, reflect: true })],
   IconButton.prototype,
   'disabled',
   void 0
 )
 __decorate(
-  [e$8({ type: Boolean }), __metadata('design:type', Object)],
+  [n$3({ type: Boolean, attribute: 'flip-icon-in-rtl' })],
   IconButton.prototype,
   'flipIconInRtl',
   void 0
 )
+__decorate([n$3()], IconButton.prototype, 'href', void 0)
+__decorate([n$3()], IconButton.prototype, 'target', void 0)
 __decorate(
-  [t$3(), __metadata('design:type', Boolean)],
-  IconButton.prototype,
-  'flipIcon',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-label' }),
-    __metadata('design:type', String),
-  ],
-  IconButton.prototype,
-  'ariaLabel',
-  void 0
-)
-__decorate(
-  [
-    ariaProperty,
-    e$8({ type: String, attribute: 'data-aria-haspopup' }),
-    __metadata('design:type', String),
-  ],
-  IconButton.prototype,
-  'ariaHasPopup',
-  void 0
-)
-__decorate(
-  [i$2('button'), __metadata('design:type', HTMLElement)],
-  IconButton.prototype,
-  'buttonElement',
-  void 0
-)
-__decorate(
-  [e$7('md-ripple'), __metadata('design:type', Promise)],
-  IconButton.prototype,
-  'ripple',
-  void 0
-)
-__decorate(
-  [t$3(), __metadata('design:type', Object)],
+  [n$3({ attribute: 'aria-label-selected' })],
   IconButton.prototype,
-  'showFocusRing',
+  'ariaLabelSelected',
   void 0
 )
+__decorate([n$3({ type: Boolean })], IconButton.prototype, 'toggle', void 0)
 __decorate(
-  [t$3(), __metadata('design:type', Object)],
+  [n$3({ type: Boolean, reflect: true })],
   IconButton.prototype,
-  'showRipple',
+  'selected',
   void 0
 )
+__decorate([n$3()], IconButton.prototype, 'type', void 0)
+__decorate([n$3()], IconButton.prototype, 'value', void 0)
+__decorate([r$3()], IconButton.prototype, 'flipIcon', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$1 = i$5`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:max(48px,var(--_container-size));width:max(48px,var(--_container-size));align-items:center;justify-content:center}:host([disabled]){pointer-events:none}.md3-icon-button{align-items:center;border:none;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;outline:none;position:relative;text-decoration:none;user-select:none;z-index:0;height:var(--_container-size);width:var(--_container-size);border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-icon-button__icon{--md-icon-size:var(--_icon-size);--md-icon-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.md3-icon-button--flip-icon .md3-icon-button__icon{transform:scaleX(-1)}.md3-icon-button__icon{display:inline-flex}.md3-icon-button__link{height:100%;outline:none;position:absolute;width:100%}.md3-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}/*# sourceMappingURL=shared-styles.css.map */
+const styles$2 = i$4`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host([disabled]){--_disabled-icon-opacity: 1}}/*# sourceMappingURL=shared-styles.css.map */
 `
 
 /**
@@ -24660,7 +26140,7 @@ const styles$1 = i$5`:host{display:inline-flex;outline:none;-webkit-tap-highligh
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles = i$5`:host{--_state-layer-shape-start-start: var(--md-icon-button-state-layer-shape-start-start, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-start-end: var(--md-icon-button-state-layer-shape-start-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-end: var(--md-icon-button-state-layer-shape-end-end, var(--md-icon-button-state-layer-shape, 9999px));--_state-layer-shape-end-start: var(--md-icon-button-state-layer-shape-end-start, var(--md-icon-button-state-layer-shape, 9999px));--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, rgb(var(--md-sys-color-on-surface-rgb, 28, 27, 31), 0.38));--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-color: var(--md-icon-button-selected-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-focus-state-layer-opacity: var(--md-icon-button-selected-focus-state-layer-opacity, 0.12);--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-icon-button-state-layer-size, 40px);--_unselected-focus-icon-color: var(--md-icon-button-unselected-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-color: var(--md-icon-button-unselected-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-focus-state-layer-opacity: var(--md-icon-button-unselected-focus-state-layer-opacity, 0.12);--_unselected-hover-icon-color: var(--md-icon-button-unselected-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-color: var(--md-icon-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-hover-state-layer-opacity: var(--md-icon-button-unselected-hover-state-layer-opacity, 0.08);--_unselected-icon-color: var(--md-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-icon-color: var(--md-icon-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-state-layer-color: var(--md-icon-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_unselected-pressed-state-layer-opacity: var(--md-icon-button-unselected-pressed-state-layer-opacity, 0.12);height:max(48px,var(--_state-layer-size));width:max(48px,var(--_state-layer-size));--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_state-layer-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_state-layer-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_state-layer-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_state-layer-shape-end-start)))))}.md3-icon-button--standard{background-color:rgba(0,0,0,0);color:var(--_unselected-icon-color);height:var(--_state-layer-size);width:var(--_state-layer-size);--md-ripple-focus-color:var(--_unselected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_unselected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_unselected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_unselected-pressed-state-layer-opacity);--md-ripple-shape:var(--_state-layer-shape-start-start)}.md3-icon-button--standard:hover{color:var(--_unselected-hover-icon-color)}.md3-icon-button--standard:focus{color:var(--_unselected-focus-icon-color)}.md3-icon-button--standard:active{color:var(--_unselected-pressed-icon-color)}.md3-icon-button--standard:disabled{color:var(--_disabled-icon-color)}.md3-icon-button--selected{--md-ripple-focus-color:var(--_selected-focus-state-layer-color);--md-ripple-focus-opacity:var(--_selected-focus-state-layer-opacity);--md-ripple-hover-color:var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity:var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color:var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_selected-pressed-state-layer-opacity)}.md3-icon-button--selected:not(:disabled){color:var(--_selected-icon-color)}.md3-icon-button--selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.md3-icon-button--selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.md3-icon-button--selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */
+const styles$1 = i$4`:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 0.38);--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-height: var(--md-icon-button-state-layer-height, 40px);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-width: var(--md-icon-button-state-layer-width, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: 0;--_container-shape-start-end: 0;--_container-shape-end-end: 0;--_container-shape-end-start: 0;--_container-height: 0;--_container-width: 0;height:var(--_state-layer-height);width:var(--_state-layer-width)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-height))/2) max(0px,(48px - var(--_state-layer-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:disabled{color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:disabled .icon{opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */
 `
 
 /**
@@ -24683,21 +26163,67 @@ const styles = i$5`:host{--_state-layer-shape-start-start: var(--md-icon-button-
  * - Add to Favorites
  * - Print
  */
-let MdStandardIconButton = class MdStandardIconButton extends IconButton {
+let MdIconButton = class MdIconButton extends IconButton {
   getRenderClasses() {
     return {
       ...super.getRenderClasses(),
-      'md3-icon-button--standard': true,
+      standard: true,
     }
   }
 }
-MdStandardIconButton.styles = [styles$1, styles]
-MdStandardIconButton = __decorate(
-  [e$9('md-standard-icon-button')],
-  MdStandardIconButton
-)
+MdIconButton.styles = [styles$2, styles$1]
+MdIconButton = __decorate([t$3('md-icon-button')], MdIconButton)
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/265336902): add docs
+ */
+class Icon extends s$1 {
+  render() {
+    return x`<slot></slot>`
+  }
+  connectedCallback() {
+    super.connectedCallback()
+    const ariaHidden = this.getAttribute('aria-hidden')
+    if (ariaHidden === 'false') {
+      // Allow the user to set `aria-hidden="false"` to create an icon that is
+      // announced by screenreaders.
+      this.removeAttribute('aria-hidden')
+      return
+    }
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
+  }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles = i$4`:host{font-size:24px;width:24px;height:24px;color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @final
+ * @suppress {visibility}
+ */
+let MdIcon = class MdIcon extends Icon {}
+/** @nocollapse */
+MdIcon.styles = [styles]
+MdIcon = __decorate([t$3('md-icon')], MdIcon)
 
-let CollapseUi = class CollapseUi extends s$4 {
+let CollapseUi = class CollapseUi extends s$8 {
   constructor() {
     super(...arguments)
     this.service = connectState_1(
@@ -24707,22 +26233,22 @@ let CollapseUi = class CollapseUi extends s$4 {
     )
   }
   render() {
-    return y`
-      <md-standard-icon-button @click=${this.toggleUi}>
+    return y$2`
+      <md-icon-button @click=${this.toggleUi}>
         <img src="${optimizedSVGDataUri$6}" alt="toggle" class="icon" />
-      </md-standard-icon-button>
+      </md-icon-button>
     `
   }
   toggleUi() {
     this.service.value.send('TOGGLE_UI_COLLAPSED')
   }
 }
-CollapseUi.styles = i$5`
+CollapseUi.styles = i$8`
     .icon {
       width: 100%;
     }
   `
-CollapseUi = __decorate([e$9('collapse-ui')], CollapseUi)
+CollapseUi = __decorate([e$g('collapse-ui')], CollapseUi)
 
 function updateDrawer(context) {
   context.drawer.opened = !context.uiCollapsed
diff --git a/src/UI/reference-ui/package-lock.json b/src/UI/reference-ui/package-lock.json
index 13879f95..34247e42 100644
--- a/src/UI/reference-ui/package-lock.json
+++ b/src/UI/reference-ui/package-lock.json
@@ -12,7 +12,7 @@
         "@babel/runtime": "^7.17.6",
         "@itk-viewer/icons": "^11.14.1",
         "@lit-labs/context": "^0.2.0",
-        "@material/web": "^1.0.0-pre.4",
+        "@material/web": "^1.0.1",
         "itk-viewer-color-maps": "^1.2.0",
         "itk-viewer-transfer-function-editor": "^1.2.5",
         "lit": "^2.4.0",
@@ -640,9 +640,9 @@
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz",
-      "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
+      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
     },
     "node_modules/@lit/reactive-element": {
       "version": "1.6.1",
@@ -653,14 +653,50 @@
       }
     },
     "node_modules/@material/web": {
-      "version": "1.0.0-pre.4",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.0-pre.4.tgz",
-      "integrity": "sha512-zafEDXi376L8jdeQX57NF8IbEeVQTOdYrWR3bfDl8JhhOT+mOU1XWhwslqbN0QANvDYrjH5k0/RwiSjBjIBpeA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.1.tgz",
+      "integrity": "sha512-AilQTWdp+lgPzoUGNj/CyrMsULLdzhHiiYs6XXSIpX/t/eGQkiPP4CAwvjqANuV+YZC0hLIo+s64BIgZo8Ghkw==",
       "dependencies": {
-        "lit": "^2.3.0",
+        "lit": "^2.7.4 || ^3.0.0",
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@material/web/node_modules/@lit/reactive-element": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.2.tgz",
+      "integrity": "sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.2"
+      }
+    },
+    "node_modules/@material/web/node_modules/lit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
+      "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.0",
+        "lit-element": "^4.0.0",
+        "lit-html": "^3.1.0"
+      }
+    },
+    "node_modules/@material/web/node_modules/lit-element": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.2.tgz",
+      "integrity": "sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.2",
+        "@lit/reactive-element": "^2.0.0",
+        "lit-html": "^3.1.0"
+      }
+    },
+    "node_modules/@material/web/node_modules/lit-html": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.0.tgz",
+      "integrity": "sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/@rollup/plugin-commonjs": {
       "version": "21.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-21.1.0.tgz",
@@ -3394,9 +3430,9 @@
       }
     },
     "@lit-labs/ssr-dom-shim": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.0.0.tgz",
-      "integrity": "sha512-ic93MBXfApIFTrup4a70M/+ddD8xdt2zxxj9sRwHQzhS9ag/syqkD8JPdTXsc1gUy2K8TTirhlCqyTEM/sifNw=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
+      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
     },
     "@lit/reactive-element": {
       "version": "1.6.1",
@@ -3407,12 +3443,50 @@
       }
     },
     "@material/web": {
-      "version": "1.0.0-pre.4",
-      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.0-pre.4.tgz",
-      "integrity": "sha512-zafEDXi376L8jdeQX57NF8IbEeVQTOdYrWR3bfDl8JhhOT+mOU1XWhwslqbN0QANvDYrjH5k0/RwiSjBjIBpeA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@material/web/-/web-1.0.1.tgz",
+      "integrity": "sha512-AilQTWdp+lgPzoUGNj/CyrMsULLdzhHiiYs6XXSIpX/t/eGQkiPP4CAwvjqANuV+YZC0hLIo+s64BIgZo8Ghkw==",
       "requires": {
-        "lit": "^2.3.0",
+        "lit": "^2.7.4 || ^3.0.0",
         "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "@lit/reactive-element": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.2.tgz",
+          "integrity": "sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==",
+          "requires": {
+            "@lit-labs/ssr-dom-shim": "^1.1.2"
+          }
+        },
+        "lit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.0.tgz",
+          "integrity": "sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==",
+          "requires": {
+            "@lit/reactive-element": "^2.0.0",
+            "lit-element": "^4.0.0",
+            "lit-html": "^3.1.0"
+          }
+        },
+        "lit-element": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.2.tgz",
+          "integrity": "sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==",
+          "requires": {
+            "@lit-labs/ssr-dom-shim": "^1.1.2",
+            "@lit/reactive-element": "^2.0.0",
+            "lit-html": "^3.1.0"
+          }
+        },
+        "lit-html": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.0.tgz",
+          "integrity": "sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==",
+          "requires": {
+            "@types/trusted-types": "^2.0.2"
+          }
+        }
       }
     },
     "@rollup/plugin-commonjs": {
diff --git a/src/UI/reference-ui/package.json b/src/UI/reference-ui/package.json
index f044010c..44a0e7a6 100644
--- a/src/UI/reference-ui/package.json
+++ b/src/UI/reference-ui/package.json
@@ -43,7 +43,7 @@
     "@babel/runtime": "^7.17.6",
     "@itk-viewer/icons": "^11.14.1",
     "@lit-labs/context": "^0.2.0",
-    "@material/web": "^1.0.0-pre.4",
+    "@material/web": "^1.0.1",
     "itk-viewer-color-maps": "^1.2.0",
     "itk-viewer-transfer-function-editor": "^1.2.5",
     "lit": "^2.4.0",
diff --git a/src/UI/reference-ui/src/Layers/createLayerInterface.js b/src/UI/reference-ui/src/Layers/createLayerInterface.js
index aff0c6fa..8073dc09 100644
--- a/src/UI/reference-ui/src/Layers/createLayerInterface.js
+++ b/src/UI/reference-ui/src/Layers/createLayerInterface.js
@@ -99,34 +99,35 @@ function createLayerEntry(context, name, layer) {
     layerBBoxButtonInput.checked = actorContext.bbox
   })
 
-  if (context.layers.showSaveRoiButton) {
-    const downloadImage = document.createElement('div')
-    downloadImage.innerHTML = `
+  // if (context.layers.showSaveRoiButton) {
+  const downloadImage = document.createElement('div')
+  downloadImage.innerHTML = `
   <input type="checkbox" checked id=${context.id}-download-image" class="${style.toggleInput}" />
   <label itk-vtk-tooltip itk-vtk-tooltip-top itk-vtk-tooltip-content="Save ROI" class="${style.toggleButton}" for="${context.id}-download-image">
     <img style="height: 23px" src="${downloadIconDataUri}" />
   </label>
   `
-    const downloadImageLabel = downloadImage.children[1]
-    downloadImage.style.height = '23px'
-    applyContrastSensitiveStyleToElement(
-      context,
-      'invertibleButton',
-      downloadImageLabel
-    )
-    imageIcons.appendChild(downloadImage)
-    downloadImage.addEventListener('click', event => {
-      event.preventDefault()
-      event.stopPropagation()
-      context.service.send({
-        type: 'DOWNLOAD_IMAGE',
-        data: {
-          name: context.images.selectedName,
-          layerName: name,
-        },
-      })
-    })
-  }
+  const downloadImageLabel = downloadImage.children[1]
+  downloadImage.style.height = '23px'
+  applyContrastSensitiveStyleToElement(
+    context,
+    'invertibleButton',
+    downloadImageLabel
+  )
+  imageIcons.appendChild(downloadImage)
+  downloadImage.addEventListener('click', event => {
+    event.preventDefault()
+    event.stopPropagation()
+    // context.service.send({
+    //   type: 'DOWNLOAD_IMAGE',
+    //   data: {
+    //     name: context.images.selectedName,
+    //     layerName: name,
+    //   },
+    // })
+    console.log('Download image')
+  })
+  // }
 
   const icon = makeHtml(`<layer-icon class="${style.layerIcon}"></layer-icon>`)
   icon.layer = layer
diff --git a/src/UI/reference-ui/src/Layers/layerSettings.ts b/src/UI/reference-ui/src/Layers/layerSettings.ts
index bd2f2d2b..201ac6f1 100644
--- a/src/UI/reference-ui/src/Layers/layerSettings.ts
+++ b/src/UI/reference-ui/src/Layers/layerSettings.ts
@@ -6,7 +6,6 @@ import { ContextConsumer } from '@lit-labs/context'
 import '@material/web/menu/menu.js'
 import { MdMenu } from '@material/web/menu/menu.js'
 import '@material/web/menu/menu-item.js'
-import '@material/web/menu/sub-menu-item.js'
 import { makeHtml } from '../utils'
 import style from '../ItkVtkViewer.module.css'
 import { viewerContext } from '../context'
@@ -46,8 +45,8 @@ class LayerSettings extends LitElement {
     this.floatingAnchor.style.top = `${top}px`
     this.floatingAnchor.style.left = `${left}px`
     if (this.menuRef.value) {
-      this.menuRef.value.anchor = this.floatingAnchor
       this.floatingAnchor.appendChild(this.menuRef.value)
+      this.menuRef.value.anchorElement = this.floatingAnchor
       this.menuRef.value.show()
     }
   }
@@ -84,37 +83,51 @@ class LayerSettings extends LitElement {
       >
         <slot></slot>
         <div ${ref(this.anchorRef)} style="position:relative; z-index: 4000;">
-          <md-menu ${ref(this.menuRef)}>
+          <md-menu ${ref(this.menuRef)} style="min-width: 280px;">
             ${map(
               this.otherImages,
               name =>
                 html`
                   <md-menu-item
-                    headline="Checkerboard compare with ${name}"
                     @click=${() => this.compareWith(name, 'checkerboard')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Checkerboard compare with ${name}"
+                    </div>
+                  </md-menu-item>
                   <md-menu-item
-                    headline="Green-Magenta compare with ${name}"
                     @click=${() => this.compareWith(name, 'green-magenta')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Green-Magenta compare with ${name}"
+                    </div>
+                  </md-menu-item>
                   <md-menu-item
-                    headline="Cyan-Red compare with ${name}"
                     @click=${() => this.compareWith(name, 'cyan-red')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Cyan-Red compare with ${name}"
+                    </div>
+                  </md-menu-item>
                   <md-menu-item
-                    headline="Cyan-Magenta compare with ${name}"
                     @click=${() => this.compareWith(name, 'cyan-magenta')}
-                  ></md-menu-item>
-                  <md-menu-item
-                    headline="Blend compare with ${name}"
-                    @click=${() => this.compareWith(name, 'blend')}
-                  ></md-menu-item>
+                  >
+                    <div slot="headline">
+                      "Cyan-Magenta compare with ${name}"
+                    </div>
+                  </md-menu-item>
+                  <md-menu-item @click=${() => this.compareWith(name, 'blend')}>
+                    <div slot="headline">
+                      "Blend compare with ${name}"
+                    </div>
+                  </md-menu-item>
                 `
             )}
-            <md-menu-item
-              headline="Stop comparing"
-              @click=${this.stopComparing}
-            ></md-menu-item>
+            <md-menu-item @click=${this.stopComparing}>
+              <div slot="headline">
+                "Stop comparing"
+              </div>
+            </md-menu-item>
           </md-menu>
         </div>
       </div>
diff --git a/src/UI/reference-ui/src/collapse-ui.ts b/src/UI/reference-ui/src/collapse-ui.ts
index 79f48a69..4669e86f 100644
--- a/src/UI/reference-ui/src/collapse-ui.ts
+++ b/src/UI/reference-ui/src/collapse-ui.ts
@@ -1,6 +1,7 @@
 import { LitElement, html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
-import '@material/web/iconbutton/standard-icon-button.js'
+import '@material/web/iconbutton/icon-button.js'
+import '@material/web/icon/icon.js'
 import { toggleIconDataUri } from '@itk-viewer/icons'
 import { connectState } from 'xstate-lit/dist/select-state'
 
@@ -22,9 +23,9 @@ class CollapseUi extends LitElement {
 
   render() {
     return html`
-      <md-standard-icon-button @click=${this.toggleUi}>
+      <md-icon-button @click=${this.toggleUi}>
         <img src="${toggleIconDataUri}" alt="toggle" class="icon" />
-      </md-standard-icon-button>
+      </md-icon-button>
     `
   }
 
diff --git a/src/UI/reference-ui/src/createInterface.js b/src/UI/reference-ui/src/createInterface.js
index 23706bd3..a14df970 100644
--- a/src/UI/reference-ui/src/createInterface.js
+++ b/src/UI/reference-ui/src/createInterface.js
@@ -1,5 +1,5 @@
 import style from './ItkVtkViewer.module.css'
-import '@material/web/navigationdrawer/navigation-drawer.js'
+import '@material/web/labs/navigationdrawer/navigation-drawer.js'
 import './serviceContext'
 import './collapse-ui'
 import { setContext } from './context'

From 97503c2c29666509d390bca8cf23b7e9f45bb880 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 4 Dec 2023 20:12:50 -0500
Subject: [PATCH 7/7] feat(createLayerInterface): show dialog on save roi

---
 .../dist/referenceUIMachineOptions.js         | 11823 +++++++++-------
 .../reference-ui/src/ItkVtkViewer.module.css  |     5 +
 .../src/Layers/createLayerInterface.js        |    56 +-
 3 files changed, 6619 insertions(+), 5265 deletions(-)

diff --git a/src/UI/reference-ui/dist/referenceUIMachineOptions.js b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
index c58fdc0e..68db27de 100644
--- a/src/UI/reference-ui/dist/referenceUIMachineOptions.js
+++ b/src/UI/reference-ui/dist/referenceUIMachineOptions.js
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
 }
 
 var css_248z$1 =
-  ".ItkVtkViewer-module_loading__11c63 {\n  border: 16px solid #f3f3f3; /* Light grey */\n  border-top: 16px solid #3498db; /* Blue */\n  border-radius: 50%;\n  width: 120px;\n  height: 120px;\n  position: absolute;\n  left: calc(50% - 60px);\n  top: calc(50% - 60px);\n  animation: ItkVtkViewer-module_spin__mT5S6 2s linear infinite;\n  box-sizing: border-box;\n}\n\n@keyframes ItkVtkViewer-module_spin__mT5S6 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_viewContainer__-5zNz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  background: rgba(128, 128, 128, 0.8);\n}\n\n.ItkVtkViewer-module_viewport__BMgOt {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n}\n\n.ItkVtkViewer-module_uiContainer__CiawP {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n\n  height: -moz-fit-content;\n\n  height: -webkit-fit-content;\n\n  height: fit-content;\n  max-height: 100%;\n\n  display: flex;\n\n  padding: 6px 0 0 6px;\n  border: 0px;\n  box-sizing: border-box;\n\n  --md-navigation-drawer-container-shape-start-end: 0;\n  --md-navigation-drawer-container-shape-end-end: 0;\n  --md-navigation-drawer-container-color: rgba(128, 128, 128, 0.5);\n}\n\n.ItkVtkViewer-module_drawer__b66eM {\n  overflow: hidden auto;\n}\n\n.ItkVtkViewer-module_floater__sSNkw {\n  position: absolute;\n  z-index: 3000;\n}\n\n.ItkVtkViewer-module_uiGroup__ad-WI {\n  background: rgba(128, 128, 128, 0.5);\n  border-radius: 4px;\n  margin: 2px;\n}\n\n.ItkVtkViewer-module_uiRow__KTQa8 {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  padding: 5px;\n}\n\n.ItkVtkViewer-module_mainUIRow__vTXih {\n  justify-content: space-around;\n  max-width: 420px;\n}\n\n.ItkVtkViewer-module_planeUIRow__D5gCh {\n  background: rgba(128, 128, 128, 0.5);\n}\n\n.ItkVtkViewer-module_layers__ZF-gN {\n  flex-wrap: wrap;\n}\n\n.ItkVtkViewer-module_progress__WydXH {\n  color: white;\n  font-size: 200%;\n  height: 100vh;\n  width: 100vw;\n  text-align: center;\n  vertical-align: middle;\n  line-height: 100vh;\n}\n\n.ItkVtkViewer-module_piecewiseWidget__5gKl5 {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_logo__9ErCF {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  height: 2em;\n  width: 2em;\n  cursor: pointer;\n  z-index: 100;\n}\n\n.ItkVtkViewer-module_fpsMonitor__bnwqr {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  border-radius: 5px;\n  background: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  z-index: 101;\n}\n\n[itk-vtk-tooltip] {\n  position: relative;\n}\n[itk-vtk-tooltip]::before {\n  content: attr(itk-vtk-tooltip-content);\n  visibility: hidden;\n  position: absolute;\n  top: 50%;\n  right: calc(100% + 16px);\n  width: 400%;\n  padding: 4px 6px;\n  text-align: center;\n  text-transform: none;\n  font-size: 0.9em;\n  font-family: monospace;\n  border-radius: 3px;\n  background: rgba(0.9, 0.9, 0.9, 0.95);\n  color: white;\n  opacity: 0;\n  transform: translate(15px, -50%);\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  transition-delay: 0.8s;\n  z-index: 3000;\n}\n\n[itk-vtk-tooltip]:hover::before {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(0, -50%);\n}\n\n[itk-vtk-tooltip-bottom]::before {\n  top: calc(100% + 16px);\n  left: 50%;\n  right: initial;\n  transform: translate(-50%, -15px);\n}\n[itk-vtk-tooltip-bottom]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-right]::before {\n  top: 50%;\n  left: calc(100% + 16px);\n  right: initial;\n  transform: translate(-15px, -50%);\n}\n[itk-vtk-tooltip-right]:hover::before {\n  transform: translate(0, -50%);\n}\n[itk-vtk-tooltip-left]::before {\n  top: -50%;\n  right: 50%;\n  left: initial;\n}\n\n[itk-vtk-tooltip-top-screenshot]::before {\n  top: initial;\n  left: 260%;\n  right: initial;\n  bottom: calc(100% + 8px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-screenshot]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-annotations]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-annotations]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-axes]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-axes]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n[itk-vtk-tooltip-top-fullscreen]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top]::before {\n  top: initial;\n  left: 60%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n[itk-vtk-tooltip-top-input]::before {\n  top: initial;\n  right: initial;\n  bottom: 25%;\n  transform: translate(-50%, 15px);\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n}\n\n.ItkVtkViewer-module_layerEntryCommon__oIE1u {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: space-between;\n  border-style: solid;\n  border-width: 2px;\n}\n\n.ItkVtkViewer-module_layerEntryBrightBG__qXyI2 {\n  border-color: #666;\n}\n\n.ItkVtkViewer-module_layerEntryDarkBG__BmiCj {\n  border-color: #aaa;\n}\n\n.ItkVtkViewer-module_layerLabelCommon__kTiO9 {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  z-index: 1000;\n\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n}\n\n.ItkVtkViewer-module_layerLabelBrightBG__vAfex {\n  color: black;\n}\n\n.ItkVtkViewer-module_layerLabelDarkBG__sM6Bg {\n  color: white;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc {\n  flex-basis: 2.5em;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_noFlexBasis__8d4hI {\n  flex-basis: auto;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 8px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_iconGroup__qqZrW {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_ldsRing__QT1wT {\n  display: inline-block;\n  position: relative;\n  width: 20px;\n  height: 20px;\n  margin-top: 4px;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  margin: 0;\n  border: 0.15em solid #000;\n  border-radius: 50%;\n  animation: ItkVtkViewer-module_ldsRing__QT1wT 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #000 transparent transparent transparent;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes ItkVtkViewer-module_ldsRing__QT1wT {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_tooltipButtonBrightBG__yffVf::before {\n}\n\n.ItkVtkViewer-module_tooltipButtonDarkBG__gEu0i::before {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_invertibleButtonBrightBG__VmIfT {\n}\n\n.ItkVtkViewer-module_invertibleButtonDarkBG__GoKgD {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 {\n  flex: 1;\n  width: 8m;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-right: 4px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ img {\n  width: 1.2em;\n  margin-top: 4px;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceEntry__zXMUS {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: self-start;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceLabelCommon__Ec-uc {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceLabelBrightBG__aYmfG {\n  color: black;\n}\n\n.ItkVtkViewer-module_distanceLabelDarkBG__kYXvI {\n  color: white;\n}\n\n.ItkVtkViewer-module_distanceInput__gyNaU {\n  background: transparent;\n  color: white;\n  font-size: 1em;\n  width: 80px;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 0px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 0px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_toggleInput__jHLTo {\n  margin: 0px;\n  width: 0;\n  opacity: 0;\n  box-sizing: content-box;\n}\n\n.ItkVtkViewer-module_toggleButton__qHhHZ {\n  cursor: pointer;\n  border-radius: 0.2em;\n  opacity: 0.45;\n}\n\ninput:checked.ItkVtkViewer-module_toggleInput__jHLTo + label {\n  opacity: 1;\n}\n\n.ItkVtkViewer-module_numberInput__pDxYH {\n  color: white;\n  background: transparent;\n  font-size: 1em;\n  padding-left: 2px;\n  width: 70px;\n}\n\n.ItkVtkViewer-module_selector__yw8l- {\n  display: flex;\n  direction: row;\n  font-size: 1.2em;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.ItkVtkViewer-module_disableInterface__CGB4S {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(40, 40, 40, 0.5);\n  padding: 5px;\n  margin-right: 2px;\n  border-radius: 5px 5px 0px 0px;\n  color: #777;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:hover + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(90, 90, 90, 0.5);\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:checked + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(127, 127, 127, 0.5);\n  color: #fff;\n}\n\n.ItkVtkViewer-module_componentVisibility__y1rRS {\n  position: relative;\n  top: -2px;\n  margin-left: 10px;\n}\n\nselect {\n  -moz-appearance: none;\n}\n\nselect option {\n  color: black;\n}\n\nselect:focus {\n  outline: none;\n  border: none;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderColumn__ZwISb {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 0 5px;\n}\n\n.ItkVtkViewer-module_sliderIcon__jfoL- {\n  width: 1.8em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 8px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderEntry__3r3gO {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.ItkVtkViewer-module_slider__eT9qm {\n  flex: 1;\n  min-height: 1rem;\n}\n\n.ItkVtkViewer-module_planeLabel__E1zOk {\n  padding-left: 6px;\n  padding: 2px;\n  display: block;\n  font-size: 1.1em;\n  font-family: monospace;\n  color: black;\n  border-width: 2px;\n  border-radius: 10%;\n}\n\n.ItkVtkViewer-module_xPlaneLabel__wK4Cb {\n  background-color: #ef5350;\n}\n\n.ItkVtkViewer-module_yPlaneLabel__rIm0j {\n  background-color: #fdd835;\n}\n\n.ItkVtkViewer-module_zPlaneLabel__94NL7 {\n  background-color: #4caf50;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ {\n  z-index: 1100;\n  position: relative;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ input {\n  position: absolute;\n  bottom: 20px;\n  left: -24px;\n  width: 12px;\n  writing-mode: bt-lr;\n  -webkit-appearance: slider-vertical;\n}\n\n.ItkVtkViewer-module_bigFileDrop__cZdkP {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: white;\n  background-image: url('./dropBG.jpg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border-radius: 10px;\n  width: 50px;\n  padding: calc(50vh - 2em) calc(50vw - 25px - 2em);\n}\n\n.ItkVtkViewer-module_fullscreenContainer__-H3c8 {\n  position: absolute;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  background: black;\n  margin: 0;\n  padding: 0;\n}\n\n.ItkVtkViewer-module_collapseButton__uzHPY {\n  position: absolute;\n  top: 0;\n  right: -48px;\n}\n\n.ItkVtkViewer-module_windowLevelButton__Lx0Tj {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 0px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_windowLevelButton__Lx0Tj img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_inputLabel__dDf8G {\n  line-height: 1.7;\n}\n"
+  ".ItkVtkViewer-module_loading__11c63 {\n  border: 16px solid #f3f3f3; /* Light grey */\n  border-top: 16px solid #3498db; /* Blue */\n  border-radius: 50%;\n  width: 120px;\n  height: 120px;\n  position: absolute;\n  left: calc(50% - 60px);\n  top: calc(50% - 60px);\n  animation: ItkVtkViewer-module_spin__mT5S6 2s linear infinite;\n  box-sizing: border-box;\n}\n\n@keyframes ItkVtkViewer-module_spin__mT5S6 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_viewContainer__-5zNz {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  background: rgba(128, 128, 128, 0.8);\n}\n\n.ItkVtkViewer-module_viewport__BMgOt {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n}\n\n.ItkVtkViewer-module_uiContainer__CiawP {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n\n  height: -moz-fit-content;\n\n  height: -webkit-fit-content;\n\n  height: fit-content;\n  max-height: 100%;\n\n  display: flex;\n\n  padding: 6px 0 0 6px;\n  border: 0px;\n  box-sizing: border-box;\n\n  --md-navigation-drawer-container-shape-start-end: 0;\n  --md-navigation-drawer-container-shape-end-end: 0;\n  --md-navigation-drawer-container-color: rgba(128, 128, 128, 0.5);\n}\n\n.ItkVtkViewer-module_drawer__b66eM {\n  overflow: hidden auto;\n}\n\n.ItkVtkViewer-module_floater__sSNkw {\n  position: absolute;\n  z-index: 3000;\n}\n\n.ItkVtkViewer-module_uiGroup__ad-WI {\n  background: rgba(128, 128, 128, 0.5);\n  border-radius: 4px;\n  margin: 2px;\n}\n\n.ItkVtkViewer-module_uiRow__KTQa8 {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  padding: 5px;\n}\n\n.ItkVtkViewer-module_mainUIRow__vTXih {\n  justify-content: space-around;\n  max-width: 420px;\n}\n\n.ItkVtkViewer-module_planeUIRow__D5gCh {\n  background: rgba(128, 128, 128, 0.5);\n}\n\n.ItkVtkViewer-module_layers__ZF-gN {\n  flex-wrap: wrap;\n}\n\n.ItkVtkViewer-module_progress__WydXH {\n  color: white;\n  font-size: 200%;\n  height: 100vh;\n  width: 100vw;\n  text-align: center;\n  vertical-align: middle;\n  line-height: 100vh;\n}\n\n.ItkVtkViewer-module_piecewiseWidget__5gKl5 {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: 3px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_logo__9ErCF {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  height: 2em;\n  width: 2em;\n  cursor: pointer;\n  z-index: 100;\n}\n\n.ItkVtkViewer-module_fpsMonitor__bnwqr {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  border-radius: 5px;\n  background: rgba(255, 255, 255, 0.6);\n  cursor: pointer;\n  z-index: 101;\n}\n\n[itk-vtk-tooltip] {\n  position: relative;\n}\n[itk-vtk-tooltip]::before {\n  content: attr(itk-vtk-tooltip-content);\n  visibility: hidden;\n  position: absolute;\n  top: 50%;\n  right: calc(100% + 16px);\n  width: 400%;\n  padding: 4px 6px;\n  text-align: center;\n  text-transform: none;\n  font-size: 0.9em;\n  font-family: monospace;\n  border-radius: 3px;\n  background: rgba(0.9, 0.9, 0.9, 0.95);\n  color: white;\n  opacity: 0;\n  transform: translate(15px, -50%);\n  transition-property: all;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  transition-delay: 0.8s;\n  z-index: 3000;\n}\n\n[itk-vtk-tooltip]:hover::before {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(0, -50%);\n}\n\n[itk-vtk-tooltip-bottom]::before {\n  top: calc(100% + 16px);\n  left: 50%;\n  right: initial;\n  transform: translate(-50%, -15px);\n}\n[itk-vtk-tooltip-bottom]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-right]::before {\n  top: 50%;\n  left: calc(100% + 16px);\n  right: initial;\n  transform: translate(-15px, -50%);\n}\n[itk-vtk-tooltip-right]:hover::before {\n  transform: translate(0, -50%);\n}\n[itk-vtk-tooltip-left]::before {\n  top: -50%;\n  right: 50%;\n  left: initial;\n}\n\n[itk-vtk-tooltip-top-screenshot]::before {\n  top: initial;\n  left: 260%;\n  right: initial;\n  bottom: calc(100% + 8px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-screenshot]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-annotations]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-annotations]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-axes]::before {\n  top: initial;\n  left: 160%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top-axes]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n[itk-vtk-tooltip-top-fullscreen]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top]::before {\n  top: initial;\n  left: 60%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n}\n[itk-vtk-tooltip-top]:hover::before {\n  transform: translate(-50%, 0);\n}\n[itk-vtk-tooltip-top-fullscreen]::before {\n  top: initial;\n  left: 120%;\n  right: initial;\n  bottom: calc(100% + 10px);\n  transform: translate(-50%, 15px);\n  width: 400%;\n}\n[itk-vtk-tooltip-top-input]::before {\n  top: initial;\n  right: initial;\n  bottom: 25%;\n  transform: translate(-50%, 15px);\n  width: -moz-fit-content;\n  width: -webkit-fit-content;\n  width: fit-content;\n}\n\n.ItkVtkViewer-module_layerEntryCommon__oIE1u {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: space-between;\n  border-style: solid;\n  border-width: 2px;\n}\n\n.ItkVtkViewer-module_layerEntryBrightBG__qXyI2 {\n  border-color: #666;\n}\n\n.ItkVtkViewer-module_layerEntryDarkBG__BmiCj {\n  border-color: #aaa;\n}\n\n.ItkVtkViewer-module_layerLabelCommon__kTiO9 {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  z-index: 1000;\n\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: center;\n}\n\n.ItkVtkViewer-module_layerLabelBrightBG__vAfex {\n  color: black;\n}\n\n.ItkVtkViewer-module_layerLabelDarkBG__sM6Bg {\n  color: white;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc {\n  flex-basis: 2.5em;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_visibleButton__ezrIc img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_noFlexBasis__8d4hI {\n  flex-basis: auto;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_layerIcon__v-rxO img {\n  height: 1.2em;\n  width: 1.2em;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 8px;\n  padding-right: 6px;\n}\n\n.ItkVtkViewer-module_iconGroup__qqZrW {\n  display: inline-block;\n}\n\n.ItkVtkViewer-module_ldsRing__QT1wT {\n  display: inline-block;\n  position: relative;\n  width: 20px;\n  height: 20px;\n  margin-top: 4px;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div {\n  box-sizing: border-box;\n  display: block;\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  margin: 0;\n  border: 0.15em solid #000;\n  border-radius: 50%;\n  animation: ItkVtkViewer-module_ldsRing__QT1wT 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n  border-color: #000 transparent transparent transparent;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(1) {\n  animation-delay: -0.45s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(2) {\n  animation-delay: -0.3s;\n}\n.ItkVtkViewer-module_ldsRing__QT1wT div:nth-child(3) {\n  animation-delay: -0.15s;\n}\n@keyframes ItkVtkViewer-module_ldsRing__QT1wT {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.ItkVtkViewer-module_tooltipButtonBrightBG__yffVf::before {\n}\n\n.ItkVtkViewer-module_tooltipButtonDarkBG__gEu0i::before {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_invertibleButtonBrightBG__VmIfT {\n}\n\n.ItkVtkViewer-module_invertibleButtonDarkBG__GoKgD {\n  filter: invert(100%);\n  -webkit-filter: invert(100%);\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_screenshotButton__OL4Na img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_annotationsButton__Msb-p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_axesButton__k2H6p img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 {\n  flex: 1;\n  width: 8m;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_fullscreenButton__en3Z5 img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-right: 4px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_interpolationButton__2P0HJ img {\n  width: 1.2em;\n  margin-top: 4px;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_cropButton__ljwuU img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCropButton__SCGTH img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceEntry__zXMUS {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: self-start;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT {\n  flex: 1;\n  height: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceButton__NhxBT img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_distanceLabelCommon__Ec-uc {\n  border: none;\n  background: transparent;\n  font-size: 1.2em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_distanceLabelBrightBG__aYmfG {\n  color: black;\n}\n\n.ItkVtkViewer-module_distanceLabelDarkBG__kYXvI {\n  color: white;\n}\n\n.ItkVtkViewer-module_distanceInput__gyNaU {\n  background: transparent;\n  color: white;\n  font-size: 1em;\n  width: 80px;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_resetCameraButton__l9FGp img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_bgColorButton__yrjOX img {\n  height: 1.2em;\n  width: 1.2em;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 6px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewModeButton__OtTng img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 0px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_shadowButton__09fEk img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ {\n  flex: 1;\n  width: 8mm;\n  padding-top: 2px;\n  padding-bottom: 2px;\n  padding-left: 0px;\n  padding-right: 6px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_viewPlanesButton__rSnuZ img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_toggleInput__jHLTo {\n  margin: 0px;\n  width: 0;\n  opacity: 0;\n  box-sizing: content-box;\n}\n\n.ItkVtkViewer-module_toggleButton__qHhHZ {\n  cursor: pointer;\n  border-radius: 0.2em;\n  opacity: 0.45;\n}\n\ninput:checked.ItkVtkViewer-module_toggleInput__jHLTo + label {\n  opacity: 1;\n}\n\n.ItkVtkViewer-module_numberInput__pDxYH {\n  color: white;\n  background: transparent;\n  font-size: 1em;\n  padding-left: 2px;\n  width: 70px;\n}\n\n.ItkVtkViewer-module_selector__yw8l- {\n  display: flex;\n  direction: row;\n  font-size: 1.2em;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.ItkVtkViewer-module_disableInterface__CGB4S {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(40, 40, 40, 0.5);\n  padding: 5px;\n  margin-right: 2px;\n  border-radius: 5px 5px 0px 0px;\n  color: #777;\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:hover + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(90, 90, 90, 0.5);\n}\n\n.ItkVtkViewer-module_componentTab__6KSJF:checked + .ItkVtkViewer-module_compTabLabel__8u4iU {\n  background: rgba(127, 127, 127, 0.5);\n  color: #fff;\n}\n\n.ItkVtkViewer-module_componentVisibility__y1rRS {\n  position: relative;\n  top: -2px;\n  margin-left: 10px;\n}\n\nselect {\n  -moz-appearance: none;\n}\n\nselect option {\n  color: black;\n}\n\nselect:focus {\n  outline: none;\n  border: none;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_sampleDistanceButton__NjT0o img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderColumn__ZwISb {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: 0 5px;\n}\n\n.ItkVtkViewer-module_sliderIcon__jfoL- {\n  width: 1.8em;\n  margin-right: 10px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 8px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_blendModeButton__cit1w img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 6px;\n  padding-right: 0px;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_gradientOpacitySlider__wkEqP img {\n  width: 1.2em;\n  height: 1.2em;\n}\n\n.ItkVtkViewer-module_sliderEntry__3r3gO {\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.ItkVtkViewer-module_slider__eT9qm {\n  flex: 1;\n  min-height: 1rem;\n}\n\n.ItkVtkViewer-module_planeLabel__E1zOk {\n  padding-left: 6px;\n  padding: 2px;\n  display: block;\n  font-size: 1.1em;\n  font-family: monospace;\n  color: black;\n  border-width: 2px;\n  border-radius: 10%;\n}\n\n.ItkVtkViewer-module_xPlaneLabel__wK4Cb {\n  background-color: #ef5350;\n}\n\n.ItkVtkViewer-module_yPlaneLabel__rIm0j {\n  background-color: #fdd835;\n}\n\n.ItkVtkViewer-module_zPlaneLabel__94NL7 {\n  background-color: #4caf50;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ {\n  z-index: 1100;\n  position: relative;\n}\n\n.ItkVtkViewer-module_gradientOpacityScale__NrqOZ input {\n  position: absolute;\n  bottom: 20px;\n  left: -24px;\n  width: 12px;\n  writing-mode: bt-lr;\n  -webkit-appearance: slider-vertical;\n}\n\n.ItkVtkViewer-module_bigFileDrop__cZdkP {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background-color: white;\n  background-image: url('./dropBG.jpg');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border-radius: 10px;\n  width: 50px;\n  padding: calc(50vh - 2em) calc(50vw - 25px - 2em);\n}\n\n.ItkVtkViewer-module_fullscreenContainer__-H3c8 {\n  position: absolute;\n  width: 100vw;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  background: black;\n  margin: 0;\n  padding: 0;\n}\n\n.ItkVtkViewer-module_collapseButton__uzHPY {\n  position: absolute;\n  top: 0;\n  right: -48px;\n}\n\n.ItkVtkViewer-module_windowLevelButton__Lx0Tj {\n  width: 8mm;\n  padding: 4px;\n  padding-left: 0px;\n  cursor: pointer;\n  z-index: 1000;\n}\n\n.ItkVtkViewer-module_windowLevelButton__Lx0Tj img {\n  width: 1.3em;\n  height: 1.3em;\n}\n\n.ItkVtkViewer-module_inputLabel__dDf8G {\n  line-height: 1.7;\n}\n\n.ItkVtkViewer-module_saveDialog__BKmAa label {\n  display: flex;\n  align-items: center;\n}\n"
 var style = {
   loading: 'ItkVtkViewer-module_loading__11c63',
   spin: 'ItkVtkViewer-module_spin__mT5S6',
@@ -110,6 +110,7 @@ var style = {
   collapseButton: 'ItkVtkViewer-module_collapseButton__uzHPY',
   windowLevelButton: 'ItkVtkViewer-module_windowLevelButton__Lx0Tj',
   inputLabel: 'ItkVtkViewer-module_inputLabel__dDf8G',
+  saveDialog: 'ItkVtkViewer-module_saveDialog__BKmAa',
 }
 styleInject(css_248z$1)
 
@@ -2729,22 +2730,35 @@ function __decorate(decorators, target, key, desc) {
   return c > 3 && r && Object.defineProperty(target, key, r), r
 }
 
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$9 = t => (e, o) => {
+  void 0 !== o
+    ? o.addInitializer(() => {
+        customElements.define(t, e)
+      })
+    : customElements.define(t, e)
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$9 = window,
+const t$8 = globalThis,
   e$j =
-    t$9.ShadowRoot &&
-    (void 0 === t$9.ShadyCSS || t$9.ShadyCSS.nativeShadow) &&
+    t$8.ShadowRoot &&
+    (void 0 === t$8.ShadyCSS || t$8.ShadyCSS.nativeShadow) &&
     'adoptedStyleSheets' in Document.prototype &&
     'replace' in CSSStyleSheet.prototype,
   s$b = Symbol(),
-  n$d = new WeakMap()
-class o$f {
-  constructor(t, e, n) {
-    if (((this._$cssResult$ = !0), n !== s$b))
+  o$f = new WeakMap()
+class n$d {
+  constructor(t, e, o) {
+    if (((this._$cssResult$ = !0), o !== s$b))
       throw Error(
         'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'
       )
@@ -2755,10 +2769,10 @@ class o$f {
     const s = this.t
     if (e$j && void 0 === t) {
       const e = void 0 !== s && 1 === s.length
-      e && (t = n$d.get(s)),
+      e && (t = o$f.get(s)),
         void 0 === t &&
           ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText),
-          e && n$d.set(s, t))
+          e && o$f.set(s, t))
     }
     return t
   }
@@ -2766,13 +2780,13 @@ class o$f {
     return this.cssText
   }
 }
-const r$b = t => new o$f('string' == typeof t ? t : t + '', void 0, s$b),
+const r$b = t => new n$d('string' == typeof t ? t : t + '', void 0, s$b),
   i$8 = (t, ...e) => {
-    const n =
+    const o =
       1 === t.length
         ? t[0]
         : e.reduce(
-            (e, s, n) =>
+            (e, s, o) =>
               e +
               (t => {
                 if (!0 === t._$cssResult$) return t.cssText
@@ -2783,23 +2797,24 @@ const r$b = t => new o$f('string' == typeof t ? t : t + '', void 0, s$b),
                     ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."
                 )
               })(s) +
-              t[n + 1],
+              t[o + 1],
             t[0]
           )
-    return new o$f(n, t, s$b)
+    return new n$d(o, t, s$b)
   },
-  S$3 = (s, n) => {
-    e$j
-      ? (s.adoptedStyleSheets = n.map(t =>
-          t instanceof CSSStyleSheet ? t : t.styleSheet
-        ))
-      : n.forEach(e => {
-          const n = document.createElement('style'),
-            o = t$9.litNonce
-          void 0 !== o && n.setAttribute('nonce', o),
-            (n.textContent = e.cssText),
-            s.appendChild(n)
-        })
+  S$3 = (s, o) => {
+    if (e$j)
+      s.adoptedStyleSheets = o.map(t =>
+        t instanceof CSSStyleSheet ? t : t.styleSheet
+      )
+    else
+      for (const e of o) {
+        const o = document.createElement('style'),
+          n = t$8.litNonce
+        void 0 !== n && o.setAttribute('nonce', n),
+          (o.textContent = e.cssText),
+          s.appendChild(o)
+      }
   },
   c$5 = e$j
     ? t => t
@@ -2816,16 +2831,24 @@ const r$b = t => new o$f('string' == typeof t ? t : t + '', void 0, s$b),
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ var s$a
-const e$i = window,
-  r$a = e$i.trustedTypes,
-  h$5 = r$a ? r$a.emptyScript : '',
-  o$e = e$i.reactiveElementPolyfillSupport,
-  n$c = {
-    toAttribute(t, i) {
-      switch (i) {
+ */ const {
+    is: i$7,
+    defineProperty: e$i,
+    getOwnPropertyDescriptor: r$a,
+    getOwnPropertyNames: h$5,
+    getOwnPropertySymbols: o$e,
+    getPrototypeOf: n$c,
+  } = Object,
+  a$4 = globalThis,
+  c$4 = a$4.trustedTypes,
+  l$6 = c$4 ? c$4.emptyScript : '',
+  p$2 = a$4.reactiveElementPolyfillSupport,
+  d$3 = (t, s) => t,
+  u$2 = {
+    toAttribute(t, s) {
+      switch (s) {
         case Boolean:
-          t = t ? h$5 : null
+          t = t ? l$6 : null
           break
         case Object:
         case Array:
@@ -2833,242 +2856,221 @@ const e$i = window,
       }
       return t
     },
-    fromAttribute(t, i) {
-      let s = t
-      switch (i) {
+    fromAttribute(t, s) {
+      let i = t
+      switch (s) {
         case Boolean:
-          s = null !== t
+          i = null !== t
           break
         case Number:
-          s = null === t ? null : Number(t)
+          i = null === t ? null : Number(t)
           break
         case Object:
         case Array:
           try {
-            s = JSON.parse(t)
+            i = JSON.parse(t)
           } catch (t) {
-            s = null
+            i = null
           }
       }
-      return s
+      return i
     },
   },
-  a$4 = (t, i) => i !== t && (i == i || t == t),
-  l$6 = {
+  f$2 = (t, s) => !i$7(t, s),
+  y$2 = {
     attribute: !0,
     type: String,
-    converter: n$c,
+    converter: u$2,
     reflect: !1,
-    hasChanged: a$4,
-  }
-class d$3 extends HTMLElement {
-  constructor() {
-    super(),
-      (this._$Ei = new Map()),
-      (this.isUpdatePending = !1),
-      (this.hasUpdated = !1),
-      (this._$El = null),
-      this.u()
+    hasChanged: f$2,
   }
+;(Symbol.metadata ??= Symbol('metadata')),
+  (a$4.litPropertyMetadata ??= new WeakMap())
+class b$1 extends HTMLElement {
   static addInitializer(t) {
-    var i
-    this.finalize(),
-      (null !== (i = this.h) && void 0 !== i ? i : (this.h = [])).push(t)
+    this._$Ei(), (this.l ??= []).push(t)
   }
   static get observedAttributes() {
-    this.finalize()
-    const t = []
-    return (
-      this.elementProperties.forEach((i, s) => {
-        const e = this._$Ep(s, i)
-        void 0 !== e && (this._$Ev.set(e, s), t.push(e))
-      }),
-      t
-    )
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()]
   }
-  static createProperty(t, i = l$6) {
+  static createProperty(t, s = y$2) {
     if (
-      (i.state && (i.attribute = !1),
-      this.finalize(),
-      this.elementProperties.set(t, i),
-      !i.noAccessor && !this.prototype.hasOwnProperty(t))
+      (s.state && (s.attribute = !1),
+      this._$Ei(),
+      this.elementProperties.set(t, s),
+      !s.noAccessor)
     ) {
-      const s = 'symbol' == typeof t ? Symbol() : '__' + t,
-        e = this.getPropertyDescriptor(t, s, i)
-      void 0 !== e && Object.defineProperty(this.prototype, t, e)
+      const i = Symbol(),
+        r = this.getPropertyDescriptor(t, i, s)
+      void 0 !== r && e$i(this.prototype, t, r)
     }
   }
-  static getPropertyDescriptor(t, i, s) {
+  static getPropertyDescriptor(t, s, i) {
+    const { get: e, set: h } = r$a(this.prototype, t) ?? {
+      get() {
+        return this[s]
+      },
+      set(t) {
+        this[s] = t
+      },
+    }
     return {
       get() {
-        return this[i]
+        return e?.call(this)
       },
-      set(e) {
-        const r = this[t]
-        ;(this[i] = e), this.requestUpdate(t, r, s)
+      set(s) {
+        const r = e?.call(this)
+        h.call(this, s), this.requestUpdate(t, r, i)
       },
       configurable: !0,
       enumerable: !0,
     }
   }
   static getPropertyOptions(t) {
-    return this.elementProperties.get(t) || l$6
+    return this.elementProperties.get(t) ?? y$2
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d$3('elementProperties'))) return
+    const t = n$c(this)
+    t.finalize(),
+      void 0 !== t.l && (this.l = [...t.l]),
+      (this.elementProperties = new Map(t.elementProperties))
   }
   static finalize() {
-    if (this.hasOwnProperty('finalized')) return !1
-    this.finalized = !0
-    const t = Object.getPrototypeOf(this)
+    if (this.hasOwnProperty(d$3('finalized'))) return
     if (
-      (t.finalize(),
-      void 0 !== t.h && (this.h = [...t.h]),
-      (this.elementProperties = new Map(t.elementProperties)),
-      (this._$Ev = new Map()),
-      this.hasOwnProperty('properties'))
+      ((this.finalized = !0),
+      this._$Ei(),
+      this.hasOwnProperty(d$3('properties')))
     ) {
       const t = this.properties,
-        i = [
-          ...Object.getOwnPropertyNames(t),
-          ...Object.getOwnPropertySymbols(t),
-        ]
-      for (const s of i) this.createProperty(s, t[s])
+        s = [...h$5(t), ...o$e(t)]
+      for (const i of s) this.createProperty(i, t[i])
     }
-    return (this.elementStyles = this.finalizeStyles(this.styles)), !0
+    const t = this[Symbol.metadata]
+    if (null !== t) {
+      const s = litPropertyMetadata.get(t)
+      if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i)
+    }
+    this._$Eh = new Map()
+    for (const [t, s] of this.elementProperties) {
+      const i = this._$Eu(t, s)
+      void 0 !== i && this._$Eh.set(i, t)
+    }
+    this.elementStyles = this.finalizeStyles(this.styles)
   }
-  static finalizeStyles(i) {
-    const s = []
-    if (Array.isArray(i)) {
-      const e = new Set(i.flat(1 / 0).reverse())
-      for (const i of e) s.unshift(c$5(i))
-    } else void 0 !== i && s.push(c$5(i))
-    return s
+  static finalizeStyles(s) {
+    const i = []
+    if (Array.isArray(s)) {
+      const e = new Set(s.flat(1 / 0).reverse())
+      for (const s of e) i.unshift(c$5(s))
+    } else void 0 !== s && i.push(c$5(s))
+    return i
   }
-  static _$Ep(t, i) {
-    const s = i.attribute
-    return !1 === s
+  static _$Eu(t, s) {
+    const i = s.attribute
+    return !1 === i
       ? void 0
-      : 'string' == typeof s
-      ? s
+      : 'string' == typeof i
+      ? i
       : 'string' == typeof t
       ? t.toLowerCase()
       : void 0
   }
-  u() {
-    var t
-    ;(this._$E_ = new Promise(t => (this.enableUpdating = t))),
+  constructor() {
+    super(),
+      (this._$Ep = void 0),
+      (this.isUpdatePending = !1),
+      (this.hasUpdated = !1),
+      (this._$Em = null),
+      this._$Ev()
+  }
+  _$Ev() {
+    ;(this._$Eg = new Promise(t => (this.enableUpdating = t))),
       (this._$AL = new Map()),
-      this._$Eg(),
+      this._$ES(),
       this.requestUpdate(),
-      null === (t = this.constructor.h) ||
-        void 0 === t ||
-        t.forEach(t => t(this))
+      this.constructor.l?.forEach(t => t(this))
   }
   addController(t) {
-    var i, s
-    ;(null !== (i = this._$ES) && void 0 !== i ? i : (this._$ES = [])).push(t),
-      void 0 !== this.renderRoot &&
-        this.isConnected &&
-        (null === (s = t.hostConnected) || void 0 === s || s.call(t))
+    ;(this._$E_ ??= new Set()).add(t),
+      void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.()
   }
   removeController(t) {
-    var i
-    null === (i = this._$ES) ||
-      void 0 === i ||
-      i.splice(this._$ES.indexOf(t) >>> 0, 1)
+    this._$E_?.delete(t)
   }
-  _$Eg() {
-    this.constructor.elementProperties.forEach((t, i) => {
-      this.hasOwnProperty(i) && (this._$Ei.set(i, this[i]), delete this[i])
-    })
+  _$ES() {
+    const t = new Map(),
+      s = this.constructor.elementProperties
+    for (const i of s.keys())
+      this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i])
+    t.size > 0 && (this._$Ep = t)
   }
   createRenderRoot() {
-    var t
-    const s =
-      null !== (t = this.shadowRoot) && void 0 !== t
-        ? t
-        : this.attachShadow(this.constructor.shadowRootOptions)
-    return S$3(s, this.constructor.elementStyles), s
+    const t =
+      this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions)
+    return S$3(t, this.constructor.elementStyles), t
   }
   connectedCallback() {
-    var t
-    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()),
+    ;(this.renderRoot ??= this.createRenderRoot()),
       this.enableUpdating(!0),
-      null === (t = this._$ES) ||
-        void 0 === t ||
-        t.forEach(t => {
-          var i
-          return null === (i = t.hostConnected) || void 0 === i
-            ? void 0
-            : i.call(t)
-        })
+      this._$E_?.forEach(t => t.hostConnected?.())
   }
   enableUpdating(t) {}
   disconnectedCallback() {
-    var t
-    null === (t = this._$ES) ||
-      void 0 === t ||
-      t.forEach(t => {
-        var i
-        return null === (i = t.hostDisconnected) || void 0 === i
-          ? void 0
-          : i.call(t)
-      })
-  }
-  attributeChangedCallback(t, i, s) {
-    this._$AK(t, s)
+    this._$E_?.forEach(t => t.hostDisconnected?.())
   }
-  _$EO(t, i, s = l$6) {
-    var e
-    const r = this.constructor._$Ep(t, s)
-    if (void 0 !== r && !0 === s.reflect) {
-      const h = (void 0 !==
-      (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute)
-        ? s.converter
-        : n$c
-      ).toAttribute(i, s.type)
-      ;(this._$El = t),
-        null == h ? this.removeAttribute(r) : this.setAttribute(r, h),
-        (this._$El = null)
-    }
+  attributeChangedCallback(t, s, i) {
+    this._$AK(t, i)
   }
-  _$AK(t, i) {
-    var s
-    const e = this.constructor,
-      r = e._$Ev.get(t)
-    if (void 0 !== r && this._$El !== r) {
-      const t = e.getPropertyOptions(r),
-        h =
+  _$EO(t, s) {
+    const i = this.constructor.elementProperties.get(t),
+      e = this.constructor._$Eu(t, i)
+    if (void 0 !== e && !0 === i.reflect) {
+      const r = (void 0 !== i.converter?.toAttribute
+        ? i.converter
+        : u$2
+      ).toAttribute(s, i.type)
+      ;(this._$Em = t),
+        null == r ? this.removeAttribute(e) : this.setAttribute(e, r),
+        (this._$Em = null)
+    }
+  }
+  _$AK(t, s) {
+    const i = this.constructor,
+      e = i._$Eh.get(t)
+    if (void 0 !== e && this._$Em !== e) {
+      const t = i.getPropertyOptions(e),
+        r =
           'function' == typeof t.converter
             ? { fromAttribute: t.converter }
-            : void 0 !==
-              (null === (s = t.converter) || void 0 === s
-                ? void 0
-                : s.fromAttribute)
+            : void 0 !== t.converter?.fromAttribute
             ? t.converter
-            : n$c
-      ;(this._$El = r),
-        (this[r] = h.fromAttribute(i, t.type)),
-        (this._$El = null)
+            : u$2
+      ;(this._$Em = e),
+        (this[e] = r.fromAttribute(s, t.type)),
+        (this._$Em = null)
     }
   }
-  requestUpdate(t, i, s) {
-    let e = !0
-    void 0 !== t &&
-      (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$4)(
-        this[t],
-        i
+  requestUpdate(t, s, i, e = !1, r) {
+    if (void 0 !== t) {
+      if (
+        ((i ??= this.constructor.getPropertyOptions(t)),
+        !(i.hasChanged ?? f$2)(e ? r : this[t], s))
       )
-        ? (this._$AL.has(t) || this._$AL.set(t, i),
-          !0 === s.reflect &&
-            this._$El !== t &&
-            (void 0 === this._$EC && (this._$EC = new Map()),
-            this._$EC.set(t, s)))
-        : (e = !1)),
-      !this.isUpdatePending && e && (this._$E_ = this._$Ej())
+        return
+      this.C(t, s, i)
+    }
+    !1 === this.isUpdatePending && (this._$Eg = this._$EP())
   }
-  async _$Ej() {
+  C(t, s, i) {
+    this._$AL.has(t) || this._$AL.set(t, s),
+      !0 === i.reflect && this._$Em !== t && (this._$Ej ??= new Set()).add(t)
+  }
+  async _$EP() {
     this.isUpdatePending = !0
     try {
-      await this._$E_
+      await this._$Eg
     } catch (t) {
       Promise.reject(t)
     }
@@ -3079,258 +3081,385 @@ class d$3 extends HTMLElement {
     return this.performUpdate()
   }
   performUpdate() {
-    var t
     if (!this.isUpdatePending) return
-    this.hasUpdated,
-      this._$Ei &&
-        (this._$Ei.forEach((t, i) => (this[i] = t)), (this._$Ei = void 0))
-    let i = !1
+    if (!this.hasUpdated) {
+      if (((this.renderRoot ??= this.createRenderRoot()), this._$Ep)) {
+        for (const [t, s] of this._$Ep) this[t] = s
+        this._$Ep = void 0
+      }
+      const t = this.constructor.elementProperties
+      if (t.size > 0)
+        for (const [s, i] of t)
+          !0 !== i.wrapped ||
+            this._$AL.has(s) ||
+            void 0 === this[s] ||
+            this.C(s, this[s], i)
+    }
+    let t = !1
     const s = this._$AL
     try {
-      ;(i = this.shouldUpdate(s)),
-        i
+      ;(t = this.shouldUpdate(s)),
+        t
           ? (this.willUpdate(s),
-            null === (t = this._$ES) ||
-              void 0 === t ||
-              t.forEach(t => {
-                var i
-                return null === (i = t.hostUpdate) || void 0 === i
-                  ? void 0
-                  : i.call(t)
-              }),
+            this._$E_?.forEach(t => t.hostUpdate?.()),
             this.update(s))
-          : this._$Ek()
-    } catch (t) {
-      throw ((i = !1), this._$Ek(), t)
+          : this._$ET()
+    } catch (s) {
+      throw ((t = !1), this._$ET(), s)
     }
-    i && this._$AE(s)
+    t && this._$AE(s)
   }
   willUpdate(t) {}
   _$AE(t) {
-    var i
-    null === (i = this._$ES) ||
-      void 0 === i ||
-      i.forEach(t => {
-        var i
-        return null === (i = t.hostUpdated) || void 0 === i ? void 0 : i.call(t)
-      }),
+    this._$E_?.forEach(t => t.hostUpdated?.()),
       this.hasUpdated || ((this.hasUpdated = !0), this.firstUpdated(t)),
       this.updated(t)
   }
-  _$Ek() {
+  _$ET() {
     ;(this._$AL = new Map()), (this.isUpdatePending = !1)
   }
   get updateComplete() {
     return this.getUpdateComplete()
   }
   getUpdateComplete() {
-    return this._$E_
+    return this._$Eg
   }
   shouldUpdate(t) {
     return !0
   }
   update(t) {
-    void 0 !== this._$EC &&
-      (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)),
-      (this._$EC = void 0)),
-      this._$Ek()
+    ;(this._$Ej &&= this._$Ej.forEach(t => this._$EO(t, this[t]))), this._$ET()
   }
   updated(t) {}
   firstUpdated(t) {}
 }
-;(d$3.finalized = !0),
-  (d$3.elementProperties = new Map()),
-  (d$3.elementStyles = []),
-  (d$3.shadowRootOptions = { mode: 'open' }),
-  null == o$e || o$e({ ReactiveElement: d$3 }),
-  (null !== (s$a = e$i.reactiveElementVersions) && void 0 !== s$a
-    ? s$a
-    : (e$i.reactiveElementVersions = [])
-  ).push('1.6.1')
+;(b$1.elementStyles = []),
+  (b$1.shadowRootOptions = { mode: 'open' }),
+  (b$1[d$3('elementProperties')] = new Map()),
+  (b$1[d$3('finalized')] = new Map()),
+  p$2?.({ ReactiveElement: b$1 }),
+  (a$4.reactiveElementVersions ??= []).push('2.0.2')
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */
-var t$8
-const i$7 = window,
-  s$9 = i$7.trustedTypes,
-  e$h = s$9 ? s$9.createPolicy('lit-html', { createHTML: t => t }) : void 0,
-  o$d = `lit$${(Math.random() + '').slice(9)}$`,
-  n$b = '?' + o$d,
-  l$5 = `<${n$b}>`,
-  h$4 = document,
-  r$9 = (t = '') => h$4.createComment(t),
-  d$2 = t => null === t || ('object' != typeof t && 'function' != typeof t),
-  u$2 = Array.isArray,
-  c$4 = t =>
-    u$2(t) || 'function' == typeof (null == t ? void 0 : t[Symbol.iterator]),
-  v$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
-  a$3 = /-->/g,
-  f$2 = />/g,
-  _$1 = RegExp(
-    '>|[ \t\n\f\r](?:([^\\s"\'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r"\'`<>=]|("|\')|))|$)',
-    'g'
-  ),
-  m$1 = /'/g,
-  p$2 = /"/g,
-  $$1 = /^(?:script|style|textarea|title)$/i,
-  g$1 = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
-  y$2 = g$1(1),
-  x$1 = Symbol.for('lit-noChange'),
-  b$1 = Symbol.for('lit-nothing'),
-  T$1 = new WeakMap(),
-  A$1 = h$4.createTreeWalker(h$4, 129, null, !1),
-  E$1 = (t, i) => {
-    const s = t.length - 1,
-      n = []
-    let h,
-      r = 2 === i ? '<svg>' : '',
-      d = v$1
-    for (let i = 0; i < s; i++) {
-      const s = t[i]
-      let e,
-        u,
-        c = -1,
-        g = 0
-      for (; g < s.length && ((d.lastIndex = g), (u = d.exec(s)), null !== u); )
-        (g = d.lastIndex),
-          d === v$1
-            ? '!--' === u[1]
-              ? (d = a$3)
-              : void 0 !== u[1]
-              ? (d = f$2)
-              : void 0 !== u[2]
-              ? ($$1.test(u[2]) && (h = RegExp('</' + u[2], 'g')), (d = _$1))
-              : void 0 !== u[3] && (d = _$1)
-            : d === _$1
-            ? '>' === u[0]
-              ? ((d = null != h ? h : v$1), (c = -1))
-              : void 0 === u[1]
-              ? (c = -2)
-              : ((c = d.lastIndex - u[2].length),
-                (e = u[1]),
-                (d = void 0 === u[3] ? _$1 : '"' === u[3] ? p$2 : m$1))
-            : d === p$2 || d === m$1
-            ? (d = _$1)
-            : d === a$3 || d === f$2
-            ? (d = v$1)
-            : ((d = _$1), (h = void 0))
-      const y = d === _$1 && t[i + 1].startsWith('/>') ? ' ' : ''
-      r +=
-        d === v$1
-          ? s + l$5
-          : c >= 0
-          ? (n.push(e), s.slice(0, c) + '$lit$' + s.slice(c) + o$d + y)
-          : s + o$d + (-2 === c ? (n.push(void 0), i) : y)
-    }
-    const u = r + (t[s] || '<?>') + (2 === i ? '</svg>' : '')
-    if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
-      throw Error('invalid template strings array')
-    return [void 0 !== e$h ? e$h.createHTML(u) : u, n]
-  }
-class C$1 {
-  constructor({ strings: t, _$litType$: i }, e) {
-    let l
-    this.parts = []
-    let h = 0,
-      d = 0
-    const u = t.length - 1,
-      c = this.parts,
-      [v, a] = E$1(t, i)
+ */ const o$d = {
+    attribute: !0,
+    type: String,
+    converter: u$2,
+    reflect: !1,
+    hasChanged: f$2,
+  },
+  r$9 = (t = o$d, e, r) => {
+    const { kind: n, metadata: i } = r
+    let s = globalThis.litPropertyMetadata.get(i)
     if (
-      ((this.el = C$1.createElement(v, e)),
-      (A$1.currentNode = this.el.content),
-      2 === i)
+      (void 0 === s && globalThis.litPropertyMetadata.set(i, (s = new Map())),
+      s.set(r.name, t),
+      'accessor' === n)
     ) {
-      const t = this.el.content,
-        i = t.firstChild
-      i.remove(), t.append(...i.childNodes)
+      const { name: o } = r
+      return {
+        set(r) {
+          const n = e.get.call(this)
+          e.set.call(this, r), this.requestUpdate(o, n, t)
+        },
+        init(e) {
+          return void 0 !== e && this.C(o, void 0, t), e
+        },
+      }
     }
-    for (; null !== (l = A$1.nextNode()) && c.length < u; ) {
-      if (1 === l.nodeType) {
-        if (l.hasAttributes()) {
-          const t = []
-          for (const i of l.getAttributeNames())
-            if (i.endsWith('$lit$') || i.startsWith(o$d)) {
-              const s = a[d++]
-              if ((t.push(i), void 0 !== s)) {
-                const t = l.getAttribute(s.toLowerCase() + '$lit$').split(o$d),
-                  i = /([.?@])?(.*)/.exec(s)
-                c.push({
-                  type: 1,
-                  index: h,
-                  name: i[2],
-                  strings: t,
-                  ctor:
-                    '.' === i[1]
-                      ? M$1
-                      : '?' === i[1]
-                      ? k$1
-                      : '@' === i[1]
-                      ? H$1
-                      : S$2,
-                })
-              } else c.push({ type: 6, index: h })
-            }
-          for (const i of t) l.removeAttribute(i)
-        }
-        if ($$1.test(l.tagName)) {
-          const t = l.textContent.split(o$d),
-            i = t.length - 1
-          if (i > 0) {
-            l.textContent = s$9 ? s$9.emptyScript : ''
-            for (let s = 0; s < i; s++)
-              l.append(t[s], r$9()),
-                A$1.nextNode(),
-                c.push({ type: 2, index: ++h })
-            l.append(t[i], r$9())
-          }
-        }
-      } else if (8 === l.nodeType)
-        if (l.data === n$b) c.push({ type: 2, index: h })
-        else {
-          let t = -1
-          for (; -1 !== (t = l.data.indexOf(o$d, t + 1)); )
-            c.push({ type: 7, index: h }), (t += o$d.length - 1)
-        }
-      h++
+    if ('setter' === n) {
+      const { name: o } = r
+      return function(r) {
+        const n = this[o]
+        e.call(this, r), this.requestUpdate(o, n, t)
+      }
     }
+    throw Error('Unsupported decorator location: ' + n)
   }
-  static createElement(t, i) {
-    const s = h$4.createElement('template')
-    return (s.innerHTML = t), s
-  }
+function n$b(t) {
+  return (e, o) =>
+    'object' == typeof o
+      ? r$9(t, e, o)
+      : ((t, e, o) => {
+          const r = e.hasOwnProperty(o)
+          return (
+            e.constructor.createProperty(o, r ? { ...t, wrapped: !0 } : t),
+            r ? Object.getOwnPropertyDescriptor(e, o) : void 0
+          )
+        })(t, e, o)
 }
-function P$1(t, i, s = t, e) {
-  var o, n, l, h
-  if (i === x$1) return i
-  let r =
-    void 0 !== e
-      ? null === (o = s._$Co) || void 0 === o
-        ? void 0
-        : o[e]
-      : s._$Cl
-  const u = d$2(i) ? void 0 : i._$litDirective$
-  return (
-    (null == r ? void 0 : r.constructor) !== u &&
-      (null === (n = null == r ? void 0 : r._$AO) ||
-        void 0 === n ||
-        n.call(r, !1),
-      void 0 === u ? (r = void 0) : ((r = new u(t)), r._$AT(t, s, e)),
-      void 0 !== e
-        ? ((null !== (l = (h = s)._$Co) && void 0 !== l ? l : (h._$Co = []))[
-            e
-          ] = r)
-        : (s._$Cl = r)),
-    void 0 !== r && (i = P$1(t, r._$AS(t, i.values), r, e)),
-    i
-  )
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function r$8(r) {
+  return n$b({ ...r, state: !0, attribute: !1 })
 }
-class V$1 {
-  constructor(t, i) {
-    ;(this.u = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$h = (e, t, c) => (
+  (c.configurable = !0),
+  (c.enumerable = !0),
+  Reflect.decorate && 'object' != typeof t && Object.defineProperty(e, t, c),
+  c
+)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function e$g(e, r) {
+  return (n, s, i) => {
+    const o = t => t.renderRoot?.querySelector(e) ?? null
+    if (r) {
+      const { get: e, set: r } =
+        'object' == typeof s
+          ? n
+          : i ??
+            (() => {
+              const t = Symbol()
+              return {
+                get() {
+                  return this[t]
+                },
+                set(e) {
+                  this[t] = e
+                },
+              }
+            })()
+      return e$h(n, s, {
+        get() {
+          let t = e.call(this)
+          return (
+            void 0 === t &&
+              ((t = o(this)),
+              (null !== t || this.hasUpdated) && r.call(this, t)),
+            t
+          )
+        },
+      })
+    }
+    return e$h(n, s, {
+      get() {
+        return o(this)
+      },
+    })
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let e$f
+function r$7(r) {
+  return (n, o) =>
+    e$h(n, o, {
+      get() {
+        return (
+          this.renderRoot ?? (e$f ??= document.createDocumentFragment())
+        ).querySelectorAll(r)
+      },
+    })
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function o$c(o) {
+  return (e, n) => {
+    const { slot: r, selector: s } = o ?? {},
+      c = 'slot' + (r ? `[name=${r}]` : ':not([name])')
+    return e$h(e, n, {
+      get() {
+        const t = this.renderRoot?.querySelector(c),
+          e = t?.assignedElements(o) ?? []
+        return void 0 === s ? e : e.filter(t => t.matches(s))
+      },
+    })
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$7 = globalThis,
+  i$6 = t$7.trustedTypes,
+  s$a = i$6 ? i$6.createPolicy('lit-html', { createHTML: t => t }) : void 0,
+  e$e = '$lit$',
+  h$4 = `lit$${(Math.random() + '').slice(9)}$`,
+  o$b = '?' + h$4,
+  n$a = `<${o$b}>`,
+  r$6 = document,
+  l$5 = () => r$6.createComment(''),
+  c$3 = t => null === t || ('object' != typeof t && 'function' != typeof t),
+  a$3 = Array.isArray,
+  u$1 = t => a$3(t) || 'function' == typeof t?.[Symbol.iterator],
+  d$2 = '[ \t\n\f\r]',
+  f$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
+  v$1 = /-->/g,
+  _$1 = />/g,
+  m$1 = RegExp(
+    `>|${d$2}(?:([^\\s"'>=/]+)(${d$2}*=${d$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,
+    'g'
+  ),
+  p$1 = /'/g,
+  g$1 = /"/g,
+  $$1 = /^(?:script|style|textarea|title)$/i,
+  y$1 = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
+  x$1 = y$1(1),
+  w = Symbol.for('lit-noChange'),
+  T$1 = Symbol.for('lit-nothing'),
+  A$1 = new WeakMap(),
+  E$1 = r$6.createTreeWalker(r$6, 129)
+function C$1(t, i) {
+  if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
+    throw Error('invalid template strings array')
+  return void 0 !== s$a ? s$a.createHTML(i) : i
+}
+const P$1 = (t, i) => {
+  const s = t.length - 1,
+    o = []
+  let r,
+    l = 2 === i ? '<svg>' : '',
+    c = f$1
+  for (let i = 0; i < s; i++) {
+    const s = t[i]
+    let a,
+      u,
+      d = -1,
+      y = 0
+    for (; y < s.length && ((c.lastIndex = y), (u = c.exec(s)), null !== u); )
+      (y = c.lastIndex),
+        c === f$1
+          ? '!--' === u[1]
+            ? (c = v$1)
+            : void 0 !== u[1]
+            ? (c = _$1)
+            : void 0 !== u[2]
+            ? ($$1.test(u[2]) && (r = RegExp('</' + u[2], 'g')), (c = m$1))
+            : void 0 !== u[3] && (c = m$1)
+          : c === m$1
+          ? '>' === u[0]
+            ? ((c = r ?? f$1), (d = -1))
+            : void 0 === u[1]
+            ? (d = -2)
+            : ((d = c.lastIndex - u[2].length),
+              (a = u[1]),
+              (c = void 0 === u[3] ? m$1 : '"' === u[3] ? g$1 : p$1))
+          : c === g$1 || c === p$1
+          ? (c = m$1)
+          : c === v$1 || c === _$1
+          ? (c = f$1)
+          : ((c = m$1), (r = void 0))
+    const x = c === m$1 && t[i + 1].startsWith('/>') ? ' ' : ''
+    l +=
+      c === f$1
+        ? s + n$a
+        : d >= 0
+        ? (o.push(a), s.slice(0, d) + e$e + s.slice(d) + h$4 + x)
+        : s + h$4 + (-2 === d ? i : x)
+  }
+  return [C$1(t, l + (t[s] || '<?>') + (2 === i ? '</svg>' : '')), o]
+}
+class V$1 {
+  constructor({ strings: t, _$litType$: s }, n) {
+    let r
+    this.parts = []
+    let c = 0,
+      a = 0
+    const u = t.length - 1,
+      d = this.parts,
+      [f, v] = P$1(t, s)
+    if (
+      ((this.el = V$1.createElement(f, n)),
+      (E$1.currentNode = this.el.content),
+      2 === s)
+    ) {
+      const t = this.el.content.firstChild
+      t.replaceWith(...t.childNodes)
+    }
+    for (; null !== (r = E$1.nextNode()) && d.length < u; ) {
+      if (1 === r.nodeType) {
+        if (r.hasAttributes())
+          for (const t of r.getAttributeNames())
+            if (t.endsWith(e$e)) {
+              const i = v[a++],
+                s = r.getAttribute(t).split(h$4),
+                e = /([.?@])?(.*)/.exec(i)
+              d.push({
+                type: 1,
+                index: c,
+                name: e[2],
+                strings: s,
+                ctor:
+                  '.' === e[1]
+                    ? k$1
+                    : '?' === e[1]
+                    ? H$1
+                    : '@' === e[1]
+                    ? I$1
+                    : R$1,
+              }),
+                r.removeAttribute(t)
+            } else
+              t.startsWith(h$4) &&
+                (d.push({ type: 6, index: c }), r.removeAttribute(t))
+        if ($$1.test(r.tagName)) {
+          const t = r.textContent.split(h$4),
+            s = t.length - 1
+          if (s > 0) {
+            r.textContent = i$6 ? i$6.emptyScript : ''
+            for (let i = 0; i < s; i++)
+              r.append(t[i], l$5()),
+                E$1.nextNode(),
+                d.push({ type: 2, index: ++c })
+            r.append(t[s], l$5())
+          }
+        }
+      } else if (8 === r.nodeType)
+        if (r.data === o$b) d.push({ type: 2, index: c })
+        else {
+          let t = -1
+          for (; -1 !== (t = r.data.indexOf(h$4, t + 1)); )
+            d.push({ type: 7, index: c }), (t += h$4.length - 1)
+        }
+      c++
+    }
+  }
+  static createElement(t, i) {
+    const s = r$6.createElement('template')
+    return (s.innerHTML = t), s
+  }
+}
+function N$1(t, i, s = t, e) {
+  if (i === w) return i
+  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl
+  const o = c$3(i) ? void 0 : i._$litDirective$
+  return (
+    h?.constructor !== o &&
+      (h?._$AO?.(!1),
+      void 0 === o ? (h = void 0) : ((h = new o(t)), h._$AT(t, s, e)),
+      void 0 !== e ? ((s._$Co ??= [])[e] = h) : (s._$Cl = h)),
+    void 0 !== h && (i = N$1(t, h._$AS(t, i.values), h, e)),
+    i
+  )
+}
+class S$2 {
+  constructor(t, i) {
+    ;(this._$AV = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
   }
   get parentNode() {
     return this._$AM.parentNode
@@ -3338,39 +3467,35 @@ class V$1 {
   get _$AU() {
     return this._$AM._$AU
   }
-  v(t) {
-    var i
+  u(t) {
     const {
-        el: { content: s },
-        parts: e,
+        el: { content: i },
+        parts: s,
       } = this._$AD,
-      o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i
-        ? i
-        : h$4
-      ).importNode(s, !0)
-    A$1.currentNode = o
-    let n = A$1.nextNode(),
-      l = 0,
-      r = 0,
-      d = e[0]
-    for (; void 0 !== d; ) {
-      if (l === d.index) {
+      e = (t?.creationScope ?? r$6).importNode(i, !0)
+    E$1.currentNode = e
+    let h = E$1.nextNode(),
+      o = 0,
+      n = 0,
+      l = s[0]
+    for (; void 0 !== l; ) {
+      if (o === l.index) {
         let i
-        2 === d.type
-          ? (i = new N$1(n, n.nextSibling, this, t))
-          : 1 === d.type
-          ? (i = new d.ctor(n, d.name, d.strings, this, t))
-          : 6 === d.type && (i = new I$1(n, this, t)),
-          this.u.push(i),
-          (d = e[++r])
+        2 === l.type
+          ? (i = new M$1(h, h.nextSibling, this, t))
+          : 1 === l.type
+          ? (i = new l.ctor(h, l.name, l.strings, this, t))
+          : 6 === l.type && (i = new L(h, this, t)),
+          this._$AV.push(i),
+          (l = s[++n])
       }
-      l !== (null == d ? void 0 : d.index) && ((n = A$1.nextNode()), l++)
+      o !== l?.index && ((h = E$1.nextNode()), o++)
     }
-    return o
+    return (E$1.currentNode = r$6), e
   }
   p(t) {
     let i = 0
-    for (const s of this.u)
+    for (const s of this._$AV)
       void 0 !== s &&
         (void 0 !== s.strings
           ? (s._$AI(t, s, i), (i += s.strings.length - 2))
@@ -3378,31 +3503,24 @@ class V$1 {
         i++
   }
 }
-class N$1 {
+class M$1 {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv
+  }
   constructor(t, i, s, e) {
-    var o
     ;(this.type = 2),
-      (this._$AH = b$1),
+      (this._$AH = T$1),
       (this._$AN = void 0),
       (this._$AA = t),
       (this._$AB = i),
       (this._$AM = s),
       (this.options = e),
-      (this._$Cm =
-        null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o)
-  }
-  get _$AU() {
-    var t, i
-    return null !==
-      (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) &&
-      void 0 !== i
-      ? i
-      : this._$Cm
+      (this._$Cv = e?.isConnected ?? !0)
   }
   get parentNode() {
     let t = this._$AA.parentNode
     const i = this._$AM
-    return void 0 !== i && 11 === t.nodeType && (t = i.parentNode), t
+    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t
   }
   get startNode() {
     return this._$AA
@@ -3411,187 +3529,160 @@ class N$1 {
     return this._$AB
   }
   _$AI(t, i = this) {
-    ;(t = P$1(this, t, i)),
-      d$2(t)
-        ? t === b$1 || null == t || '' === t
-          ? (this._$AH !== b$1 && this._$AR(), (this._$AH = b$1))
-          : t !== this._$AH && t !== x$1 && this.g(t)
+    ;(t = N$1(this, t, i)),
+      c$3(t)
+        ? t === T$1 || null == t || '' === t
+          ? (this._$AH !== T$1 && this._$AR(), (this._$AH = T$1))
+          : t !== this._$AH && t !== w && this._(t)
         : void 0 !== t._$litType$
-        ? this.$(t)
+        ? this.g(t)
         : void 0 !== t.nodeType
+        ? this.$(t)
+        : u$1(t)
         ? this.T(t)
-        : c$4(t)
-        ? this.k(t)
-        : this.g(t)
+        : this._(t)
   }
-  O(t, i = this._$AB) {
-    return this._$AA.parentNode.insertBefore(t, i)
+  k(t) {
+    return this._$AA.parentNode.insertBefore(t, this._$AB)
   }
-  T(t) {
-    this._$AH !== t && (this._$AR(), (this._$AH = this.O(t)))
+  $(t) {
+    this._$AH !== t && (this._$AR(), (this._$AH = this.k(t)))
   }
-  g(t) {
-    this._$AH !== b$1 && d$2(this._$AH)
+  _(t) {
+    this._$AH !== T$1 && c$3(this._$AH)
       ? (this._$AA.nextSibling.data = t)
-      : this.T(h$4.createTextNode(t)),
+      : this.$(r$6.createTextNode(t)),
       (this._$AH = t)
   }
-  $(t) {
-    var i
-    const { values: s, _$litType$: e } = t,
-      o =
-        'number' == typeof e
+  g(t) {
+    const { values: i, _$litType$: s } = t,
+      e =
+        'number' == typeof s
           ? this._$AC(t)
-          : (void 0 === e.el && (e.el = C$1.createElement(e.h, this.options)),
-            e)
-    if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o)
-      this._$AH.p(s)
+          : (void 0 === s.el &&
+              (s.el = V$1.createElement(C$1(s.h, s.h[0]), this.options)),
+            s)
+    if (this._$AH?._$AD === e) this._$AH.p(i)
     else {
-      const t = new V$1(o, this),
-        i = t.v(this.options)
-      t.p(s), this.T(i), (this._$AH = t)
+      const t = new S$2(e, this),
+        s = t.u(this.options)
+      t.p(i), this.$(s), (this._$AH = t)
     }
   }
   _$AC(t) {
-    let i = T$1.get(t.strings)
-    return void 0 === i && T$1.set(t.strings, (i = new C$1(t))), i
+    let i = A$1.get(t.strings)
+    return void 0 === i && A$1.set(t.strings, (i = new V$1(t))), i
   }
-  k(t) {
-    u$2(this._$AH) || ((this._$AH = []), this._$AR())
+  T(t) {
+    a$3(this._$AH) || ((this._$AH = []), this._$AR())
     const i = this._$AH
     let s,
       e = 0
-    for (const o of t)
+    for (const h of t)
       e === i.length
         ? i.push(
-            (s = new N$1(this.O(r$9()), this.O(r$9()), this, this.options))
+            (s = new M$1(this.k(l$5()), this.k(l$5()), this, this.options))
           )
         : (s = i[e]),
-        s._$AI(o),
+        s._$AI(h),
         e++
     e < i.length && (this._$AR(s && s._$AB.nextSibling, e), (i.length = e))
   }
   _$AR(t = this._$AA.nextSibling, i) {
-    var s
-    for (
-      null === (s = this._$AP) || void 0 === s || s.call(this, !1, !0, i);
-      t && t !== this._$AB;
-
-    ) {
+    for (this._$AP?.(!1, !0, i); t && t !== this._$AB; ) {
       const i = t.nextSibling
       t.remove(), (t = i)
     }
   }
   setConnected(t) {
-    var i
-    void 0 === this._$AM &&
-      ((this._$Cm = t),
-      null === (i = this._$AP) || void 0 === i || i.call(this, t))
+    void 0 === this._$AM && ((this._$Cv = t), this._$AP?.(t))
   }
 }
-class S$2 {
-  constructor(t, i, s, e, o) {
+class R$1 {
+  get tagName() {
+    return this.element.tagName
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  constructor(t, i, s, e, h) {
     ;(this.type = 1),
-      (this._$AH = b$1),
+      (this._$AH = T$1),
       (this._$AN = void 0),
       (this.element = t),
       (this.name = i),
       (this._$AM = e),
-      (this.options = o),
+      (this.options = h),
       s.length > 2 || '' !== s[0] || '' !== s[1]
         ? ((this._$AH = Array(s.length - 1).fill(new String())),
           (this.strings = s))
-        : (this._$AH = b$1)
-  }
-  get tagName() {
-    return this.element.tagName
-  }
-  get _$AU() {
-    return this._$AM._$AU
+        : (this._$AH = T$1)
   }
   _$AI(t, i = this, s, e) {
-    const o = this.strings
-    let n = !1
-    if (void 0 === o)
-      (t = P$1(this, t, i, 0)),
-        (n = !d$2(t) || (t !== this._$AH && t !== x$1)),
-        n && (this._$AH = t)
+    const h = this.strings
+    let o = !1
+    if (void 0 === h)
+      (t = N$1(this, t, i, 0)),
+        (o = !c$3(t) || (t !== this._$AH && t !== w)),
+        o && (this._$AH = t)
     else {
       const e = t
-      let l, h
-      for (t = o[0], l = 0; l < o.length - 1; l++)
-        (h = P$1(this, e[s + l], i, l)),
-          h === x$1 && (h = this._$AH[l]),
-          n || (n = !d$2(h) || h !== this._$AH[l]),
-          h === b$1
-            ? (t = b$1)
-            : t !== b$1 && (t += (null != h ? h : '') + o[l + 1]),
-          (this._$AH[l] = h)
+      let n, r
+      for (t = h[0], n = 0; n < h.length - 1; n++)
+        (r = N$1(this, e[s + n], i, n)),
+          r === w && (r = this._$AH[n]),
+          (o ||= !c$3(r) || r !== this._$AH[n]),
+          r === T$1 ? (t = T$1) : t !== T$1 && (t += (r ?? '') + h[n + 1]),
+          (this._$AH[n] = r)
     }
-    n && !e && this.j(t)
+    o && !e && this.O(t)
   }
-  j(t) {
-    t === b$1
+  O(t) {
+    t === T$1
       ? this.element.removeAttribute(this.name)
-      : this.element.setAttribute(this.name, null != t ? t : '')
+      : this.element.setAttribute(this.name, t ?? '')
   }
 }
-class M$1 extends S$2 {
+class k$1 extends R$1 {
   constructor() {
     super(...arguments), (this.type = 3)
   }
-  j(t) {
-    this.element[this.name] = t === b$1 ? void 0 : t
+  O(t) {
+    this.element[this.name] = t === T$1 ? void 0 : t
   }
 }
-const R$1 = s$9 ? s$9.emptyScript : ''
-class k$1 extends S$2 {
+class H$1 extends R$1 {
   constructor() {
     super(...arguments), (this.type = 4)
   }
-  j(t) {
-    t && t !== b$1
-      ? this.element.setAttribute(this.name, R$1)
-      : this.element.removeAttribute(this.name)
+  O(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== T$1)
   }
 }
-class H$1 extends S$2 {
-  constructor(t, i, s, e, o) {
-    super(t, i, s, e, o), (this.type = 5)
+class I$1 extends R$1 {
+  constructor(t, i, s, e, h) {
+    super(t, i, s, e, h), (this.type = 5)
   }
   _$AI(t, i = this) {
-    var s
-    if (
-      (t = null !== (s = P$1(this, t, i, 0)) && void 0 !== s ? s : b$1) === x$1
-    )
-      return
-    const e = this._$AH,
-      o =
-        (t === b$1 && e !== b$1) ||
-        t.capture !== e.capture ||
-        t.once !== e.once ||
-        t.passive !== e.passive,
-      n = t !== b$1 && (e === b$1 || o)
-    o && this.element.removeEventListener(this.name, this, e),
-      n && this.element.addEventListener(this.name, this, t),
+    if ((t = N$1(this, t, i, 0) ?? T$1) === w) return
+    const s = this._$AH,
+      e =
+        (t === T$1 && s !== T$1) ||
+        t.capture !== s.capture ||
+        t.once !== s.once ||
+        t.passive !== s.passive,
+      h = t !== T$1 && (s === T$1 || e)
+    e && this.element.removeEventListener(this.name, this, s),
+      h && this.element.addEventListener(this.name, this, t),
       (this._$AH = t)
   }
   handleEvent(t) {
-    var i, s
     'function' == typeof this._$AH
-      ? this._$AH.call(
-          null !==
-            (s =
-              null === (i = this.options) || void 0 === i ? void 0 : i.host) &&
-            void 0 !== s
-            ? s
-            : this.element,
-          t
-        )
+      ? this._$AH.call(this.options?.host ?? this.element, t)
       : this._$AH.handleEvent(t)
   }
 }
-class I$1 {
+class L {
   constructor(t, i, s) {
     ;(this.element = t),
       (this.type = 6),
@@ -3603,1986 +3694,2197 @@ class I$1 {
     return this._$AM._$AU
   }
   _$AI(t) {
-    P$1(this, t)
+    N$1(this, t)
   }
 }
-const z = i$7.litHtmlPolyfillSupport
-null == z || z(C$1, N$1),
-  (null !== (t$8 = i$7.litHtmlVersions) && void 0 !== t$8
-    ? t$8
-    : (i$7.litHtmlVersions = [])
-  ).push('2.6.1')
-const Z$1 = (t, i, s) => {
-  var e, o
-  const n =
-    null !== (e = null == s ? void 0 : s.renderBefore) && void 0 !== e ? e : i
-  let l = n._$litPart$
-  if (void 0 === l) {
-    const t =
-      null !== (o = null == s ? void 0 : s.renderBefore) && void 0 !== o
-        ? o
-        : null
-    n._$litPart$ = l = new N$1(
-      i.insertBefore(r$9(), t),
-      t,
-      void 0,
-      null != s ? s : {}
-    )
+const Z$1 = t$7.litHtmlPolyfillSupport
+Z$1?.(V$1, M$1), (t$7.litHtmlVersions ??= []).push('3.1.0')
+const j = (t, i, s) => {
+  const e = s?.renderBefore ?? i
+  let h = e._$litPart$
+  if (void 0 === h) {
+    const t = s?.renderBefore ?? null
+    e._$litPart$ = h = new M$1(i.insertBefore(l$5(), t), t, void 0, s ?? {})
   }
-  return l._$AI(t), l
+  return h._$AI(t), h
 }
 
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ var l$4, o$c
-class s$8 extends d$3 {
+ */ class s$9 extends b$1 {
   constructor() {
     super(...arguments),
       (this.renderOptions = { host: this }),
       (this._$Do = void 0)
   }
   createRenderRoot() {
-    var t, e
-    const i = super.createRenderRoot()
-    return (
-      (null !== (t = (e = this.renderOptions).renderBefore) && void 0 !== t) ||
-        (e.renderBefore = i.firstChild),
-      i
-    )
+    const t = super.createRenderRoot()
+    return (this.renderOptions.renderBefore ??= t.firstChild), t
   }
   update(t) {
     const i = this.render()
     this.hasUpdated || (this.renderOptions.isConnected = this.isConnected),
       super.update(t),
-      (this._$Do = Z$1(i, this.renderRoot, this.renderOptions))
+      (this._$Do = j(i, this.renderRoot, this.renderOptions))
   }
   connectedCallback() {
-    var t
-    super.connectedCallback(),
-      null === (t = this._$Do) || void 0 === t || t.setConnected(!0)
+    super.connectedCallback(), this._$Do?.setConnected(!0)
   }
   disconnectedCallback() {
-    var t
-    super.disconnectedCallback(),
-      null === (t = this._$Do) || void 0 === t || t.setConnected(!1)
+    super.disconnectedCallback(), this._$Do?.setConnected(!1)
   }
   render() {
-    return x$1
-  }
-}
-;(s$8.finalized = !0),
-  (s$8._$litElement$ = !0),
-  null === (l$4 = globalThis.litElementHydrateSupport) ||
-    void 0 === l$4 ||
-    l$4.call(globalThis, { LitElement: s$8 })
-const n$a = globalThis.litElementPolyfillSupport
-null == n$a || n$a({ LitElement: s$8 })
-;(null !== (o$c = globalThis.litElementVersions) && void 0 !== o$c
-  ? o$c
-  : (globalThis.litElementVersions = [])
-).push('3.2.2')
+    return w
+  }
+}
+;(s$9._$litElement$ = !0),
+  (s$9['finalized'] = !0),
+  globalThis.litElementHydrateSupport?.({ LitElement: s$9 })
+const r$5 = globalThis.litElementPolyfillSupport
+r$5?.({ LitElement: s$9 })
+;(globalThis.litElementVersions ??= []).push('4.0.2')
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-const e$g = e => n =>
-  'function' == typeof n
-    ? ((e, n) => (customElements.define(e, n), n))(e, n)
-    : ((e, n) => {
-        const { kind: t, elements: s } = n
-        return {
-          kind: t,
-          elements: s,
-          finisher(n) {
-            customElements.define(e, n)
-          },
-        }
-      })(e, n)
-
 /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * A divider component.
  */
-const i$6 = (i, e) =>
-  'method' === e.kind && e.descriptor && !('value' in e.descriptor)
-    ? {
-        ...e,
-        finisher(n) {
-          n.createProperty(e.key, i)
-        },
-      }
-    : {
-        kind: 'field',
-        key: Symbol(),
-        placement: 'own',
-        descriptor: {},
-        originalKey: e.key,
-        initializer() {
-          'function' == typeof e.initializer &&
-            (this[e.key] = e.initializer.call(this))
-        },
-        finisher(n) {
-          n.createProperty(e.key, i)
-        },
-      }
-function e$f(e) {
-  return (n, t) =>
-    void 0 !== t
-      ? ((i, e, n) => {
-          e.constructor.createProperty(n, i)
-        })(e, n, t)
-      : i$6(e, n)
+class Divider extends s$9 {
+  constructor() {
+    super(...arguments)
+    /**
+     * Indents the divider with equal padding on both sides.
+     */
+    this.inset = false
+    /**
+     * Indents the divider with padding on the leading side.
+     */
+    this.insetStart = false
+    /**
+     * Indents the divider with padding on the trailing side.
+     */
+    this.insetEnd = false
+  }
 }
+__decorate(
+  [n$b({ type: Boolean, reflect: true })],
+  Divider.prototype,
+  'inset',
+  void 0
+)
+__decorate(
+  [n$b({ type: Boolean, reflect: true, attribute: 'inset-start' })],
+  Divider.prototype,
+  'insetStart',
+  void 0
+)
+__decorate(
+  [n$b({ type: Boolean, reflect: true, attribute: 'inset-end' })],
+  Divider.prototype,
+  'insetEnd',
+  void 0
+)
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function t$7(t) {
-  return e$f({ ...t, state: !0 })
-}
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$f = i$8`:host{--_color: var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));--_thickness: var(--md-divider-thickness, 1px);box-sizing:border-box;color:var(--_color);display:flex;height:var(--_thickness);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}/*# sourceMappingURL=divider-styles.css.map */
+`
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-const o$b = ({ finisher: e, descriptor: t }) => (o, n) => {
-  var r
-  if (void 0 === n) {
-    const n = null !== (r = o.originalKey) && void 0 !== r ? r : o.key,
-      i =
-        null != t
-          ? {
-              kind: 'method',
-              placement: 'prototype',
-              key: n,
-              descriptor: t(o.key),
-            }
-          : { ...o, key: n }
-    return (
-      null != e &&
-        (i.finisher = function(t) {
-          e(t, n)
-        }),
-      i
-    )
-  }
-  {
-    const r = o.constructor
-    void 0 !== t && Object.defineProperty(o, n, t(n)), null == e || e(r, n)
-  }
-}
+/**
+ * @summary A divider is a thin line that groups content in lists and
+ * containers.
+ *
+ * @description Dividers can reinforce tapability, such as when used to separate
+ * list items or define tappable regions in an accordion.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdDivider = class MdDivider extends Divider {}
+MdDivider.styles = [styles$f]
+MdDivider = __decorate([t$9('md-divider')], MdDivider)
 
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ var n$9
-null !=
-(null === (n$9 = window.HTMLSlotElement) || void 0 === n$9
-  ? void 0
-  : n$9.prototype.assignedElements)
-  ? (o, n) => o.assignedElements(n)
-  : (o, n) => o.assignedNodes(n).filter(o => o.nodeType === Node.ELEMENT_NODE)
-
-var selectState = {}
+ */
+const t$6 = {
+    ATTRIBUTE: 1,
+    CHILD: 2,
+    PROPERTY: 3,
+    BOOLEAN_ATTRIBUTE: 4,
+    EVENT: 5,
+    ELEMENT: 6,
+  },
+  e$d = t => (...e) => ({ _$litDirective$: t, values: e })
+class i$5 {
+  constructor(t) {}
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AT(t, e, i) {
+    ;(this._$Ct = t), (this._$AM = e), (this._$Ci = i)
+  }
+  _$AS(t, e) {
+    return this.update(t, e)
+  }
+  update(t, e) {
+    return this.render(...e)
+  }
+}
 
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */
-class s$7 extends Event {
-  constructor(s, t, e) {
-    super('context-request', { bubbles: !0, composed: !0 }),
-      (this.context = s),
-      (this.callback = t),
-      (this.subscribe = e)
+ */ const e$c = e$d(
+  class extends i$5 {
+    constructor(t) {
+      if (
+        (super(t),
+        t.type !== t$6.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.it) {
+        ;(this.it = new Set()),
+          void 0 !== s.strings &&
+            (this.st = new Set(
+              s.strings
+                .join(' ')
+                .split(/\s/)
+                .filter(t => '' !== t)
+            ))
+        for (const t in i) i[t] && !this.st?.has(t) && this.it.add(t)
+        return this.render(i)
+      }
+      const r = s.element.classList
+      for (const t of this.it) t in i || (r.remove(t), this.it.delete(t))
+      for (const t in i) {
+        const s = !!i[t]
+        s === this.it.has(t) ||
+          this.st?.has(t) ||
+          (s ? (r.add(t), this.it.add(t)) : (r.remove(t), this.it.delete(t)))
+      }
+      return w
+    }
   }
-}
+)
 
 /**
  * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-function n$8(n) {
-  return n
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+const ARIA_PROPERTIES = [
+  'ariaAtomic',
+  'ariaAutoComplete',
+  'ariaBusy',
+  'ariaChecked',
+  'ariaColCount',
+  'ariaColIndex',
+  'ariaColSpan',
+  'ariaCurrent',
+  'ariaDisabled',
+  'ariaExpanded',
+  'ariaHasPopup',
+  'ariaHidden',
+  'ariaInvalid',
+  'ariaKeyShortcuts',
+  'ariaLabel',
+  'ariaLevel',
+  'ariaLive',
+  'ariaModal',
+  'ariaMultiLine',
+  'ariaMultiSelectable',
+  'ariaOrientation',
+  'ariaPlaceholder',
+  'ariaPosInSet',
+  'ariaPressed',
+  'ariaReadOnly',
+  'ariaRequired',
+  'ariaRoleDescription',
+  'ariaRowCount',
+  'ariaRowIndex',
+  'ariaRowSpan',
+  'ariaSelected',
+  'ariaSetSize',
+  'ariaSort',
+  'ariaValueMax',
+  'ariaValueMin',
+  'ariaValueNow',
+  'ariaValueText',
+]
+/**
+ * Accessibility Object Model aria attributes.
+ */
+ARIA_PROPERTIES.map(ariaPropertyToAttribute)
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+function ariaPropertyToAttribute(property) {
+  return (
+    property
+      .replace('aria', 'aria-')
+      // IDREF attributes also include an "Element" or "Elements" suffix
+      .replace(/Elements?/g, '')
+      .toLowerCase()
+  )
 }
-
 /**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ class s$6 {
-  constructor(t, s, i, h = !1) {
-    ;(this.host = t),
-      (this.context = s),
-      (this.callback = i),
-      (this.subscribe = h),
-      (this.provided = !1),
-      (this.value = void 0),
-      this.host.addController(this)
-  }
-  hostConnected() {
-    this.dispatchRequest()
+ * Enables a host custom element to be the target for aria roles and attributes.
+ * Components should set the `elementInternals.role` property.
+ *
+ * By default, aria components are tab focusable. Provide a `focusable: false`
+ * option for components that should not be tab focusable, such as
+ * `role="listbox"`.
+ *
+ * This function will also polyfill aria `ElementInternals` properties for
+ * Firefox.
+ *
+ * @param ctor The `ReactiveElement` constructor to set up.
+ * @param options Options to configure the element's host aria.
+ */
+function setupHostAria(ctor, { focusable } = {}) {
+  if (focusable !== false) {
+    ctor.addInitializer(host => {
+      host.addController({
+        hostConnected() {
+          if (host.hasAttribute('tabindex')) {
+            return
+          }
+          host.tabIndex = 0
+        },
+      })
+    })
   }
-  hostDisconnected() {
-    this.unsubscribe && (this.unsubscribe(), (this.unsubscribe = void 0))
+  if ('role' in Element.prototype) {
+    return
   }
-  dispatchRequest() {
-    this.host.dispatchEvent(
-      new s$7(
-        this.context,
-        (t, s) => {
-          this.unsubscribe &&
-            (this.unsubscribe !== s &&
-              ((this.provided = !1), this.unsubscribe()),
-            this.subscribe || this.unsubscribe()),
-            (this.value = t),
-            this.host.requestUpdate(),
-            (this.provided && !this.subscribe) ||
-              ((this.provided = !0), this.callback && this.callback(t, s)),
-            (this.unsubscribe = s)
-        },
-        this.subscribe
-      )
-    )
+  // Polyfill reflective aria properties for Firefox
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    ctor.createProperty(ariaProperty, {
+      attribute: ariaPropertyToAttribute(ariaProperty),
+      reflect: true,
+    })
   }
+  ctor.createProperty('role', { reflect: true })
 }
-
 /**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Polyfills an element and its `ElementInternals` to support `ARIAMixin`
+ * properties on internals. This is needed for Firefox.
+ *
+ * `setupHostAria()` must be called for the element class.
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     setupHostAria(XButton);
+ *   }
+ *
+ *   private internals =
+ *       polyfillElementInternalsAria(this, this.attachInternals());
+ *
+ *   constructor() {
+ *     super();
+ *     this.internals.role = 'button';
+ *   }
+ * }
  */
-class t$6 {
-  constructor(t) {
-    ;(this.callbacks = new Map()),
-      (this.updateObservers = () => {
-        for (const [t, s] of this.callbacks) t(this.t, s)
-      }),
-      void 0 !== t && (this.value = t)
-  }
-  get value() {
-    return this.t
-  }
-  set value(t) {
-    this.setValue(t)
+function polyfillElementInternalsAria(host, internals) {
+  if (checkIfElementInternalsSupportsAria(internals)) {
+    return internals
   }
-  setValue(t, s = !1) {
-    const i = s || !Object.is(t, this.t)
-    ;(this.t = t), i && this.updateObservers()
+  if (!('role' in host)) {
+    throw new Error('Missing setupHostAria()')
   }
-  addCallback(t, s) {
-    s &&
-      (this.callbacks.has(t) ||
-        this.callbacks.set(t, () => {
-          this.callbacks.delete(t)
-        })),
-      t(this.value)
+  let firstConnectedCallbacks = []
+  let hasBeenConnected = false
+  // Add support for Firefox, which has not yet implement ElementInternals aria
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    let internalAriaValue = null
+    Object.defineProperty(internals, ariaProperty, {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return internalAriaValue
+      },
+      set(value) {
+        const setValue = () => {
+          internalAriaValue = value
+          if (!hasBeenConnected) {
+            firstConnectedCallbacks.push({
+              property: ariaProperty,
+              callback: setValue,
+            })
+            return
+          }
+          // Dynamic lookup rather than hardcoding all properties.
+          // tslint:disable-next-line:no-dict-access-on-struct-type
+          host[ariaProperty] = value
+        }
+        setValue()
+      },
+    })
   }
-  clearCallbacks() {
-    this.callbacks.clear()
+  let internalRoleValue = null
+  Object.defineProperty(internals, 'role', {
+    enumerable: true,
+    configurable: true,
+    get() {
+      return internalRoleValue
+    },
+    set(value) {
+      const setRole = () => {
+        internalRoleValue = value
+        if (!hasBeenConnected) {
+          firstConnectedCallbacks.push({
+            property: 'role',
+            callback: setRole,
+          })
+          return
+        }
+        if (value === null) {
+          host.removeAttribute('role')
+        } else {
+          host.setAttribute('role', value)
+        }
+      }
+      setRole()
+    },
+  })
+  host.addController({
+    hostConnected() {
+      if (hasBeenConnected) {
+        return
+      }
+      hasBeenConnected = true
+      const propertiesSetByUser = new Set()
+      // See which properties were set by the user on host before we apply
+      // internals values as attributes to host. Needs to be done in another
+      // for loop because the callbacks set these attributes on host.
+      for (const { property } of firstConnectedCallbacks) {
+        const wasSetByUser =
+          host.getAttribute(ariaPropertyToAttribute(property)) !== null ||
+          // Dynamic lookup rather than hardcoding all properties.
+          // tslint:disable-next-line:no-dict-access-on-struct-type
+          host[property] !== undefined
+        if (wasSetByUser) {
+          propertiesSetByUser.add(property)
+        }
+      }
+      for (const { property, callback } of firstConnectedCallbacks) {
+        // If the user has set the attribute or property, do not override the
+        // user's value
+        if (propertiesSetByUser.has(property)) {
+          continue
+        }
+        callback()
+      }
+      // Remove strong callback references
+      firstConnectedCallbacks = []
+    },
+  })
+  return internals
+}
+// Separate function so that typescript doesn't complain about internals being
+// "never".
+function checkIfElementInternalsSupportsAria(internals) {
+  return 'role' in internals
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Sets up a `ReactiveElement` constructor to enable updates when delegating
+ * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
+ * attributes in their render functions.
+ *
+ * This function will:
+ * - Call `requestUpdate()` when an aria attribute changes.
+ * - Add `role="presentation"` to the host.
+ *
+ * NOTE: The following features are not currently supported:
+ * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
+ * - Delegating the `role` attribute
+ *
+ * @example
+ * class XButton extends LitElement {
+ *   static {
+ *     requestUpdateOnAriaChange(XButton);
+ *   }
+ *
+ *   protected override render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+function requestUpdateOnAriaChange(ctor) {
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    ctor.createProperty(ariaProperty, {
+      attribute: ariaPropertyToAttribute(ariaProperty),
+      reflect: true,
+    })
   }
+  ctor.addInitializer(element => {
+    const controller = {
+      hostConnected() {
+        element.setAttribute('role', 'presentation')
+      },
+    }
+    element.addController(controller)
+  })
 }
 
 /**
  * @license
  * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ class s$5 extends Event {
-  constructor(t) {
-    super('context-provider', { bubbles: !0, composed: !0 }), (this.context = t)
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+function redispatchEvent(element, event) {
+  // For bubbling events in SSR light DOM (or composed), stop their propagation
+  // and dispatch the copy.
+  if (event.bubbles && (!element.shadowRoot || event.composed)) {
+    event.stopPropagation()
+  }
+  const copy = Reflect.construct(event.constructor, [event.type, event])
+  const dispatched = element.dispatchEvent(copy)
+  if (!dispatched) {
+    event.preventDefault()
   }
+  return dispatched
 }
-class e$e extends t$6 {
-  constructor(t, s, e) {
-    super(e),
-      (this.host = t),
-      (this.context = s),
-      (this.onContextRequest = t => {
-        t.context === this.context &&
-          t.composedPath()[0] !== this.host &&
-          (t.stopPropagation(), this.addCallback(t.callback, t.subscribe))
-      }),
-      this.attachListeners(),
-      this.host.addController(this)
+/**
+ * Dispatches a click event to the given element that triggers a native action,
+ * but is not composed and therefore is not seen outside the element.
+ *
+ * This is useful for responding to an external click event on the host element
+ * that should trigger an internal action like a button click.
+ *
+ * Note, a helper is provided because setting this up correctly is a bit tricky.
+ * In particular, calling `click` on an element creates a composed event, which
+ * is not desirable, and a manually dispatched event must specifically be a
+ * `MouseEvent` to trigger a native action.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function dispatchActivationClick(element) {
+  const event = new MouseEvent('click', { bubbles: true })
+  element.dispatchEvent(event)
+  return event
+}
+/**
+ * Returns true if the click event should trigger an activation behavior. The
+ * behavior is defined by the element and is whatever it should do when
+ * clicked.
+ *
+ * Typically when an element needs to handle a click, the click is generated
+ * from within the element and an event listener within the element implements
+ * the needed behavior; however, it's possible to fire a click directly
+ * at the element that the element should handle. This method helps
+ * distinguish these "external" clicks.
+ *
+ * An "external" click can be triggered in a number of ways: via a click
+ * on an associated label for a form  associated element, calling
+ * `element.click()`, or calling
+ * `element.dispatchEvent(new MouseEvent('click', ...))`.
+ *
+ * Also works around Firefox issue
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching
+ * events for a microtask after called.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function isActivationClick(event) {
+  // Event must start at the event target.
+  if (event.currentTarget !== event.target) {
+    return false
   }
-  attachListeners() {
-    this.host.addEventListener('context-request', this.onContextRequest)
+  // Event must not be retargeted from shadowRoot.
+  if (event.composedPath()[0] !== event.target) {
+    return false
   }
-  hostConnected() {
-    this.host.dispatchEvent(new s$5(this.context))
+  // Target must not be disabled; this should only occur for a synthetically
+  // dispatched click.
+  if (event.target.disabled) {
+    return false
+  }
+  // This is an activation if the event should not be squelched.
+  return !squelchEvent(event)
+}
+// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
+//  Remove when Firefox bug is addressed.
+function squelchEvent(event) {
+  const squelched = isSquelchingEvents
+  if (squelched) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
   }
+  squelchEventsForMicrotask()
+  return squelched
+}
+// Ignore events for one microtask only.
+let isSquelchingEvents = false
+async function squelchEventsForMicrotask() {
+  isSquelchingEvents = true
+  // Need to pause for just one microtask.
+  // tslint:disable-next-line
+  await null
+  isSquelchingEvents = false
 }
 
 /**
  * @license
  * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ class e$d {
-  constructor() {
-    ;(this.pendingContextRequests = new Map()),
-      (this.onContextProvider = e => {
-        const s = this.pendingContextRequests.get(e.context)
-        s &&
-          (this.pendingContextRequests.delete(e.context),
-          s.forEach(s => {
-            const c = s.element,
-              i = s.callback
-            c && c.dispatchEvent(new s$7(e.context, i, !0))
-          }))
-      }),
-      (this.onContextRequest = t => {
-        if (!t.subscribe) return
-        const e = { element: t.target, callback: t.callback }
-        let s = this.pendingContextRequests.get(t.context)
-        s || ((s = new Set()), this.pendingContextRequests.set(t.context, s)),
-          s.add(e)
-      })
-  }
-  attach(t) {
-    t.addEventListener('context-request', this.onContextRequest),
-      t.addEventListener('context-provider', this.onContextProvider)
-  }
-  detach(t) {
-    t.removeEventListener('context-request', this.onContextRequest),
-      t.removeEventListener('context-provider', this.onContextProvider)
-  }
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+const EASING = {
+  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
+  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
+  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
+  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
+  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
+  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
 }
-
 /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function o$a({ context: o }) {
-  return o$b({
-    finisher: (t, n) => {
-      const r = new WeakMap()
-      t.addInitializer(t => {
-        r.set(t, new e$e(t, o))
-      })
-      const i = Object.getOwnPropertyDescriptor(t.prototype, n),
-        c = null == i ? void 0 : i.set,
-        s = {
-          ...i,
-          set: function(t) {
-            var e
-            null === (e = r.get(this)) || void 0 === e || e.setValue(t),
-              c && c.call(this, t)
-          },
-        }
-      Object.defineProperty(t.prototype, n, s)
+ * Creates an `AnimationSignal` that can be used to cancel a previous task.
+ *
+ * @example
+ * class MyClass {
+ *   private labelAnimationSignal = createAnimationSignal();
+ *
+ *   private async animateLabel() {
+ *     // Start of the task. Previous tasks will be canceled.
+ *     const signal = this.labelAnimationSignal.start();
+ *
+ *     // Do async work...
+ *     if (signal.aborted) {
+ *       // Use AbortSignal to check if a request was made to abort after some
+ *       // asynchronous work.
+ *       return;
+ *     }
+ *
+ *     const animation = this.animate(...);
+ *     // Add event listeners to be notified when the task should be canceled.
+ *     signal.addEventListener('abort', () => {
+ *       animation.cancel();
+ *     });
+ *
+ *     animation.addEventListener('finish', () => {
+ *       // Tell the signal that the current task is finished.
+ *       this.labelAnimationSignal.finish();
+ *     });
+ *   }
+ * }
+ *
+ * @return An `AnimationSignal`.
+ */
+function createAnimationSignal() {
+  // The current animation's AbortController
+  let animationAbortController = null
+  return {
+    start() {
+      // Tell the previous animation to cancel.
+      animationAbortController?.abort()
+      // Set up a new AbortController for the current animation.
+      animationAbortController = new AbortController()
+      // Provide the AbortSignal so that the caller can check aborted status
+      // and add listeners.
+      return animationAbortController.signal
     },
-  })
+    finish() {
+      animationAbortController = null
+    },
+  }
 }
 
 /**
  * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function t$5({ context: t, subscribe: o }) {
-  return o$b({
-    finisher: (e, n) => {
-      e.addInitializer(e => {
-        new s$6(
-          e,
-          t,
-          r => {
-            e[n] = r
-          },
-          o
-        )
-      })
-    },
-  })
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The default dialog open animation.
+ */
+const DIALOG_DEFAULT_OPEN_ANIMATION = {
+  dialog: [
+    [
+      // Dialog slide down
+      [{ transform: 'translateY(-50px)' }, { transform: 'translateY(0)' }],
+      { duration: 500, easing: EASING.EMPHASIZED },
+    ],
+  ],
+  scrim: [
+    [
+      // Scrim fade in
+      [{ opacity: 0 }, { opacity: 0.32 }],
+      { duration: 500, easing: 'linear' },
+    ],
+  ],
+  container: [
+    [
+      // Container fade in
+      [{ opacity: 0 }, { opacity: 1 }],
+      { duration: 50, easing: 'linear', pseudoElement: '::before' },
+    ],
+    [
+      // Container grow
+      // Note: current spec says to grow from 0dp->100% and shrink from
+      // 100%->35%. We change this to 35%->100% to simplify the animation that
+      // is supposed to clip content as it grows. From 0dp it's possible to see
+      // text/actions appear before the container has fully grown.
+      [{ height: '35%' }, { height: '100%' }],
+      { duration: 500, easing: EASING.EMPHASIZED, pseudoElement: '::before' },
+    ],
+  ],
+  headline: [
+    [
+      // Headline fade in
+      [{ opacity: 0 }, { opacity: 0, offset: 0.2 }, { opacity: 1 }],
+      { duration: 250, easing: 'linear', fill: 'forwards' },
+    ],
+  ],
+  content: [
+    [
+      // Content fade in
+      [{ opacity: 0 }, { opacity: 0, offset: 0.2 }, { opacity: 1 }],
+      { duration: 250, easing: 'linear', fill: 'forwards' },
+    ],
+  ],
+  actions: [
+    [
+      // Actions fade in
+      [{ opacity: 0 }, { opacity: 0, offset: 0.5 }, { opacity: 1 }],
+      { duration: 300, easing: 'linear', fill: 'forwards' },
+    ],
+  ],
+}
+/**
+ * The default dialog close animation.
+ */
+const DIALOG_DEFAULT_CLOSE_ANIMATION = {
+  dialog: [
+    [
+      // Dialog slide up
+      [{ transform: 'translateY(0)' }, { transform: 'translateY(-50px)' }],
+      { duration: 150, easing: EASING.EMPHASIZED_ACCELERATE },
+    ],
+  ],
+  scrim: [
+    [
+      // Scrim fade out
+      [{ opacity: 0.32 }, { opacity: 0 }],
+      { duration: 150, easing: 'linear' },
+    ],
+  ],
+  container: [
+    [
+      // Container shrink
+      [{ height: '100%' }, { height: '35%' }],
+      {
+        duration: 150,
+        easing: EASING.EMPHASIZED_ACCELERATE,
+        pseudoElement: '::before',
+      },
+    ],
+    [
+      // Container fade out
+      [{ opacity: '1' }, { opacity: '0' }],
+      { delay: 100, duration: 50, easing: 'linear', pseudoElement: '::before' },
+    ],
+  ],
+  headline: [
+    [
+      // Headline fade out
+      [{ opacity: 1 }, { opacity: 0 }],
+      { duration: 100, easing: 'linear', fill: 'forwards' },
+    ],
+  ],
+  content: [
+    [
+      // Content fade out
+      [{ opacity: 1 }, { opacity: 0 }],
+      { duration: 100, easing: 'linear', fill: 'forwards' },
+    ],
+  ],
+  actions: [
+    [
+      // Actions fade out
+      [{ opacity: 1 }, { opacity: 0 }],
+      { duration: 100, easing: 'linear', fill: 'forwards' },
+    ],
+  ],
 }
 
 /**
  * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const e$c = o$a,
-  r$8 = t$5
-
-var context = /*#__PURE__*/ Object.freeze({
-  __proto__: null,
-  contextProvided: r$8,
-  contextProvider: e$c,
-  ContextEvent: s$7,
-  createContext: n$8,
-  ContextConsumer: s$6,
-  ContextProvider: e$e,
-  ContextRoot: e$d,
-  provide: o$a,
-  consume: t$5,
-})
-
-var require$$0 = /*@__PURE__*/ getAugmentedNamespace(context)
-
-var selectController = {}
-
-;(function(exports) {
-  Object.defineProperty(exports, '__esModule', { value: true })
-  exports.connectSelector = exports.SelectorController = exports.getSnapshot = exports.getServiceSnapshot = exports.isActorWithState = exports.isService = exports.defaultCompare = void 0
-  const defaultCompare = (a, b) => a === b
-  exports.defaultCompare = defaultCompare
-  function isService(actor) {
-    return 'state' in actor && 'machine' in actor
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A dialog component.
+ *
+ * @fires open Dispatched when the dialog is opening before any animations.
+ * @fires opened Dispatched when the dialog has opened after any animations.
+ * @fires close Dispatched when the dialog is closing before any animations.
+ * @fires closed Dispatched when the dialog has closed after any animations.
+ * @fires cancel Dispatched when the dialog has been canceled by clicking on the
+ *     scrim or pressing Escape.
+ */
+class Dialog extends s$9 {
+  /**
+   * Opens the dialog when set to `true` and closes it when set to `false`.
+   */
+  get open() {
+    return this.isOpen
   }
-  exports.isService = isService
-  function isActorWithState(actorRef) {
-    return 'state' in actorRef
+  set open(open) {
+    if (open === this.isOpen) {
+      return
+    }
+    this.isOpen = open
+    if (open) {
+      this.setAttribute('open', '')
+      this.show()
+    } else {
+      this.removeAttribute('open')
+      this.close()
+    }
   }
-  exports.isActorWithState = isActorWithState
-  function getServiceSnapshot(service) {
-    return service.status !== 0
-      ? service.getSnapshot()
-      : service.machine.initialState
+  constructor() {
+    super()
+    /**
+     * Gets or sets the dialog's return value, usually to indicate which button
+     * a user pressed to close it.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue
+     */
+    this.returnValue = ''
+    /**
+     * Gets the opening animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    this.getOpenAnimation = () => DIALOG_DEFAULT_OPEN_ANIMATION
+    /**
+     * Gets the closing animation for a dialog. Set to a new function to customize
+     * the animation.
+     */
+    this.getCloseAnimation = () => DIALOG_DEFAULT_CLOSE_ANIMATION
+    this.isOpen = false
+    this.isOpening = false
+    this.isConnectedPromise = this.getIsConnectedPromise()
+    this.isAtScrollTop = false
+    this.isAtScrollBottom = false
+    this.nextClickIsFromContent = false
+    // Dialogs should not be SSR'd while open, so we can just use runtime checks.
+    this.hasHeadline = false
+    this.hasActions = false
+    this.hasIcon = false
+    {
+      this.addEventListener('submit', this.handleSubmit)
+    }
   }
-  exports.getServiceSnapshot = getServiceSnapshot
-  function getSnapshot(actorRef) {
-    if (isService(actorRef)) {
-      return getServiceSnapshot(actorRef)
+  /**
+   * Opens the dialog and fires a cancelable `open` event. After a dialog's
+   * animation, an `opened` event is fired.
+   *
+   * Add an `autocomplete` attribute to a child of the dialog that should
+   * receive focus after opening.
+   *
+   * @return A Promise that resolves after the animation is finished and the
+   *     `opened` event was fired.
+   */
+  async show() {
+    this.isOpening = true
+    // Dialogs can be opened before being attached to the DOM, so we need to
+    // wait until we're connected before calling `showModal()`.
+    await this.isConnectedPromise
+    await this.updateComplete
+    const dialog = this.dialog
+    // Check if already opened or if `dialog.close()` was called while awaiting.
+    if (dialog.open || !this.isOpening) {
+      this.isOpening = false
+      return
     }
-    return isActorWithState(actorRef) ? actorRef.state : undefined
+    const preventOpen = !this.dispatchEvent(
+      new Event('open', { cancelable: true })
+    )
+    if (preventOpen) {
+      this.open = false
+      return
+    }
+    // All Material dialogs are modal.
+    dialog.showModal()
+    this.open = true
+    // Reset scroll position if re-opening a dialog with the same content.
+    if (this.scroller) {
+      this.scroller.scrollTop = 0
+    }
+    // Native modal dialogs ignore autofocus and instead force focus to the
+    // first focusable child. Override this behavior if there is a child with
+    // an autofocus attribute.
+    this.querySelector('[autofocus]')?.focus()
+    await this.animateDialog(this.getOpenAnimation())
+    this.dispatchEvent(new Event('opened'))
+    this.isOpening = false
   }
-  exports.getSnapshot = getSnapshot
-  class SelectorController {
-    host
-    subscription
-    selected
-    constructor(host, actorRef, selector, compare = exports.defaultCompare) {
-      this.host = host
-      this.host.addController(this)
-      this.selected = selector(getSnapshot(actorRef))
-      this.subscription = actorRef.subscribe(emitted => {
-        const nextSelected = selector(emitted)
-        if (!compare(this.selected, nextSelected)) {
-          this.selected = nextSelected
-          this.host.requestUpdate()
-        }
-      })
+  /**
+   * Closes the dialog and fires a cancelable `close` event. After a dialog's
+   * animation, a `closed` event is fired.
+   *
+   * @param returnValue A return value usually indicating which button was used
+   *     to close a dialog. If a dialog is canceled by clicking the scrim or
+   *     pressing Escape, it will not change the return value after closing.
+   * @return A Promise that resolves after the animation is finished and the
+   *     `closed` event was fired.
+   */
+  async close(returnValue = this.returnValue) {
+    this.isOpening = false
+    if (!this.isConnected) {
+      // Disconnected dialogs do not fire close events or animate.
+      this.open = false
+      return
     }
-    get value() {
-      return this.selected
+    await this.updateComplete
+    const dialog = this.dialog
+    // Check if already closed or if `dialog.show()` was called while awaiting.
+    if (!dialog.open || this.isOpening) {
+      this.open = false
+      return
     }
-    hostDisconnected() {
-      this.subscription.unsubscribe()
+    const prevReturnValue = this.returnValue
+    this.returnValue = returnValue
+    const preventClose = !this.dispatchEvent(
+      new Event('close', { cancelable: true })
+    )
+    if (preventClose) {
+      this.returnValue = prevReturnValue
+      return
     }
+    await this.animateDialog(this.getCloseAnimation())
+    dialog.close(returnValue)
+    this.open = false
+    this.dispatchEvent(new Event('closed'))
   }
-  exports.SelectorController = SelectorController
-  function connectSelector(
-    host,
-    actorRef,
-    selector,
-    compare = exports.defaultCompare
-  ) {
-    return new SelectorController(host, actorRef, selector, compare)
+  connectedCallback() {
+    super.connectedCallback()
+    this.isConnectedPromiseResolve()
   }
-  exports.connectSelector = connectSelector
-})(selectController)
-
-Object.defineProperty(selectState, '__esModule', { value: true })
-selectState.compareObjects = compareArrays_1 = selectState.compareArrays = connectState_1 = selectState.connectState = selectState.SelectState = void 0
-const context_1 = require$$0
-const select_controller_js_1 = selectController
-class SelectState {
-  serviceContext
-  selectorController
-  host
-  selector
-  compare // if current value same as old value, return true
-  constructor(
-    context,
-    host,
-    selector,
-    compare = select_controller_js_1.defaultCompare
-  ) {
-    ;(this.host = host).addController(this)
-    this.serviceContext = new context_1.ContextConsumer(
-      this.host,
-      context,
-      undefined,
-      true
-    )
-    this.selector = selector
-    this.compare = compare
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.isConnectedPromise = this.getIsConnectedPromise()
   }
-  hostConnected() {
-    // has hostConnected already been called?
-    if (this.selectorController) {
-      this.hostDisconnected()
+  render() {
+    const scrollable =
+      this.open && !(this.isAtScrollTop && this.isAtScrollBottom)
+    const classes = {
+      'has-headline': this.hasHeadline,
+      'has-actions': this.hasActions,
+      'has-icon': this.hasIcon,
+      scrollable: scrollable,
+      'show-top-divider': scrollable && !this.isAtScrollTop,
+      'show-bottom-divider': scrollable && !this.isAtScrollBottom,
     }
-    this.serviceContext.hostConnected()
-    this.selectorController = new select_controller_js_1.SelectorController(
-      this.host,
-      this.serviceContext.value.service,
-      this.selector,
-      this.compare
-    )
-  }
-  hostDisconnected() {
-    this.serviceContext?.hostDisconnected()
-    this.selectorController?.hostDisconnected()
-  }
-  get value() {
-    return this.selectorController?.value
+    const { ariaLabel } = this
+    return x$1`
+      <div class="scrim"></div>
+      <dialog
+        class=${e$c(classes)}
+        aria-label=${ariaLabel || T$1}
+        aria-labelledby=${this.hasHeadline ? 'headline' : T$1}
+        role=${this.type === 'alert' ? 'alertdialog' : T$1}
+        @cancel=${this.handleCancel}
+        @click=${this.handleDialogClick}
+        .returnValue=${this.returnValue || T$1}
+      >
+        <div class="container"
+          @click=${this.handleContentClick}
+        >
+          <div class="headline">
+            <div class="icon" aria-hidden="true">
+              <slot name="icon" @slotchange=${this.handleIconChange}></slot>
+            </div>
+            <h2 id="headline" aria-hidden=${!this.hasHeadline || T$1}>
+              <slot name="headline"
+                  @slotchange=${this.handleHeadlineChange}></slot>
+            </h2>
+            <md-divider></md-divider>
+          </div>
+          <div class="scroller">
+            <div class="content">
+              <div class="top anchor"></div>
+              <slot name="content"></slot>
+              <div class="bottom anchor"></div>
+            </div>
+          </div>
+          <div class="actions">
+            <md-divider></md-divider>
+            <slot name="actions"
+              @slotchange=${this.handleActionsChange}></slot>
+          </div>
+        </div>
+      </dialog>
+    `
   }
-}
-selectState.SelectState = SelectState
-// Factory function for SelectState
-function connectState(
-  context,
-  host,
-  selector,
-  compare = select_controller_js_1.defaultCompare
-) {
-  return new SelectState(context, host, selector, compare)
-}
-var connectState_1 = (selectState.connectState = connectState)
-const compareArrays = (a, b) =>
-  a.length === b.length && a.every((value, idx) => value === b[idx])
-var compareArrays_1 = (selectState.compareArrays = compareArrays)
-const compareObjects = (obj1, obj2) =>
-  Object.keys(obj1).length === Object.keys(obj2).length &&
-  Object.keys(obj1).every(key => {
-    return (
-      Object.prototype.hasOwnProperty.call(obj2, key) && obj1[key] === obj2[key]
+  firstUpdated() {
+    this.intersectionObserver = new IntersectionObserver(
+      entries => {
+        for (const entry of entries) {
+          this.handleAnchorIntersection(entry)
+        }
+      },
+      { root: this.scroller }
     )
-  })
-selectState.compareObjects = compareObjects
-
-// "Inject" XState context into components with DOM events
-const viewerContext = n$8('viewer-context')
-let appContext
-const setContext = context => {
-  appContext = context
-}
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const e$b = o => void 0 === o.strings
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$4 = {
-    ATTRIBUTE: 1,
-    CHILD: 2,
-    PROPERTY: 3,
-    BOOLEAN_ATTRIBUTE: 4,
-    EVENT: 5,
-    ELEMENT: 6,
-  },
-  e$a = t => (...e) => ({ _$litDirective$: t, values: e })
-class i$5 {
-  constructor(t) {}
-  get _$AU() {
-    return this._$AM._$AU
+    this.intersectionObserver.observe(this.topAnchor)
+    this.intersectionObserver.observe(this.bottomAnchor)
+  }
+  handleDialogClick() {
+    if (this.nextClickIsFromContent) {
+      // Avoid doing a layout calculation below if we know the click came from
+      // content.
+      this.nextClickIsFromContent = false
+      return
+    }
+    // Click originated on the backdrop. Native `<dialog>`s will not cancel,
+    // but Material dialogs do.
+    const preventDefault = !this.dispatchEvent(
+      new Event('cancel', { cancelable: true })
+    )
+    if (preventDefault) {
+      return
+    }
+    this.close()
   }
-  _$AT(t, e, i) {
-    ;(this._$Ct = t), (this._$AM = e), (this._$Ci = i)
+  handleContentClick() {
+    this.nextClickIsFromContent = true
   }
-  _$AS(t, e) {
-    return this.update(t, e)
+  handleSubmit(event) {
+    const form = event.target
+    const { submitter } = event
+    if (form.method !== 'dialog' || !submitter) {
+      return
+    }
+    // Close reason is the submitter's value attribute, or the dialog's
+    // `returnValue` if there is no attribute.
+    this.close(submitter.getAttribute('value') ?? this.returnValue)
   }
-  update(t, e) {
-    return this.render(...e)
+  handleCancel(event) {
+    if (event.target !== this.dialog) {
+      // Ignore any cancel events dispatched by content.
+      return
+    }
+    const preventDefault = !redispatchEvent(this, event)
+    // We always prevent default on the original dialog event since we'll
+    // animate closing it before it actually closes.
+    event.preventDefault()
+    if (preventDefault) {
+      return
+    }
+    this.close()
   }
-}
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const s$4 = (i, t) => {
-    var e, o
-    const r = i._$AN
-    if (void 0 === r) return !1
-    for (const i of r)
-      null === (o = (e = i)._$AO) || void 0 === o || o.call(e, t, !1), s$4(i, t)
-    return !0
-  },
-  o$9 = i => {
-    let t, e
-    do {
-      if (void 0 === (t = i._$AM)) break
-      ;(e = t._$AN), e.delete(i), (i = t)
-    } while (0 === (null == e ? void 0 : e.size))
-  },
-  r$7 = i => {
-    for (let t; (t = i._$AM); i = t) {
-      let e = t._$AN
-      if (void 0 === e) t._$AN = e = new Set()
-      else if (e.has(i)) break
-      e.add(i), l$3(t)
+  async animateDialog(animation) {
+    const { dialog, scrim, container, headline, content, actions } = this
+    if (!dialog || !scrim || !container || !headline || !content || !actions) {
+      return
+    }
+    const {
+      container: containerAnimate,
+      dialog: dialogAnimate,
+      scrim: scrimAnimate,
+      headline: headlineAnimate,
+      content: contentAnimate,
+      actions: actionsAnimate,
+    } = animation
+    const elementAndAnimation = [
+      [dialog, dialogAnimate ?? []],
+      [scrim, scrimAnimate ?? []],
+      [container, containerAnimate ?? []],
+      [headline, headlineAnimate ?? []],
+      [content, contentAnimate ?? []],
+      [actions, actionsAnimate ?? []],
+    ]
+    const animations = []
+    for (const [element, animation] of elementAndAnimation) {
+      for (const animateArgs of animation) {
+        animations.push(element.animate(...animateArgs))
+      }
     }
+    await Promise.all(animations.map(animation => animation.finished))
   }
-function n$7(i) {
-  void 0 !== this._$AN
-    ? (o$9(this), (this._$AM = i), r$7(this))
-    : (this._$AM = i)
-}
-function h$3(i, t = !1, e = 0) {
-  const r = this._$AH,
-    n = this._$AN
-  if (void 0 !== n && 0 !== n.size)
-    if (t)
-      if (Array.isArray(r))
-        for (let i = e; i < r.length; i++) s$4(r[i], !1), o$9(r[i])
-      else null != r && (s$4(r, !1), o$9(r))
-    else s$4(this, i)
-}
-const l$3 = i => {
-  var t, s, o, r
-  i.type == t$4.CHILD &&
-    ((null !== (t = (o = i)._$AP) && void 0 !== t) || (o._$AP = h$3),
-    (null !== (s = (r = i)._$AQ) && void 0 !== s) || (r._$AQ = n$7))
-}
-class c$3 extends i$5 {
-  constructor() {
-    super(...arguments), (this._$AN = void 0)
+  handleHeadlineChange(event) {
+    const slot = event.target
+    this.hasHeadline = slot.assignedElements().length > 0
   }
-  _$AT(i, t, e) {
-    super._$AT(i, t, e), r$7(this), (this.isConnected = i._$AU)
+  handleActionsChange(event) {
+    const slot = event.target
+    this.hasActions = slot.assignedElements().length > 0
   }
-  _$AO(i, t = !0) {
-    var e, r
-    i !== this.isConnected &&
-      ((this.isConnected = i),
-      i
-        ? null === (e = this.reconnected) || void 0 === e || e.call(this)
-        : null === (r = this.disconnected) || void 0 === r || r.call(this)),
-      t && (s$4(this, i), o$9(this))
+  handleIconChange(event) {
+    const slot = event.target
+    this.hasIcon = slot.assignedElements().length > 0
   }
-  setValue(t) {
-    if (e$b(this._$Ct)) this._$Ct._$AI(t, this)
-    else {
-      const i = [...this._$Ct._$AH]
-      ;(i[this._$Ci] = t), this._$Ct._$AI(i, this, 0)
+  handleAnchorIntersection(entry) {
+    const { target, isIntersecting } = entry
+    if (target === this.topAnchor) {
+      this.isAtScrollTop = isIntersecting
+    }
+    if (target === this.bottomAnchor) {
+      this.isAtScrollBottom = isIntersecting
     }
   }
-  disconnected() {}
-  reconnected() {}
+  getIsConnectedPromise() {
+    return new Promise(resolve => {
+      this.isConnectedPromiseResolve = resolve
+    })
+  }
+}
+;(() => {
+  requestUpdateOnAriaChange(Dialog)
+})()
+/** @nocollapse */
+Dialog.shadowRootOptions = {
+  ...s$9.shadowRootOptions,
+  delegatesFocus: true,
 }
+__decorate([n$b({ type: Boolean })], Dialog.prototype, 'open', null)
+__decorate([n$b({ attribute: false })], Dialog.prototype, 'returnValue', void 0)
+__decorate([n$b()], Dialog.prototype, 'type', void 0)
+__decorate([e$g('dialog')], Dialog.prototype, 'dialog', void 0)
+__decorate([e$g('.scrim')], Dialog.prototype, 'scrim', void 0)
+__decorate([e$g('.container')], Dialog.prototype, 'container', void 0)
+__decorate([e$g('.headline')], Dialog.prototype, 'headline', void 0)
+__decorate([e$g('.content')], Dialog.prototype, 'content', void 0)
+__decorate([e$g('.actions')], Dialog.prototype, 'actions', void 0)
+__decorate([r$8()], Dialog.prototype, 'isAtScrollTop', void 0)
+__decorate([r$8()], Dialog.prototype, 'isAtScrollBottom', void 0)
+__decorate([e$g('.scroller')], Dialog.prototype, 'scroller', void 0)
+__decorate([e$g('.top.anchor')], Dialog.prototype, 'topAnchor', void 0)
+__decorate([e$g('.bottom.anchor')], Dialog.prototype, 'bottomAnchor', void 0)
+__decorate([r$8()], Dialog.prototype, 'hasHeadline', void 0)
+__decorate([r$8()], Dialog.prototype, 'hasActions', void 0)
+__decorate([r$8()], Dialog.prototype, 'hasIcon', void 0)
 
 /**
  * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const e$9 = () => new o$8()
-class o$8 {}
-const h$2 = new WeakMap(),
-  n$6 = e$a(
-    class extends c$3 {
-      render(t) {
-        return b$1
-      }
-      update(t, [s]) {
-        var e
-        const o = s !== this.Y
-        return (
-          o && void 0 !== this.Y && this.rt(void 0),
-          (o || this.lt !== this.ct) &&
-            ((this.Y = s),
-            (this.dt =
-              null === (e = t.options) || void 0 === e ? void 0 : e.host),
-            this.rt((this.ct = t.element))),
-          b$1
-        )
-      }
-      rt(i) {
-        var t
-        if ('function' == typeof this.Y) {
-          const s = null !== (t = this.dt) && void 0 !== t ? t : globalThis
-          let e = h$2.get(s)
-          void 0 === e && ((e = new WeakMap()), h$2.set(s, e)),
-            void 0 !== e.get(this.Y) && this.Y.call(this.dt, void 0),
-            e.set(this.Y, i),
-            void 0 !== i && this.Y.call(this.dt, i)
-        } else this.Y.value = i
-      }
-      get lt() {
-        var i, t, s
-        return 'function' == typeof this.Y
-          ? null ===
-              (t = h$2.get(
-                null !== (i = this.dt) && void 0 !== i ? i : globalThis
-              )) || void 0 === t
-            ? void 0
-            : t.get(this.Y)
-          : null === (s = this.Y) || void 0 === s
-          ? void 0
-          : s.value
-      }
-      disconnected() {
-        this.lt === this.ct && this.rt(void 0)
-      }
-      reconnected() {
-        this.rt(this.ct)
-      }
-    }
-  )
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$e = i$8`:host{--_container-color: var(--md-dialog-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-shape: var(--md-dialog-container-shape, 28px);--_headline-color: var(--md-dialog-headline-color, var(--md-sys-color-on-surface, #1d1b20));--_headline-font: var(--md-dialog-headline-font, var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, Roboto)));--_headline-line-height: var(--md-dialog-headline-line-height, var(--md-sys-typescale-headline-small-line-height, 2rem));--_headline-size: var(--md-dialog-headline-size, var(--md-sys-typescale-headline-small-size, 1.5rem));--_headline-weight: var(--md-dialog-headline-weight, var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_supporting-text-color: var(--md-dialog-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-dialog-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-dialog-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));--_supporting-text-size: var(--md-dialog-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));--_supporting-text-weight: var(--md-dialog-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)));--_icon-color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));--_icon-size: var(--md-dialog-icon-size, 24px);--_container-shape-start-start: var( --md-dialog-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-dialog-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-dialog-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-dialog-container-shape-end-start, var(--_container-shape) );border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:none;overflow:visible;padding:0;width:inherit}dialog[open]{display:flex}::backdrop{background:none}.scrim{background:var(--md-sys-color-scrim, #000);display:none;inset:0;opacity:32%;pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--_headline-color);display:flex;flex-direction:column;font-family:var(--_headline-font);font-size:var(--_headline-size);line-height:var(--_headline-line-height);font-weight:var(--_headline-weight);position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--_icon-color);fill:currentColor;font-size:var(--_icon-size);padding-top:24px;height:var(--_icon-size);width:var(--_icon-size)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:hidden;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--_supporting-text-color);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);line-height:var(--_supporting-text-line-height);font-weight:var(--_supporting-text-weight);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-headline.show-top-divider .headline md-divider,.has-actions.show-bottom-divider .actions md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media(forced-colors: active){dialog{outline:2px solid WindowText}}/*# sourceMappingURL=dialog-styles.css.map */
+`
 
 /**
  * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-function* o$7(o, f) {
-  if (void 0 !== o) {
-    let i = 0
-    for (const t of o) yield f(t, i++)
-  }
-}
+/**
+ * @summary Dialogs can require an action, communicate information, or help
+ * users accomplish a task. There are two types of dialogs: basic and
+ * full-screen.
+ *
+ * @description
+ * A dialog is a modal window that appears in front of app content to provide
+ * critical information or ask for a decision. Dialogs disable all app
+ * functionality when they appear, and remain on screen until confirmed,
+ * dismissed, or a required action has been taken.
+ *
+ * Dialogs are purposefully interruptive, so they should be used sparingly.
+ * A less disruptive alternative is to use a menu, which provides options
+ * without interrupting a user’s experience.
+ *
+ * On mobile devices only, complex dialogs should be displayed fullscreen.
+ *
+ * __Example usages:__
+ * - Common use cases for basic dialogs include alerts, quick selection, and
+ * confirmation.
+ * - More complex dialogs may contain actions that require a series of tasks
+ * to complete. One example is creating a calendar entry with the event title,
+ * date, location, and time.
+ */
+let MdDialog = class MdDialog extends Dialog {}
+MdDialog.styles = [styles$e]
+MdDialog = __decorate([t$9('md-dialog')], MdDialog)
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-const t$3 = t => (e, o) => {
-  void 0 !== o
-    ? o.addInitializer(() => {
-        customElements.define(t, e)
-      })
-    : customElements.define(t, e)
-}
+const styles$d = i$8`:host{display:inline-flex;height:var(--_container-height);outline:none;font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight);-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){cursor:default;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-inline-size:64px;border:none;outline:none;user-select:none;-webkit-appearance:none;vertical-align:middle;background:rgba(0,0,0,0);text-decoration:none;inline-size:100%;position:relative;z-index:0;height:100%;font:inherit;color:var(--_label-text-color);padding-inline-start:var(--_leading-space);padding-inline-end:var(--_trailing-space);gap:8px}.button::before{background-color:var(--_container-color);border-radius:inherit;content:"";inset:0;position:absolute}.button::-moz-focus-inner{padding:0;border:0}.button:hover{color:var(--_hover-label-text-color);cursor:pointer}.button:focus{color:var(--_focus-label-text-color)}.button:active{color:var(--_pressed-label-text-color);outline:none}.button:disabled .button__label{color:var(--_disabled-label-text-color);opacity:var(--_disabled-label-text-opacity)}.button:disabled::before{background-color:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}@media(forced-colors: active){.button::before{content:"";box-sizing:border-box;border:1px solid CanvasText;border-radius:inherit;inset:0;pointer-events:none;position:absolute}.button:disabled{--_disabled-icon-opacity: 1;--_disabled-container-opacity: 1;--_disabled-label-text-opacity: 1}}.button,.button__ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.button::after,.button::before,md-elevation,.button__ripple{z-index:-1}.button--icon-leading{padding-inline-start:var(--_with-leading-icon-leading-space);padding-inline-end:var(--_with-leading-icon-trailing-space)}.button--icon-trailing{padding-inline-start:var(--_with-trailing-icon-leading-space);padding-inline-end:var(--_with-trailing-icon-trailing-space)}.link-button-wrapper{inline-size:100%}.button ::slotted([slot=icon]){display:inline-flex;position:relative;writing-mode:horizontal-tb;fill:currentColor;color:var(--_icon-color);font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size)}.button:hover ::slotted([slot=icon]){color:var(--_hover-icon-color)}.button:focus ::slotted([slot=icon]){color:var(--_focus-icon-color)}.button:active ::slotted([slot=icon]){color:var(--_pressed-icon-color)}.button:disabled ::slotted([slot=icon]){color:var(--_disabled-icon-color);opacity:var(--_disabled-icon-opacity)}.touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}:host([touch-target=none]) .touch{display:none}/*# sourceMappingURL=shared-styles.css.map */
+`
 
 /**
  * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$2 = globalThis,
-  e$8 =
-    t$2.ShadowRoot &&
-    (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) &&
-    'adoptedStyleSheets' in Document.prototype &&
-    'replace' in CSSStyleSheet.prototype,
-  s$3 = Symbol(),
-  o$6 = new WeakMap()
-class n$5 {
-  constructor(t, e, o) {
-    if (((this._$cssResult$ = !0), o !== s$3))
-      throw Error(
-        'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'
-      )
-    ;(this.cssText = t), (this.t = e)
-  }
-  get styleSheet() {
-    let t = this.o
-    const s = this.t
-    if (e$8 && void 0 === t) {
-      const e = void 0 !== s && 1 === s.length
-      e && (t = o$6.get(s)),
-        void 0 === t &&
-          ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText),
-          e && o$6.set(s, t))
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController')
+let FOR_ATTRIBUTE_OBSERVER
+{
+  /**
+   * A global `MutationObserver` that reacts to `for` attribute changes on
+   * `Attachable` elements. If the `for` attribute changes, the controller will
+   * re-attach to the new referenced element.
+   */
+  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+    for (const record of records) {
+      // When a control's `for` attribute changes, inform its
+      // `AttachableController` to update to a new control.
+      record.target[ATTACHABLE_CONTROLLER]?.hostConnected()
     }
-    return t
-  }
-  toString() {
-    return this.cssText
-  }
+  })
 }
-const r$6 = t => new n$5('string' == typeof t ? t : t + '', void 0, s$3),
-  i$4 = (t, ...e) => {
-    const o =
-      1 === t.length
-        ? t[0]
-        : e.reduce(
-            (e, s, o) =>
-              e +
-              (t => {
-                if (!0 === t._$cssResult$) return t.cssText
-                if ('number' == typeof t) return t
-                throw Error(
-                  "Value passed to 'css' function must be a 'css' function result: " +
-                    t +
-                    ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."
-                )
-              })(s) +
-              t[o + 1],
-            t[0]
-          )
-    return new n$5(o, t, s$3)
-  },
-  S$1 = (s, o) => {
-    if (e$8)
-      s.adoptedStyleSheets = o.map(t =>
-        t instanceof CSSStyleSheet ? t : t.styleSheet
-      )
-    else
-      for (const e of o) {
-        const o = document.createElement('style'),
-          n = t$2.litNonce
-        void 0 !== n && o.setAttribute('nonce', n),
-          (o.textContent = e.cssText),
-          s.appendChild(o)
-      }
-  },
-  c$2 = e$8
-    ? t => t
-    : t =>
-        t instanceof CSSStyleSheet
-          ? (t => {
-              let e = ''
-              for (const s of t.cssRules) e += s.cssText
-              return r$6(e)
-            })(t)
-          : t
-
 /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const {
-    is: i$3,
-    defineProperty: e$7,
-    getOwnPropertyDescriptor: r$5,
-    getOwnPropertyNames: h$1,
-    getOwnPropertySymbols: o$5,
-    getPrototypeOf: n$4,
-  } = Object,
-  a$2 = globalThis,
-  c$1 = a$2.trustedTypes,
-  l$2 = c$1 ? c$1.emptyScript : '',
-  p$1 = a$2.reactiveElementPolyfillSupport,
-  d$1 = (t, s) => t,
-  u$1 = {
-    toAttribute(t, s) {
-      switch (s) {
-        case Boolean:
-          t = t ? l$2 : null
-          break
-        case Object:
-        case Array:
-          t = null == t ? t : JSON.stringify(t)
-      }
-      return t
-    },
-    fromAttribute(t, s) {
-      let i = t
-      switch (s) {
-        case Boolean:
-          i = null !== t
-          break
-        case Number:
-          i = null === t ? null : Number(t)
-          break
-        case Object:
-        case Array:
-          try {
-            i = JSON.parse(t)
-          } catch (t) {
-            i = null
-          }
-      }
-      return i
-    },
-  },
-  f$1 = (t, s) => !i$3(t, s),
-  y$1 = {
-    attribute: !0,
-    type: String,
-    converter: u$1,
-    reflect: !1,
-    hasChanged: f$1,
-  }
-;(Symbol.metadata ??= Symbol('metadata')),
-  (a$2.litPropertyMetadata ??= new WeakMap())
-class b extends HTMLElement {
-  static addInitializer(t) {
-    this._$Ei(), (this.l ??= []).push(t)
-  }
-  static get observedAttributes() {
-    return this.finalize(), this._$Eh && [...this._$Eh.keys()]
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+class AttachableController {
+  get htmlFor() {
+    return this.host.getAttribute('for')
   }
-  static createProperty(t, s = y$1) {
-    if (
-      (s.state && (s.attribute = !1),
-      this._$Ei(),
-      this.elementProperties.set(t, s),
-      !s.noAccessor)
-    ) {
-      const i = Symbol(),
-        r = this.getPropertyDescriptor(t, i, s)
-      void 0 !== r && e$7(this.prototype, t, r)
+  set htmlFor(htmlFor) {
+    if (htmlFor === null) {
+      this.host.removeAttribute('for')
+    } else {
+      this.host.setAttribute('for', htmlFor)
     }
   }
-  static getPropertyDescriptor(t, s, i) {
-    const { get: e, set: h } = r$5(this.prototype, t) ?? {
-      get() {
-        return this[s]
-      },
-      set(t) {
-        this[s] = t
-      },
-    }
-    return {
-      get() {
-        return e?.call(this)
-      },
-      set(s) {
-        const r = e?.call(this)
-        h.call(this, s), this.requestUpdate(t, r, i)
-      },
-      configurable: !0,
-      enumerable: !0,
+  get control() {
+    if (this.host.hasAttribute('for')) {
+      if (!this.htmlFor || !this.host.isConnected) {
+        return null
+      }
+      return this.host.getRootNode().querySelector(`#${this.htmlFor}`)
     }
+    return this.currentControl || this.host.parentElement
   }
-  static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? y$1
+  set control(control) {
+    if (control) {
+      this.attach(control)
+    } else {
+      this.detach()
+    }
   }
-  static _$Ei() {
-    if (this.hasOwnProperty(d$1('elementProperties'))) return
-    const t = n$4(this)
-    t.finalize(),
-      void 0 !== t.l && (this.l = [...t.l]),
-      (this.elementProperties = new Map(t.elementProperties))
+  /**
+   * Creates a new controller for an `Attachable` element.
+   *
+   * @param host The `Attachable` element.
+   * @param onControlChange A callback with two parameters for the previous and
+   *     next control. An `Attachable` element may perform setup or teardown
+   *     logic whenever the control changes.
+   */
+  constructor(host, onControlChange) {
+    this.host = host
+    this.onControlChange = onControlChange
+    this.currentControl = null
+    host.addController(this)
+    host[ATTACHABLE_CONTROLLER] = this
+    FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] })
   }
-  static finalize() {
-    if (this.hasOwnProperty(d$1('finalized'))) return
-    if (
-      ((this.finalized = !0),
-      this._$Ei(),
-      this.hasOwnProperty(d$1('properties')))
-    ) {
-      const t = this.properties,
-        s = [...h$1(t), ...o$5(t)]
-      for (const i of s) this.createProperty(i, t[i])
-    }
-    const t = this[Symbol.metadata]
-    if (null !== t) {
-      const s = litPropertyMetadata.get(t)
-      if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i)
-    }
-    this._$Eh = new Map()
-    for (const [t, s] of this.elementProperties) {
-      const i = this._$Eu(t, s)
-      void 0 !== i && this._$Eh.set(i, t)
+  attach(control) {
+    if (control === this.currentControl) {
+      return
     }
-    this.elementStyles = this.finalizeStyles(this.styles)
+    this.setCurrentControl(control)
+    // When imperatively attaching, remove the `for` attribute so
+    // that the attached control is used instead of a referenced one.
+    this.host.removeAttribute('for')
   }
-  static finalizeStyles(s) {
-    const i = []
-    if (Array.isArray(s)) {
-      const e = new Set(s.flat(1 / 0).reverse())
-      for (const s of e) i.unshift(c$2(s))
-    } else void 0 !== s && i.push(c$2(s))
-    return i
+  detach() {
+    this.setCurrentControl(null)
+    // When imperatively detaching, add an empty `for=""` attribute. This will
+    // ensure the control is `null` rather than the `parentElement`.
+    this.host.setAttribute('for', '')
   }
-  static _$Eu(t, s) {
-    const i = s.attribute
-    return !1 === i
-      ? void 0
-      : 'string' == typeof i
-      ? i
-      : 'string' == typeof t
-      ? t.toLowerCase()
-      : void 0
+  /** @private */
+  hostConnected() {
+    this.setCurrentControl(this.control)
   }
-  constructor() {
-    super(),
-      (this._$Ep = void 0),
-      (this.isUpdatePending = !1),
-      (this.hasUpdated = !1),
-      (this._$Em = null),
-      this._$Ev()
+  /** @private */
+  hostDisconnected() {
+    this.setCurrentControl(null)
   }
-  _$Ev() {
-    ;(this._$Eg = new Promise(t => (this.enableUpdating = t))),
-      (this._$AL = new Map()),
-      this._$ES(),
-      this.requestUpdate(),
-      this.constructor.l?.forEach(t => t(this))
+  setCurrentControl(control) {
+    this.onControlChange(this.currentControl, control)
+    this.currentControl = control
   }
-  addController(t) {
-    ;(this._$E_ ??= new Set()).add(t),
-      void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.()
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Events that the focus ring listens to.
+ *
+ * @fires visibility-changed Fired whenever `visible` changes.
+ */
+const EVENTS$1 = ['focusin', 'focusout', 'pointerdown']
+/**
+ * A focus ring component.
+ */
+class FocusRing extends s$9 {
+  constructor() {
+    super(...arguments)
+    /**
+     * Makes the focus ring visible.
+     */
+    this.visible = false
+    /**
+     * Makes the focus ring animate inwards instead of outwards.
+     */
+    this.inward = false
+    this.attachableController = new AttachableController(
+      this,
+      this.onControlChange.bind(this)
+    )
   }
-  removeController(t) {
-    this._$E_?.delete(t)
+  get htmlFor() {
+    return this.attachableController.htmlFor
   }
-  _$ES() {
-    const t = new Map(),
-      s = this.constructor.elementProperties
-    for (const i of s.keys())
-      this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i])
-    t.size > 0 && (this._$Ep = t)
+  set htmlFor(htmlFor) {
+    this.attachableController.htmlFor = htmlFor
   }
-  createRenderRoot() {
-    const t =
-      this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions)
-    return S$1(t, this.constructor.elementStyles), t
+  get control() {
+    return this.attachableController.control
   }
-  connectedCallback() {
-    ;(this.renderRoot ??= this.createRenderRoot()),
-      this.enableUpdating(!0),
-      this._$E_?.forEach(t => t.hostConnected?.())
+  set control(control) {
+    this.attachableController.control = control
   }
-  enableUpdating(t) {}
-  disconnectedCallback() {
-    this._$E_?.forEach(t => t.hostDisconnected?.())
+  attach(control) {
+    this.attachableController.attach(control)
   }
-  attributeChangedCallback(t, s, i) {
-    this._$AK(t, i)
+  detach() {
+    this.attachableController.detach()
   }
-  _$EO(t, s) {
-    const i = this.constructor.elementProperties.get(t),
-      e = this.constructor._$Eu(t, i)
-    if (void 0 !== e && !0 === i.reflect) {
-      const r = (void 0 !== i.converter?.toAttribute
-        ? i.converter
-        : u$1
-      ).toAttribute(s, i.type)
-      ;(this._$Em = t),
-        null == r ? this.removeAttribute(e) : this.setAttribute(e, r),
-        (this._$Em = null)
-    }
+  connectedCallback() {
+    super.connectedCallback()
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
   }
-  _$AK(t, s) {
-    const i = this.constructor,
-      e = i._$Eh.get(t)
-    if (void 0 !== e && this._$Em !== e) {
-      const t = i.getPropertyOptions(e),
-        r =
-          'function' == typeof t.converter
-            ? { fromAttribute: t.converter }
-            : void 0 !== t.converter?.fromAttribute
-            ? t.converter
-            : u$1
-      ;(this._$Em = e),
-        (this[e] = r.fromAttribute(s, t.type)),
-        (this._$Em = null)
+  /** @private */
+  handleEvent(event) {
+    if (event[HANDLED_BY_FOCUS_RING]) {
+      // This ensures the focus ring does not activate when multiple focus rings
+      // are used within a single component.
+      return
     }
-  }
-  requestUpdate(t, s, i, e = !1, r) {
-    if (void 0 !== t) {
-      if (
-        ((i ??= this.constructor.getPropertyOptions(t)),
-        !(i.hasChanged ?? f$1)(e ? r : this[t], s))
-      )
+    switch (event.type) {
+      default:
         return
-      this.C(t, s, i)
+      case 'focusin':
+        this.visible = this.control?.matches(':focus-visible') ?? false
+        break
+      case 'focusout':
+      case 'pointerdown':
+        this.visible = false
+        break
     }
-    !1 === this.isUpdatePending && (this._$Eg = this._$EP())
-  }
-  C(t, s, i) {
-    this._$AL.has(t) || this._$AL.set(t, s),
-      !0 === i.reflect && this._$Em !== t && (this._$Ej ??= new Set()).add(t)
+    event[HANDLED_BY_FOCUS_RING] = true
   }
-  async _$EP() {
-    this.isUpdatePending = !0
-    try {
-      await this._$Eg
-    } catch (t) {
-      Promise.reject(t)
+  onControlChange(prev, next) {
+    for (const event of EVENTS$1) {
+      prev?.removeEventListener(event, this)
+      next?.addEventListener(event, this)
     }
-    const t = this.scheduleUpdate()
-    return null != t && (await t), !this.isUpdatePending
   }
-  scheduleUpdate() {
-    return this.performUpdate()
-  }
-  performUpdate() {
-    if (!this.isUpdatePending) return
-    if (!this.hasUpdated) {
-      if (((this.renderRoot ??= this.createRenderRoot()), this._$Ep)) {
-        for (const [t, s] of this._$Ep) this[t] = s
-        this._$Ep = void 0
-      }
-      const t = this.constructor.elementProperties
-      if (t.size > 0)
-        for (const [s, i] of t)
-          !0 !== i.wrapped ||
-            this._$AL.has(s) ||
-            void 0 === this[s] ||
-            this.C(s, this[s], i)
-    }
-    let t = !1
-    const s = this._$AL
-    try {
-      ;(t = this.shouldUpdate(s)),
-        t
-          ? (this.willUpdate(s),
-            this._$E_?.forEach(t => t.hostUpdate?.()),
-            this.update(s))
-          : this._$ET()
-    } catch (s) {
-      throw ((t = !1), this._$ET(), s)
+  update(changed) {
+    if (changed.has('visible')) {
+      // This logic can be removed once the `:has` selector has been introduced
+      // to Firefox. This is necessary to allow correct submenu styles.
+      this.dispatchEvent(new Event('visibility-changed'))
     }
-    t && this._$AE(s)
-  }
-  willUpdate(t) {}
-  _$AE(t) {
-    this._$E_?.forEach(t => t.hostUpdated?.()),
-      this.hasUpdated || ((this.hasUpdated = !0), this.firstUpdated(t)),
-      this.updated(t)
-  }
-  _$ET() {
-    ;(this._$AL = new Map()), (this.isUpdatePending = !1)
-  }
-  get updateComplete() {
-    return this.getUpdateComplete()
-  }
-  getUpdateComplete() {
-    return this._$Eg
-  }
-  shouldUpdate(t) {
-    return !0
-  }
-  update(t) {
-    ;(this._$Ej &&= this._$Ej.forEach(t => this._$EO(t, this[t]))), this._$ET()
+    super.update(changed)
   }
-  updated(t) {}
-  firstUpdated(t) {}
 }
-;(b.elementStyles = []),
-  (b.shadowRootOptions = { mode: 'open' }),
-  (b[d$1('elementProperties')] = new Map()),
-  (b[d$1('finalized')] = new Map()),
-  p$1?.({ ReactiveElement: b }),
-  (a$2.reactiveElementVersions ??= []).push('2.0.2')
+__decorate(
+  [n$b({ type: Boolean, reflect: true })],
+  FocusRing.prototype,
+  'visible',
+  void 0
+)
+__decorate(
+  [n$b({ type: Boolean, reflect: true })],
+  FocusRing.prototype,
+  'inward',
+  void 0
+)
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing')
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const o$4 = {
-    attribute: !0,
-    type: String,
-    converter: u$1,
-    reflect: !1,
-    hasChanged: f$1,
-  },
-  r$4 = (t = o$4, e, r) => {
-    const { kind: n, metadata: i } = r
-    let s = globalThis.litPropertyMetadata.get(i)
-    if (
-      (void 0 === s && globalThis.litPropertyMetadata.set(i, (s = new Map())),
-      s.set(r.name, t),
-      'accessor' === n)
-    ) {
-      const { name: o } = r
-      return {
-        set(r) {
-          const n = e.get.call(this)
-          e.set.call(this, r), this.requestUpdate(o, n, t)
-        },
-        init(e) {
-          return void 0 !== e && this.C(o, void 0, t), e
-        },
-      }
-    }
-    if ('setter' === n) {
-      const { name: o } = r
-      return function(r) {
-        const n = this[o]
-        e.call(this, r), this.requestUpdate(o, n, t)
-      }
-    }
-    throw Error('Unsupported decorator location: ' + n)
-  }
-function n$3(t) {
-  return (e, o) =>
-    'object' == typeof o
-      ? r$4(t, e, o)
-      : ((t, e, o) => {
-          const r = e.hasOwnProperty(o)
-          return (
-            e.constructor.createProperty(o, r ? { ...t, wrapped: !0 } : t),
-            r ? Object.getOwnPropertyDescriptor(e, o) : void 0
-          )
-        })(t, e, o)
-}
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$c = i$8`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */
+`
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function r$3(r) {
-  return n$3({ ...r, state: !0, attribute: !1 })
-}
-
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
 /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * TODO(b/267336424): add docs
+ *
+ * @final
+ * @suppress {visibility}
  */
-const e$6 = (e, t, c) => (
-  (c.configurable = !0),
-  (c.enumerable = !0),
-  Reflect.decorate && 'object' != typeof t && Object.defineProperty(e, t, c),
-  c
-)
+let MdFocusRing = class MdFocusRing extends FocusRing {}
+MdFocusRing.styles = [styles$c]
+MdFocusRing = __decorate([t$9('md-focus-ring')], MdFocusRing)
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function e$5(e, r) {
-  return (n, s, i) => {
-    const o = t => t.renderRoot?.querySelector(e) ?? null
-    if (r) {
-      const { get: e, set: r } =
-        'object' == typeof s
-          ? n
-          : i ??
-            (() => {
-              const t = Symbol()
-              return {
-                get() {
-                  return this[t]
-                },
-                set(e) {
-                  this[t] = e
-                },
-              }
-            })()
-      return e$6(n, s, {
-        get() {
-          let t = e.call(this)
-          return (
-            void 0 === t &&
-              ((t = o(this)),
-              (null !== t || this.hasUpdated) && r.call(this, t)),
-            t
-          )
-        },
-      })
-    }
-    return e$6(n, s, {
-      get() {
-        return o(this)
-      },
-    })
-  }
-}
-
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const PRESS_GROW_MS = 450
+const MINIMUM_PRESS_MS = 225
+const INITIAL_ORIGIN_SCALE = 0.2
+const PADDING$1 = 10
+const SOFT_EDGE_MINIMUM_SIZE = 75
+const SOFT_EDGE_CONTAINER_RATIO = 0.35
+const PRESS_PSEUDO = '::after'
+const ANIMATION_FILL = 'forwards'
 /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Interaction states for the ripple.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
  */
-let e$4
-function r$2(r) {
-  return (n, o) =>
-    e$6(n, o, {
-      get() {
-        return (
-          this.renderRoot ?? (e$4 ??= document.createDocumentFragment())
-        ).querySelectorAll(r)
-      },
-    })
-}
-
+var State
+;(function(State) {
+  /**
+   * Initial state of the control, no touch in progress.
+   *
+   * Transitions:
+   *   - on touch down: transition to `TOUCH_DELAY`.
+   *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+   */
+  State[(State['INACTIVE'] = 0)] = 'INACTIVE'
+  /**
+   * Touch down has been received, waiting to determine if it's a swipe or
+   * scroll.
+   *
+   * Transitions:
+   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+   *   - on cancel: transition to `INACTIVE`.
+   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+   */
+  State[(State['TOUCH_DELAY'] = 1)] = 'TOUCH_DELAY'
+  /**
+   * A touch has been deemed to be a press
+   *
+   * Transitions:
+   *  - on up: transition to `WAITING_FOR_CLICK`.
+   */
+  State[(State['HOLDING'] = 2)] = 'HOLDING'
+  /**
+   * The user touch has finished, transition into rest state.
+   *
+   * Transitions:
+   *   - on click end press; transition to `INACTIVE`.
+   */
+  State[(State['WAITING_FOR_CLICK'] = 3)] = 'WAITING_FOR_CLICK'
+})(State || (State = {}))
 /**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ function o$3(o) {
-  return (e, n) => {
-    const { slot: r, selector: s } = o ?? {},
-      c = 'slot' + (r ? `[name=${r}]` : ':not([name])')
-    return e$6(e, n, {
-      get() {
-        const t = this.renderRoot?.querySelector(c),
-          e = t?.assignedElements(o) ?? []
-        return void 0 === s ? e : e.filter(t => t.matches(s))
-      },
-    })
-  }
-}
-
+ * Events that the ripple listens to.
+ */
+const EVENTS = [
+  'click',
+  'contextmenu',
+  'pointercancel',
+  'pointerdown',
+  'pointerenter',
+  'pointerleave',
+  'pointerup',
+]
 /**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
  */
-const t$1 = globalThis,
-  i$2 = t$1.trustedTypes,
-  s$2 = i$2 ? i$2.createPolicy('lit-html', { createHTML: t => t }) : void 0,
-  e$3 = '$lit$',
-  h = `lit$${(Math.random() + '').slice(9)}$`,
-  o$2 = '?' + h,
-  n$2 = `<${o$2}>`,
-  r$1 = document,
-  l$1 = () => r$1.createComment(''),
-  c = t => null === t || ('object' != typeof t && 'function' != typeof t),
-  a$1 = Array.isArray,
-  u = t => a$1(t) || 'function' == typeof t?.[Symbol.iterator],
-  d = '[ \t\n\f\r]',
-  f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
-  v = /-->/g,
-  _ = />/g,
-  m = RegExp(
-    `>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,
-    'g'
-  ),
-  p = /'/g,
-  g = /"/g,
-  $ = /^(?:script|style|textarea|title)$/i,
-  y = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
-  x = y(1),
-  w = Symbol.for('lit-noChange'),
-  T = Symbol.for('lit-nothing'),
-  A = new WeakMap(),
-  E = r$1.createTreeWalker(r$1, 129)
-function C(t, i) {
-  if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
-    throw Error('invalid template strings array')
-  return void 0 !== s$2 ? s$2.createHTML(i) : i
-}
-const P = (t, i) => {
-  const s = t.length - 1,
-    o = []
-  let r,
-    l = 2 === i ? '<svg>' : '',
-    c = f
-  for (let i = 0; i < s; i++) {
-    const s = t[i]
-    let a,
-      u,
-      d = -1,
-      y = 0
-    for (; y < s.length && ((c.lastIndex = y), (u = c.exec(s)), null !== u); )
-      (y = c.lastIndex),
-        c === f
-          ? '!--' === u[1]
-            ? (c = v)
-            : void 0 !== u[1]
-            ? (c = _)
-            : void 0 !== u[2]
-            ? ($.test(u[2]) && (r = RegExp('</' + u[2], 'g')), (c = m))
-            : void 0 !== u[3] && (c = m)
-          : c === m
-          ? '>' === u[0]
-            ? ((c = r ?? f), (d = -1))
-            : void 0 === u[1]
-            ? (d = -2)
-            : ((d = c.lastIndex - u[2].length),
-              (a = u[1]),
-              (c = void 0 === u[3] ? m : '"' === u[3] ? g : p))
-          : c === g || c === p
-          ? (c = m)
-          : c === v || c === _
-          ? (c = f)
-          : ((c = m), (r = void 0))
-    const x = c === m && t[i + 1].startsWith('/>') ? ' ' : ''
-    l +=
-      c === f
-        ? s + n$2
-        : d >= 0
-        ? (o.push(a), s.slice(0, d) + e$3 + s.slice(d) + h + x)
-        : s + h + (-2 === d ? i : x)
+const TOUCH_DELAY_MS = 150
+/**
+ * A ripple component.
+ */
+class Ripple extends s$9 {
+  constructor() {
+    super(...arguments)
+    /**
+     * Disables the ripple.
+     */
+    this.disabled = false
+    this.hovered = false
+    this.pressed = false
+    this.rippleSize = ''
+    this.rippleScale = ''
+    this.initialSize = 0
+    this.state = State.INACTIVE
+    this.checkBoundsAfterContextMenu = false
+    this.attachableController = new AttachableController(
+      this,
+      this.onControlChange.bind(this)
+    )
   }
-  return [C(t, l + (t[s] || '<?>') + (2 === i ? '</svg>' : '')), o]
-}
-class V {
-  constructor({ strings: t, _$litType$: s }, n) {
-    let r
-    this.parts = []
-    let c = 0,
-      a = 0
-    const u = t.length - 1,
-      d = this.parts,
-      [f, v] = P(t, s)
-    if (
-      ((this.el = V.createElement(f, n)),
-      (E.currentNode = this.el.content),
-      2 === s)
-    ) {
-      const t = this.el.content.firstChild
-      t.replaceWith(...t.childNodes)
-    }
-    for (; null !== (r = E.nextNode()) && d.length < u; ) {
-      if (1 === r.nodeType) {
-        if (r.hasAttributes())
-          for (const t of r.getAttributeNames())
-            if (t.endsWith(e$3)) {
-              const i = v[a++],
-                s = r.getAttribute(t).split(h),
-                e = /([.?@])?(.*)/.exec(i)
-              d.push({
-                type: 1,
-                index: c,
-                name: e[2],
-                strings: s,
-                ctor:
-                  '.' === e[1] ? k : '?' === e[1] ? H : '@' === e[1] ? I : R,
-              }),
-                r.removeAttribute(t)
-            } else
-              t.startsWith(h) &&
-                (d.push({ type: 6, index: c }), r.removeAttribute(t))
-        if ($.test(r.tagName)) {
-          const t = r.textContent.split(h),
-            s = t.length - 1
-          if (s > 0) {
-            r.textContent = i$2 ? i$2.emptyScript : ''
-            for (let i = 0; i < s; i++)
-              r.append(t[i], l$1()),
-                E.nextNode(),
-                d.push({ type: 2, index: ++c })
-            r.append(t[s], l$1())
-          }
-        }
-      } else if (8 === r.nodeType)
-        if (r.data === o$2) d.push({ type: 2, index: c })
-        else {
-          let t = -1
-          for (; -1 !== (t = r.data.indexOf(h, t + 1)); )
-            d.push({ type: 7, index: c }), (t += h.length - 1)
-        }
-      c++
-    }
-  }
-  static createElement(t, i) {
-    const s = r$1.createElement('template')
-    return (s.innerHTML = t), s
+  get htmlFor() {
+    return this.attachableController.htmlFor
   }
-}
-function N(t, i, s = t, e) {
-  if (i === w) return i
-  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl
-  const o = c(i) ? void 0 : i._$litDirective$
-  return (
-    h?.constructor !== o &&
-      (h?._$AO?.(!1),
-      void 0 === o ? (h = void 0) : ((h = new o(t)), h._$AT(t, s, e)),
-      void 0 !== e ? ((s._$Co ??= [])[e] = h) : (s._$Cl = h)),
-    void 0 !== h && (i = N(t, h._$AS(t, i.values), h, e)),
-    i
-  )
-}
-class S {
-  constructor(t, i) {
-    ;(this._$AV = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
+  set htmlFor(htmlFor) {
+    this.attachableController.htmlFor = htmlFor
   }
-  get parentNode() {
-    return this._$AM.parentNode
+  get control() {
+    return this.attachableController.control
   }
-  get _$AU() {
-    return this._$AM._$AU
+  set control(control) {
+    this.attachableController.control = control
   }
-  u(t) {
-    const {
-        el: { content: i },
-        parts: s,
-      } = this._$AD,
-      e = (t?.creationScope ?? r$1).importNode(i, !0)
-    E.currentNode = e
-    let h = E.nextNode(),
-      o = 0,
-      n = 0,
-      l = s[0]
-    for (; void 0 !== l; ) {
-      if (o === l.index) {
-        let i
-        2 === l.type
-          ? (i = new M(h, h.nextSibling, this, t))
-          : 1 === l.type
-          ? (i = new l.ctor(h, l.name, l.strings, this, t))
-          : 6 === l.type && (i = new L(h, this, t)),
-          this._$AV.push(i),
-          (l = s[++n])
-      }
-      o !== l?.index && ((h = E.nextNode()), o++)
-    }
-    return (E.currentNode = r$1), e
+  attach(control) {
+    this.attachableController.attach(control)
   }
-  p(t) {
-    let i = 0
-    for (const s of this._$AV)
-      void 0 !== s &&
-        (void 0 !== s.strings
-          ? (s._$AI(t, s, i), (i += s.strings.length - 2))
-          : s._$AI(t[i])),
-        i++
+  detach() {
+    this.attachableController.detach()
   }
-}
-class M {
-  get _$AU() {
-    return this._$AM?._$AU ?? this._$Cv
+  connectedCallback() {
+    super.connectedCallback()
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
   }
-  constructor(t, i, s, e) {
-    ;(this.type = 2),
-      (this._$AH = T),
-      (this._$AN = void 0),
-      (this._$AA = t),
-      (this._$AB = i),
-      (this._$AM = s),
-      (this.options = e),
-      (this._$Cv = e?.isConnected ?? !0)
+  render() {
+    const classes = {
+      hovered: this.hovered,
+      pressed: this.pressed,
+    }
+    return x$1`<div class="surface ${e$c(classes)}"></div>`
   }
-  get parentNode() {
-    let t = this._$AA.parentNode
-    const i = this._$AM
-    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t
+  update(changedProps) {
+    if (changedProps.has('disabled') && this.disabled) {
+      this.hovered = false
+      this.pressed = false
+    }
+    super.update(changedProps)
   }
-  get startNode() {
-    return this._$AA
+  /**
+   * TODO(b/269799771): make private
+   * @private only public for slider
+   */
+  handlePointerenter(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return
+    }
+    this.hovered = true
   }
-  get endNode() {
-    return this._$AB
+  /**
+   * TODO(b/269799771): make private
+   * @private only public for slider
+   */
+  handlePointerleave(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return
+    }
+    this.hovered = false
+    // release a held mouse or pen press that moves outside the element
+    if (this.state !== State.INACTIVE) {
+      this.endPressAnimation()
+    }
   }
-  _$AI(t, i = this) {
-    ;(t = N(this, t, i)),
-      c(t)
-        ? t === T || null == t || '' === t
-          ? (this._$AH !== T && this._$AR(), (this._$AH = T))
-          : t !== this._$AH && t !== w && this._(t)
-        : void 0 !== t._$litType$
-        ? this.g(t)
-        : void 0 !== t.nodeType
-        ? this.$(t)
-        : u(t)
-        ? this.T(t)
-        : this._(t)
+  handlePointerup(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return
+    }
+    if (this.state === State.HOLDING) {
+      this.state = State.WAITING_FOR_CLICK
+      return
+    }
+    if (this.state === State.TOUCH_DELAY) {
+      this.state = State.WAITING_FOR_CLICK
+      this.startPressAnimation(this.rippleStartEvent)
+      return
+    }
   }
-  k(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB)
+  async handlePointerdown(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return
+    }
+    this.rippleStartEvent = event
+    if (!this.isTouch(event)) {
+      this.state = State.WAITING_FOR_CLICK
+      this.startPressAnimation(event)
+      return
+    }
+    // after a longpress contextmenu event, an extra `pointerdown` can be
+    // dispatched to the pressed element. Check that the down is within
+    // bounds of the element in this case.
+    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {
+      return
+    }
+    this.checkBoundsAfterContextMenu = false
+    // Wait for a hold after touch delay
+    this.state = State.TOUCH_DELAY
+    await new Promise(resolve => {
+      setTimeout(resolve, TOUCH_DELAY_MS)
+    })
+    if (this.state !== State.TOUCH_DELAY) {
+      return
+    }
+    this.state = State.HOLDING
+    this.startPressAnimation(event)
   }
-  $(t) {
-    this._$AH !== t && (this._$AR(), (this._$AH = this.k(t)))
+  handleClick() {
+    // Click is a MouseEvent in Firefox and Safari, so we cannot use
+    // `shouldReactToEvent`
+    if (this.disabled) {
+      return
+    }
+    if (this.state === State.WAITING_FOR_CLICK) {
+      this.endPressAnimation()
+      return
+    }
+    if (this.state === State.INACTIVE) {
+      // keyboard synthesized click event
+      this.startPressAnimation()
+      this.endPressAnimation()
+    }
   }
-  _(t) {
-    this._$AH !== T && c(this._$AH)
-      ? (this._$AA.nextSibling.data = t)
-      : this.$(r$1.createTextNode(t)),
-      (this._$AH = t)
+  handlePointercancel(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return
+    }
+    this.endPressAnimation()
   }
-  g(t) {
-    const { values: i, _$litType$: s } = t,
-      e =
-        'number' == typeof s
-          ? this._$AC(t)
-          : (void 0 === s.el &&
-              (s.el = V.createElement(C(s.h, s.h[0]), this.options)),
-            s)
-    if (this._$AH?._$AD === e) this._$AH.p(i)
-    else {
-      const t = new S(e, this),
-        s = t.u(this.options)
-      t.p(i), this.$(s), (this._$AH = t)
+  handleContextmenu() {
+    if (this.disabled) {
+      return
     }
+    this.checkBoundsAfterContextMenu = true
+    this.endPressAnimation()
   }
-  _$AC(t) {
-    let i = A.get(t.strings)
-    return void 0 === i && A.set(t.strings, (i = new V(t))), i
+  determineRippleSize() {
+    const { height, width } = this.getBoundingClientRect()
+    const maxDim = Math.max(height, width)
+    const softEdgeSize = Math.max(
+      SOFT_EDGE_CONTAINER_RATIO * maxDim,
+      SOFT_EDGE_MINIMUM_SIZE
+    )
+    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
+    const hypotenuse = Math.sqrt(width ** 2 + height ** 2)
+    const maxRadius = hypotenuse + PADDING$1
+    this.initialSize = initialSize
+    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
+    this.rippleSize = `${initialSize}px`
   }
-  T(t) {
-    a$1(this._$AH) || ((this._$AH = []), this._$AR())
-    const i = this._$AH
-    let s,
-      e = 0
-    for (const h of t)
-      e === i.length
-        ? i.push((s = new M(this.k(l$1()), this.k(l$1()), this, this.options)))
-        : (s = i[e]),
-        s._$AI(h),
-        e++
-    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), (i.length = e))
+  getNormalizedPointerEventCoords(pointerEvent) {
+    const { scrollX, scrollY } = window
+    const { left, top } = this.getBoundingClientRect()
+    const documentX = scrollX + left
+    const documentY = scrollY + top
+    const { pageX, pageY } = pointerEvent
+    return { x: pageX - documentX, y: pageY - documentY }
   }
-  _$AR(t = this._$AA.nextSibling, i) {
-    for (this._$AP?.(!1, !0, i); t && t !== this._$AB; ) {
-      const i = t.nextSibling
-      t.remove(), (t = i)
+  getTranslationCoordinates(positionEvent) {
+    const { height, width } = this.getBoundingClientRect()
+    // end in the center
+    const endPoint = {
+      x: (width - this.initialSize) / 2,
+      y: (height - this.initialSize) / 2,
     }
-  }
-  setConnected(t) {
-    void 0 === this._$AM && ((this._$Cv = t), this._$AP?.(t))
-  }
-}
-class R {
-  get tagName() {
-    return this.element.tagName
-  }
-  get _$AU() {
-    return this._$AM._$AU
-  }
-  constructor(t, i, s, e, h) {
-    ;(this.type = 1),
-      (this._$AH = T),
-      (this._$AN = void 0),
-      (this.element = t),
-      (this.name = i),
-      (this._$AM = e),
-      (this.options = h),
-      s.length > 2 || '' !== s[0] || '' !== s[1]
-        ? ((this._$AH = Array(s.length - 1).fill(new String())),
-          (this.strings = s))
-        : (this._$AH = T)
-  }
-  _$AI(t, i = this, s, e) {
-    const h = this.strings
-    let o = !1
-    if (void 0 === h)
-      (t = N(this, t, i, 0)),
-        (o = !c(t) || (t !== this._$AH && t !== w)),
-        o && (this._$AH = t)
-    else {
-      const e = t
-      let n, r
-      for (t = h[0], n = 0; n < h.length - 1; n++)
-        (r = N(this, e[s + n], i, n)),
-          r === w && (r = this._$AH[n]),
-          (o ||= !c(r) || r !== this._$AH[n]),
-          r === T ? (t = T) : t !== T && (t += (r ?? '') + h[n + 1]),
-          (this._$AH[n] = r)
+    let startPoint
+    if (positionEvent instanceof PointerEvent) {
+      startPoint = this.getNormalizedPointerEventCoords(positionEvent)
+    } else {
+      startPoint = {
+        x: width / 2,
+        y: height / 2,
+      }
     }
-    o && !e && this.O(t)
-  }
-  O(t) {
-    t === T
-      ? this.element.removeAttribute(this.name)
-      : this.element.setAttribute(this.name, t ?? '')
-  }
-}
-class k extends R {
-  constructor() {
-    super(...arguments), (this.type = 3)
-  }
-  O(t) {
-    this.element[this.name] = t === T ? void 0 : t
-  }
-}
-class H extends R {
-  constructor() {
-    super(...arguments), (this.type = 4)
-  }
-  O(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== T)
+    // center around start point
+    startPoint = {
+      x: startPoint.x - this.initialSize / 2,
+      y: startPoint.y - this.initialSize / 2,
+    }
+    return { startPoint, endPoint }
   }
-}
-class I extends R {
-  constructor(t, i, s, e, h) {
-    super(t, i, s, e, h), (this.type = 5)
+  startPressAnimation(positionEvent) {
+    if (!this.mdRoot) {
+      return
+    }
+    this.pressed = true
+    this.growAnimation?.cancel()
+    this.determineRippleSize()
+    const { startPoint, endPoint } = this.getTranslationCoordinates(
+      positionEvent
+    )
+    const translateStart = `${startPoint.x}px, ${startPoint.y}px`
+    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
+    this.growAnimation = this.mdRoot.animate(
+      {
+        top: [0, 0],
+        left: [0, 0],
+        height: [this.rippleSize, this.rippleSize],
+        width: [this.rippleSize, this.rippleSize],
+        transform: [
+          `translate(${translateStart}) scale(1)`,
+          `translate(${translateEnd}) scale(${this.rippleScale})`,
+        ],
+      },
+      {
+        pseudoElement: PRESS_PSEUDO,
+        duration: PRESS_GROW_MS,
+        easing: EASING.STANDARD,
+        fill: ANIMATION_FILL,
+      }
+    )
   }
-  _$AI(t, i = this) {
-    if ((t = N(this, t, i, 0) ?? T) === w) return
-    const s = this._$AH,
-      e =
-        (t === T && s !== T) ||
-        t.capture !== s.capture ||
-        t.once !== s.once ||
-        t.passive !== s.passive,
-      h = t !== T && (s === T || e)
-    e && this.element.removeEventListener(this.name, this, s),
-      h && this.element.addEventListener(this.name, this, t),
-      (this._$AH = t)
+  async endPressAnimation() {
+    this.state = State.INACTIVE
+    const animation = this.growAnimation
+    let pressAnimationPlayState = Infinity
+    if (typeof animation?.currentTime === 'number') {
+      pressAnimationPlayState = animation.currentTime
+    } else if (animation?.currentTime) {
+      pressAnimationPlayState = animation.currentTime.to('ms').value
+    }
+    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+      this.pressed = false
+      return
+    }
+    await new Promise(resolve => {
+      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
+    })
+    if (this.growAnimation !== animation) {
+      // A new press animation was started. The old animation was canceled and
+      // should not finish the pressed state.
+      return
+    }
+    this.pressed = false
   }
-  handleEvent(t) {
-    'function' == typeof this._$AH
-      ? this._$AH.call(this.options?.host ?? this.element, t)
-      : this._$AH.handleEvent(t)
+  /**
+   * Returns `true` if
+   *  - the ripple element is enabled
+   *  - the pointer is primary for the input type
+   *  - the pointer is the pointer that started the interaction, or will start
+   * the interaction
+   *  - the pointer is a touch, or the pointer state has the primary button
+   * held, or the pointer is hovering
+   */
+  shouldReactToEvent(event) {
+    if (this.disabled || !event.isPrimary) {
+      return false
+    }
+    if (
+      this.rippleStartEvent &&
+      this.rippleStartEvent.pointerId !== event.pointerId
+    ) {
+      return false
+    }
+    if (event.type === 'pointerenter' || event.type === 'pointerleave') {
+      return !this.isTouch(event)
+    }
+    const isPrimaryButton = event.buttons === 1
+    return this.isTouch(event) || isPrimaryButton
   }
-}
-class L {
-  constructor(t, i, s) {
-    ;(this.element = t),
-      (this.type = 6),
-      (this._$AN = void 0),
-      (this._$AM = i),
-      (this.options = s)
+  /**
+   * Check if the event is within the bounds of the element.
+   *
+   * This is only needed for the "stuck" contextmenu longpress on Chrome.
+   */
+  inBounds({ x, y }) {
+    const { top, left, bottom, right } = this.getBoundingClientRect()
+    return x >= left && x <= right && y >= top && y <= bottom
   }
-  get _$AU() {
-    return this._$AM._$AU
+  isTouch({ pointerType }) {
+    return pointerType === 'touch'
   }
-  _$AI(t) {
-    N(this, t)
+  /** @private */
+  async handleEvent(event) {
+    switch (event.type) {
+      case 'click':
+        this.handleClick()
+        break
+      case 'contextmenu':
+        this.handleContextmenu()
+        break
+      case 'pointercancel':
+        this.handlePointercancel(event)
+        break
+      case 'pointerdown':
+        await this.handlePointerdown(event)
+        break
+      case 'pointerenter':
+        this.handlePointerenter(event)
+        break
+      case 'pointerleave':
+        this.handlePointerleave(event)
+        break
+      case 'pointerup':
+        this.handlePointerup(event)
+        break
+    }
   }
-}
-const Z = t$1.litHtmlPolyfillSupport
-Z?.(V, M), (t$1.litHtmlVersions ??= []).push('3.1.0')
-const j = (t, i, s) => {
-  const e = s?.renderBefore ?? i
-  let h = e._$litPart$
-  if (void 0 === h) {
-    const t = s?.renderBefore ?? null
-    e._$litPart$ = h = new M(i.insertBefore(l$1(), t), t, void 0, s ?? {})
+  onControlChange(prev, next) {
+    for (const event of EVENTS) {
+      prev?.removeEventListener(event, this)
+      next?.addEventListener(event, this)
+    }
   }
-  return h._$AI(t), h
 }
+__decorate(
+  [n$b({ type: Boolean, reflect: true })],
+  Ripple.prototype,
+  'disabled',
+  void 0
+)
+__decorate([r$8()], Ripple.prototype, 'hovered', void 0)
+__decorate([r$8()], Ripple.prototype, 'pressed', void 0)
+__decorate([e$g('.surface')], Ripple.prototype, 'mdRoot', void 0)
 
 /**
  * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ class s$1 extends b {
-  constructor() {
-    super(...arguments),
-      (this.renderOptions = { host: this }),
-      (this._$Do = void 0)
-  }
-  createRenderRoot() {
-    const t = super.createRenderRoot()
-    return (this.renderOptions.renderBefore ??= t.firstChild), t
-  }
-  update(t) {
-    const i = this.render()
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected),
-      super.update(t),
-      (this._$Do = j(i, this.renderRoot, this.renderOptions))
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._$Do?.setConnected(!0)
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._$Do?.setConnected(!1)
-  }
-  render() {
-    return w
-  }
-}
-;(s$1._$litElement$ = !0),
-  (s$1['finalized'] = !0),
-  globalThis.litElementHydrateSupport?.({ LitElement: s$1 })
-const r = globalThis.litElementPolyfillSupport
-r?.({ LitElement: s$1 })
-;(globalThis.litElementVersions ??= []).push('4.0.2')
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$b = i$8`:host{--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--_hover-color);inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */
+`
 
 /**
  * @license
- * Copyright 2023 Google LLC
+ * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * A key to retrieve an `Attachable` element's `AttachableController` from a
- * global `MutationObserver`.
- */
-const ATTACHABLE_CONTROLLER = Symbol('attachableController')
-let FOR_ATTRIBUTE_OBSERVER
-{
-  /**
-   * A global `MutationObserver` that reacts to `for` attribute changes on
-   * `Attachable` elements. If the `for` attribute changes, the controller will
-   * re-attach to the new referenced element.
-   */
-  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
-    for (const record of records) {
-      // When a control's `for` attribute changes, inform its
-      // `AttachableController` to update to a new control.
-      record.target[ATTACHABLE_CONTROLLER]?.hostConnected()
+ * @summary Ripples, also known as state layers, are visual indicators used to
+ * communicate the status of a component or interactive element.
+ *
+ * @description A state layer is a semi-transparent covering on an element that
+ * indicates its state. State layers provide a systematic approach to
+ * visualizing states by using opacity. A layer can be applied to an entire
+ * element or in a circular shape and only one state layer can be applied at a
+ * given time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdRipple = class MdRipple extends Ripple {}
+MdRipple.styles = [styles$b]
+MdRipple = __decorate([t$9('md-ripple')], MdRipple)
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e$b = Symbol.for(''),
+  o$a = t => {
+    if (t?.r === e$b) return t?._$litStatic$
+  },
+  s$8 = (t, ...r) => ({
+    _$litStatic$: r.reduce(
+      (r, e, o) =>
+        r +
+        (t => {
+          if (void 0 !== t._$litStatic$) return t._$litStatic$
+          throw Error(
+            `Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`
+          )
+        })(e) +
+        t[o + 1],
+      t[0]
+    ),
+    r: e$b,
+  }),
+  a$2 = new Map(),
+  l$4 = t => (r, ...e) => {
+    const i = e.length
+    let s, l
+    const n = [],
+      u = []
+    let c,
+      $ = 0,
+      f = !1
+    for (; $ < i; ) {
+      for (c = r[$]; $ < i && void 0 !== ((l = e[$]), (s = o$a(l))); )
+        (c += s + r[++$]), (f = !0)
+      $ !== i && u.push(l), n.push(c), $++
     }
-  })
-}
+    if (($ === i && n.push(r[i]), f)) {
+      const t = n.join('$$lit$$')
+      void 0 === (r = a$2.get(t)) && ((n.raw = n), a$2.set(t, (r = n))), (e = u)
+    }
+    return t(r, ...e)
+  },
+  n$9 = l$4(x$1)
+
 /**
- * A controller that provides an implementation for `Attachable` elements.
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A unique symbol used for protected access to an instance's
+ * `ElementInternals`.
  *
  * @example
  * ```ts
- * class MyElement extends LitElement implements Attachable {
- *   get control() { return this.attachableController.control; }
+ * class MyElement extends LitElement {
+ *   static formAssociated = true;
  *
- *   private readonly attachableController = new AttachableController(
- *     this,
- *     (previousControl, newControl) => {
- *       previousControl?.removeEventListener('click', this.handleClick);
- *       newControl?.addEventListener('click', this.handleClick);
- *     }
- *   );
+ *   [internals] = this.attachInternals();
+ * }
  *
- *   // Implement remaining `Attachable` properties/methods that call the
- *   // controller's properties/methods.
+ * function getForm(element: MyElement) {
+ *   return element[internals].form;
  * }
  * ```
  */
-class AttachableController {
-  get htmlFor() {
-    return this.host.getAttribute('for')
-  }
-  set htmlFor(htmlFor) {
-    if (htmlFor === null) {
-      this.host.removeAttribute('for')
-    } else {
-      this.host.setAttribute('for', htmlFor)
-    }
-  }
-  get control() {
-    if (this.host.hasAttribute('for')) {
-      if (!this.htmlFor || !this.host.isConnected) {
-        return null
-      }
-      return this.host.getRootNode().querySelector(`#${this.htmlFor}`)
-    }
-    return this.currentControl || this.host.parentElement
-  }
-  set control(control) {
-    if (control) {
-      this.attach(control)
-    } else {
-      this.detach()
-    }
-  }
-  /**
-   * Creates a new controller for an `Attachable` element.
-   *
-   * @param host The `Attachable` element.
-   * @param onControlChange A callback with two parameters for the previous and
-   *     next control. An `Attachable` element may perform setup or teardown
-   *     logic whenever the control changes.
-   */
-  constructor(host, onControlChange) {
-    this.host = host
-    this.onControlChange = onControlChange
-    this.currentControl = null
-    host.addController(this)
-    host[ATTACHABLE_CONTROLLER] = this
-    FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] })
-  }
-  attach(control) {
-    if (control === this.currentControl) {
-      return
-    }
-    this.setCurrentControl(control)
-    // When imperatively attaching, remove the `for` attribute so
-    // that the attached control is used instead of a referenced one.
-    this.host.removeAttribute('for')
-  }
-  detach() {
-    this.setCurrentControl(null)
-    // When imperatively detaching, add an empty `for=""` attribute. This will
-    // ensure the control is `null` rather than the `parentElement`.
-    this.host.setAttribute('for', '')
-  }
-  /** @private */
-  hostConnected() {
-    this.setCurrentControl(this.control)
-  }
-  /** @private */
-  hostDisconnected() {
-    this.setCurrentControl(null)
-  }
-  setCurrentControl(control) {
-    this.onControlChange(this.currentControl, control)
-    this.currentControl = control
-  }
-}
+const internals = Symbol('internals')
 
 /**
  * @license
- * Copyright 2021 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * Events that the focus ring listens to.
+ * Sets up an element's constructor to enable form submission. The element
+ * instance should be form associated and have a `type` property.
  *
- * @fires visibility-changed Fired whenever `visible` changes.
+ * A click listener is added to each element instance. If the click is not
+ * default prevented, it will submit the element's form, if any.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement {
+ *   static {
+ *     setupFormSubmitter(MyElement);
+ *   }
+ *
+ *   static formAssociated = true;
+ *
+ *   type: FormSubmitterType = 'submit';
+ *
+ *   [internals] = this.attachInternals();
+ * }
+ * ```
+ *
+ * @param ctor The form submitter element's constructor.
  */
-const EVENTS$1 = ['focusin', 'focusout', 'pointerdown']
+function setupFormSubmitter(ctor) {
+  ctor.addInitializer(instance => {
+    const submitter = instance
+    submitter.addEventListener('click', async event => {
+      const { type, [internals]: elementInternals } = submitter
+      const { form } = elementInternals
+      if (!form || type === 'button') {
+        return
+      }
+      // Wait a microtask for event bubbling to complete.
+      await new Promise(resolve => {
+        resolve()
+      })
+      if (event.defaultPrevented) {
+        return
+      }
+      if (type === 'reset') {
+        form.reset()
+        return
+      }
+      // form.requestSubmit(submitter) does not work with form associated custom
+      // elements. This patches the dispatched submit event to add the correct
+      // `submitter`.
+      // See https://github.com/WICG/webcomponents/issues/814
+      form.addEventListener(
+        'submit',
+        submitEvent => {
+          Object.defineProperty(submitEvent, 'submitter', {
+            configurable: true,
+            enumerable: true,
+            get: () => submitter,
+          })
+        },
+        { capture: true, once: true }
+      )
+      elementInternals.setFormValue(submitter.value)
+      form.requestSubmit()
+    })
+  })
+}
+
 /**
- * A focus ring component.
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a$2
+/**
+ * A button component.
  */
-class FocusRing extends s$1 {
+class Button extends s$9 {
+  get name() {
+    return this.getAttribute('name') ?? ''
+  }
+  set name(name) {
+    this.setAttribute('name', name)
+  }
+  /**
+   * The associated form element with which this element's value will submit.
+   */
+  get form() {
+    return this[internals].form
+  }
   constructor() {
-    super(...arguments)
+    super()
     /**
-     * Makes the focus ring visible.
+     * Whether or not the button is disabled.
      */
-    this.visible = false
+    this.disabled = false
     /**
-     * Makes the focus ring animate inwards instead of outwards.
+     * The URL that the link button points to.
      */
-    this.inward = false
-    this.attachableController = new AttachableController(
-      this,
-      this.onControlChange.bind(this)
-    )
-  }
-  get htmlFor() {
-    return this.attachableController.htmlFor
-  }
-  set htmlFor(htmlFor) {
-    this.attachableController.htmlFor = htmlFor
-  }
-  get control() {
-    return this.attachableController.control
-  }
-  set control(control) {
-    this.attachableController.control = control
+    this.href = ''
+    /**
+     * Where to display the linked `href` URL for a link button. Common options
+     * include `_blank` to open in a new tab.
+     */
+    this.target = ''
+    /**
+     * Whether to render the icon at the inline end of the label rather than the
+     * inline start.
+     *
+     * _Note:_ Link buttons cannot have trailing icons.
+     */
+    this.trailingIcon = false
+    /**
+     * Whether to display the icon or not.
+     */
+    this.hasIcon = false
+    this.type = 'submit'
+    this.value = ''
+    /** @private */
+    this[_a$2] = this /* needed for closure */.attachInternals()
+    this.handleActivationClick = event => {
+      if (!isActivationClick(event) || !this.buttonElement) {
+        return
+      }
+      this.focus()
+      dispatchActivationClick(this.buttonElement)
+    }
+    {
+      this.addEventListener('click', this.handleActivationClick)
+    }
   }
-  attach(control) {
-    this.attachableController.attach(control)
+  focus() {
+    this.buttonElement?.focus()
   }
-  detach() {
-    this.attachableController.detach()
+  blur() {
+    this.buttonElement?.blur()
   }
-  connectedCallback() {
-    super.connectedCallback()
-    // Needed for VoiceOver, which will create a "group" if the element is a
-    // sibling to other content.
-    this.setAttribute('aria-hidden', 'true')
+  render() {
+    // Link buttons may not be disabled
+    const isDisabled = this.disabled && !this.href
+    const button = this.href ? s$8`a` : s$8`button`
+    // Needed for closure conformance
+    const { ariaLabel, ariaHasPopup, ariaExpanded } = this
+    return n$9`
+      <${button}
+        class="button ${e$c(this.getRenderClasses())}"
+        ?disabled=${isDisabled}
+        aria-label="${ariaLabel || T$1}"
+        aria-haspopup="${ariaHasPopup || T$1}"
+        aria-expanded="${ariaExpanded || T$1}"
+        href=${this.href || T$1}
+        target=${this.target || T$1}
+      >${this.renderContent()}</${button}>`
   }
-  /** @private */
-  handleEvent(event) {
-    if (event[HANDLED_BY_FOCUS_RING]) {
-      // This ensures the focus ring does not activate when multiple focus rings
-      // are used within a single component.
-      return
-    }
-    switch (event.type) {
-      default:
-        return
-      case 'focusin':
-        this.visible = this.control?.matches(':focus-visible') ?? false
-        break
-      case 'focusout':
-      case 'pointerdown':
-        this.visible = false
-        break
+  getRenderClasses() {
+    return {
+      'button--icon-leading': !this.trailingIcon && this.hasIcon,
+      'button--icon-trailing': this.trailingIcon && this.hasIcon,
     }
-    event[HANDLED_BY_FOCUS_RING] = true
   }
-  onControlChange(prev, next) {
-    for (const event of EVENTS$1) {
-      prev?.removeEventListener(event, this)
-      next?.addEventListener(event, this)
-    }
+  renderContent() {
+    // Link buttons may not be disabled
+    const isDisabled = this.disabled && !this.href
+    const icon = x$1`<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`
+    return x$1`
+      ${this.renderElevation?.()}
+      ${this.renderOutline?.()}
+      <md-focus-ring part="focus-ring"></md-focus-ring>
+      <md-ripple class="button__ripple" ?disabled="${isDisabled}"></md-ripple>
+      <span class="touch"></span>
+      ${this.trailingIcon ? T$1 : icon}
+      <span class="button__label"><slot></slot></span>
+      ${this.trailingIcon ? icon : T$1}
+    `
   }
-  update(changed) {
-    if (changed.has('visible')) {
-      // This logic can be removed once the `:has` selector has been introduced
-      // to Firefox. This is necessary to allow correct submenu styles.
-      this.dispatchEvent(new Event('visibility-changed'))
-    }
-    super.update(changed)
+  handleSlotChange() {
+    this.hasIcon = this.assignedIcons.length > 0
   }
 }
+_a$2 = internals
+;(() => {
+  requestUpdateOnAriaChange(Button)
+  setupFormSubmitter(Button)
+})()
+/** @nocollapse */
+Button.formAssociated = true
+/** @nocollapse */
+Button.shadowRootOptions = { mode: 'open', delegatesFocus: true }
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
-  FocusRing.prototype,
-  'visible',
+  [n$b({ type: Boolean, reflect: true })],
+  Button.prototype,
+  'disabled',
   void 0
 )
+__decorate([n$b()], Button.prototype, 'href', void 0)
+__decorate([n$b()], Button.prototype, 'target', void 0)
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
-  FocusRing.prototype,
-  'inward',
+  [n$b({ type: Boolean, attribute: 'trailing-icon' })],
+  Button.prototype,
+  'trailingIcon',
   void 0
 )
-const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing')
+__decorate(
+  [n$b({ type: Boolean, attribute: 'has-icon' })],
+  Button.prototype,
+  'hasIcon',
+  void 0
+)
+__decorate([n$b()], Button.prototype, 'type', void 0)
+__decorate([n$b()], Button.prototype, 'value', void 0)
+__decorate([e$g('.button')], Button.prototype, 'buttonElement', void 0)
+__decorate(
+  [o$c({ slot: 'icon', flatten: true })],
+  Button.prototype,
+  'assignedIcons',
+  void 0
+)
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A text button component.
+ */
+class TextButton extends Button {}
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$a = i$4`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}/*# sourceMappingURL=focus-ring-styles.css.map */
+const styles$a = i$8`:host{--_container-height: var(--md-text-button-container-height, 40px);--_container-shape: var(--md-text-button-container-shape, 9999px);--_disabled-label-text-color: var(--md-text-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-text-button-disabled-label-text-opacity, 0.38);--_focus-label-text-color: var(--md-text-button-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-text-button-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-text-button-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-text-button-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-text-button-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-font: var(--md-text-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-text-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-text-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-text-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_pressed-label-text-color: var(--md-text-button-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-text-button-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-text-button-pressed-state-layer-opacity, 0.12);--_disabled-icon-color: var(--md-text-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-text-button-disabled-icon-opacity, 0.38);--_focus-icon-color: var(--md-text-button-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-icon-color: var(--md-text-button-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-color: var(--md-text-button-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-text-button-icon-size, 18px);--_pressed-icon-color: var(--md-text-button-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-space: var(--md-text-button-leading-space, 12px);--_trailing-space: var(--md-text-button-trailing-space, 12px);--_with-leading-icon-leading-space: var(--md-text-button-with-leading-icon-leading-space, 12px);--_with-leading-icon-trailing-space: var(--md-text-button-with-leading-icon-trailing-space, 16px);--_with-trailing-icon-leading-space: var(--md-text-button-with-trailing-icon-leading-space, 16px);--_with-trailing-icon-trailing-space: var(--md-text-button-with-trailing-icon-trailing-space, 12px);--_container-color: none;--_disabled-container-color: none;--_disabled-container-opacity: 0;--_container-shape-start-start: var( --md-text-button-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-text-button-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-text-button-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-text-button-container-shape-end-start, var(--_container-shape) )}/*# sourceMappingURL=text-styles.css.map */
 `
 
 /**
@@ -5591,14 +5893,28 @@ const styles$a = i$4`:host{animation-delay:0s,calc(var(--md-focus-ring-duration,
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * TODO(b/267336424): add docs
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Low emphasis – For optional or supplementary actions with the
+ * least amount of prominence
+ *
+ * __Rationale:__ Text buttons have less visual prominence, so should be used
+ * for low emphasis actions, such as an alternative option.
+ *
+ * __Example usages:__
+ * - Learn more
+ * - View all
+ * - Change account
+ * - Turn on
  *
  * @final
  * @suppress {visibility}
  */
-let MdFocusRing = class MdFocusRing extends FocusRing {}
-MdFocusRing.styles = [styles$a]
-MdFocusRing = __decorate([t$3('md-focus-ring')], MdFocusRing)
+let MdTextButton = class MdTextButton extends TextButton {}
+MdTextButton.styles = [styles$d, styles$a]
+MdTextButton = __decorate([t$9('md-text-button')], MdTextButton)
 
 /**
  * @license
@@ -5606,26 +5922,366 @@ MdFocusRing = __decorate([t$3('md-focus-ring')], MdFocusRing)
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * A component for elevation.
+ * A `ReactiveController` that provides root node-scoped single selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * To use, elements should add the controller and call
+ * `selectionController.handleCheckedChange()` in a getter/setter. This must
+ * be synchronous to match native behavior.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyToggle extends LitElement {
+ *   get checked() { return this[CHECKED]; }
+ *   set checked(checked: boolean) {
+ *     const oldValue = this.checked;
+ *     if (oldValue === checked) {
+ *       return;
+ *     }
+ *
+ *     this[CHECKED] = checked;
+ *     this.selectionController.handleCheckedChange();
+ *     this.requestUpdate('checked', oldValue);
+ *   }
+ *
+ *   [CHECKED] = false;
+ *
+ *   private selectionController = new SingleSelectionController(this);
+ *
+ *   constructor() {
+ *     super();
+ *     this.addController(this.selectionController);
+ *   }
+ * }
  */
-class Elevation extends s$1 {
-  connectedCallback() {
-    super.connectedCallback()
-    // Needed for VoiceOver, which will create a "group" if the element is a
-    // sibling to other content.
-    this.setAttribute('aria-hidden', 'true')
+class SingleSelectionController {
+  constructor(host) {
+    this.host = host
+    this.focused = false
+    this.root = null
+    this.handleFocusIn = () => {
+      this.focused = true
+      this.updateTabIndices()
+    }
+    this.handleFocusOut = () => {
+      this.focused = false
+      this.updateTabIndices()
+    }
+    /**
+     * Handles arrow key events from the host. Using the arrow keys will
+     * select and check the next or previous sibling with the host's
+     * `name` attribute.
+     */
+    this.handleKeyDown = event => {
+      const isDown = event.key === 'ArrowDown'
+      const isUp = event.key === 'ArrowUp'
+      const isLeft = event.key === 'ArrowLeft'
+      const isRight = event.key === 'ArrowRight'
+      // Ignore non-arrow keys
+      if (!isLeft && !isRight && !isDown && !isUp) {
+        return
+      }
+      // Don't try to select another sibling if there aren't any.
+      const siblings = this.getNamedSiblings()
+      if (!siblings.length) {
+        return
+      }
+      // Prevent default interactions on the element for arrow keys,
+      // since this controller will introduce new behavior.
+      event.preventDefault()
+      // Check if moving forwards or backwards
+      const isRtl = getComputedStyle(this.host).direction === 'rtl'
+      const forwards = isRtl ? isLeft || isDown : isRight || isDown
+      const hostIndex = siblings.indexOf(this.host)
+      let nextIndex = forwards ? hostIndex + 1 : hostIndex - 1
+      // Search for the next sibling that is not disabled to select.
+      // If we return to the host index, there is nothing to select.
+      while (nextIndex !== hostIndex) {
+        if (nextIndex >= siblings.length) {
+          // Return to start if moving past the last item.
+          nextIndex = 0
+        } else if (nextIndex < 0) {
+          // Go to end if moving before the first item.
+          nextIndex = siblings.length - 1
+        }
+        // Check if the next sibling is disabled. If so,
+        // move the index and continue searching.
+        const nextSibling = siblings[nextIndex]
+        if (nextSibling.hasAttribute('disabled')) {
+          if (forwards) {
+            nextIndex++
+          } else {
+            nextIndex--
+          }
+          continue
+        }
+        // Uncheck and remove focusability from other siblings.
+        for (const sibling of siblings) {
+          if (sibling !== nextSibling) {
+            sibling.checked = false
+            sibling.tabIndex = -1
+            sibling.blur()
+          }
+        }
+        // The next sibling should be checked, focused and dispatch a change event
+        nextSibling.checked = true
+        nextSibling.tabIndex = 0
+        nextSibling.focus()
+        // Fire a change event since the change is triggered by a user action.
+        // This matches native <input type="radio"> behavior.
+        nextSibling.dispatchEvent(new Event('change', { bubbles: true }))
+        break
+      }
+    }
+  }
+  hostConnected() {
+    this.root = this.host.getRootNode()
+    this.host.addEventListener('keydown', this.handleKeyDown)
+    this.host.addEventListener('focusin', this.handleFocusIn)
+    this.host.addEventListener('focusout', this.handleFocusOut)
+    if (this.host.checked) {
+      // Uncheck other siblings when attached if already checked. This mimics
+      // native <input type="radio"> behavior.
+      this.uncheckSiblings()
+    }
+    // Update for the newly added host.
+    this.updateTabIndices()
+  }
+  hostDisconnected() {
+    this.host.removeEventListener('keydown', this.handleKeyDown)
+    this.host.removeEventListener('focusin', this.handleFocusIn)
+    this.host.removeEventListener('focusout', this.handleFocusOut)
+    // Update for siblings that are still connected.
+    this.updateTabIndices()
+    this.root = null
+  }
+  /**
+   * Should be called whenever the host's `checked` property changes
+   * synchronously.
+   */
+  handleCheckedChange() {
+    if (!this.host.checked) {
+      return
+    }
+    this.uncheckSiblings()
+    this.updateTabIndices()
+  }
+  uncheckSiblings() {
+    for (const sibling of this.getNamedSiblings()) {
+      if (sibling !== this.host) {
+        sibling.checked = false
+      }
+    }
+  }
+  /**
+   * Updates the `tabindex` of the host and its siblings.
+   */
+  updateTabIndices() {
+    // There are three tabindex states for a group of elements:
+    // 1. If any are checked, that element is focusable.
+    const siblings = this.getNamedSiblings()
+    const checkedSibling = siblings.find(sibling => sibling.checked)
+    // 2. If an element is focused, the others are no longer focusable.
+    if (checkedSibling || this.focused) {
+      const focusable = checkedSibling || this.host
+      focusable.tabIndex = 0
+      for (const sibling of siblings) {
+        if (sibling !== focusable) {
+          sibling.tabIndex = -1
+        }
+      }
+      return
+    }
+    // 3. If none are checked or focused, all are focusable.
+    for (const sibling of siblings) {
+      sibling.tabIndex = 0
+    }
+  }
+  /**
+   * Retrieves all siblings in the host element's root with the same `name`
+   * attribute.
+   */
+  getNamedSiblings() {
+    const name = this.host.getAttribute('name')
+    if (!name || !this.root) {
+      return []
+    }
+    return Array.from(this.root.querySelectorAll(`[name="${name}"]`))
+  }
+}
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a$1
+const CHECKED = Symbol('checked')
+let maskId = 0
+/**
+ * A radio component.
+ *
+ * @fires input Dispatched when the value changes from user interaction.
+ * --bubbles
+ * @fires change Dispatched when the value changes from user interaction.
+ * --bubbles --composed
+ */
+class Radio extends s$9 {
+  /**
+   * Whether or not the radio is selected.
+   */
+  get checked() {
+    return this[CHECKED]
+  }
+  set checked(checked) {
+    const wasChecked = this.checked
+    if (wasChecked === checked) {
+      return
+    }
+    this[CHECKED] = checked
+    const state = String(checked)
+    this.internals.setFormValue(this.checked ? this.value : null, state)
+    this.requestUpdate('checked', wasChecked)
+    this.selectionController.handleCheckedChange()
+  }
+  /**
+   * The HTML name to use in form submission.
+   */
+  get name() {
+    return this.getAttribute('name') ?? ''
+  }
+  set name(name) {
+    this.setAttribute('name', name)
+  }
+  /**
+   * The associated form element with which this element's value will submit.
+   */
+  get form() {
+    return this.internals.form
+  }
+  /**
+   * The labels this element is associated with.
+   */
+  get labels() {
+    return this.internals.labels
+  }
+  constructor() {
+    super()
+    // Unique maskId is required because of a Safari bug that fail to persist
+    // reference to the mask. This should be removed once the bug is fixed.
+    this.maskId = `cutout${++maskId}`
+    this[_a$1] = false
+    /**
+     * Whether or not the radio is disabled.
+     */
+    this.disabled = false
+    /**
+     * The element value to use in form submission when checked.
+     */
+    this.value = 'on'
+    this.selectionController = new SingleSelectionController(this)
+    this.internals = polyfillElementInternalsAria(
+      this,
+      this /* needed for closure */.attachInternals()
+    )
+    this.addController(this.selectionController)
+    {
+      this.internals.role = 'radio'
+      this.addEventListener('click', this.handleClick.bind(this))
+      this.addEventListener('keydown', this.handleKeydown.bind(this))
+    }
   }
   render() {
-    return x`<span class="shadow"></span>`
+    const classes = { checked: this.checked }
+    return x$1`
+      <div class="container ${e$c(classes)}" aria-hidden="true">
+        <md-ripple part="ripple" .control=${this}
+            ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring part="focus-ring" .control=${this}></md-focus-ring>
+        <svg class="icon" viewBox="0 0 20 20">
+          <mask id="${this.maskId}">
+            <rect width="100%" height="100%" fill="white" />
+            <circle cx="10" cy="10" r="8" fill="black" />
+          </mask>
+          <circle class="outer circle" cx="10" cy="10" r="10"
+              mask="url(#${this.maskId})" />
+          <circle class="inner circle" cx="10" cy="10" r="5" />
+        </svg>
+
+        <input
+          id="input"
+          type="radio"
+          tabindex="-1"
+          .checked=${this.checked}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+        >
+      </div>
+    `
+  }
+  updated() {
+    this.internals.ariaChecked = String(this.checked)
+  }
+  async handleClick(event) {
+    if (this.disabled) {
+      return
+    }
+    // allow event to propagate to user code after a microtask.
+    await 0
+    if (event.defaultPrevented) {
+      return
+    }
+    if (isActivationClick(event)) {
+      this.focus()
+    }
+    // Per spec, clicking on a radio input always selects it.
+    this.checked = true
+    this.dispatchEvent(new Event('change', { bubbles: true }))
+    this.dispatchEvent(
+      new InputEvent('input', { bubbles: true, composed: true })
+    )
+  }
+  async handleKeydown(event) {
+    // allow event to propagate to user code after a microtask.
+    await 0
+    if (event.key !== ' ' || event.defaultPrevented) {
+      return
+    }
+    this.click()
+  }
+  /** @private */
+  formResetCallback() {
+    // The checked property does not reflect, so the original attribute set by
+    // the user is used to determine the default value.
+    this.checked = this.hasAttribute('checked')
+  }
+  /** @private */
+  formStateRestoreCallback(state) {
+    this.checked = state === 'true'
   }
 }
+_a$1 = CHECKED
+;(() => {
+  setupHostAria(Radio)
+})()
+/** @nocollapse */
+Radio.formAssociated = true
+__decorate([n$b({ type: Boolean })], Radio.prototype, 'checked', null)
+__decorate(
+  [n$b({ type: Boolean, reflect: true })],
+  Radio.prototype,
+  'disabled',
+  void 0
+)
+__decorate([n$b()], Radio.prototype, 'value', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$9 = i$4`:host{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}/*# sourceMappingURL=elevation-styles.css.map */
+const styles$9 = i$8`@layer{:host{--_disabled-selected-icon-color: var(--md-radio-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-selected-icon-opacity: var(--md-radio-disabled-selected-icon-opacity, 0.38);--_disabled-unselected-icon-color: var(--md-radio-disabled-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-unselected-icon-opacity: var(--md-radio-disabled-unselected-icon-opacity, 0.38);--_icon-size: var(--md-radio-icon-size, 20px);--_selected-focus-icon-color: var(--md-radio-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-radio-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-radio-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-radio-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-radio-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-radio-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-radio-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_selected-pressed-state-layer-opacity: var(--md-radio-selected-pressed-state-layer-opacity, 0.12);--_state-layer-size: var(--md-radio-state-layer-size, 40px);--_focus-icon-color: var(--md-radio-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-icon-color: var(--md-radio-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-radio-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-radio-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-radio-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-radio-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-radio-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-radio-pressed-state-layer-opacity, 0.12);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex;height:var(--_icon-size);outline:none;position:relative;vertical-align:top;width:var(--_icon-size);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_icon-size))/2)}.container{display:flex;height:100%;place-content:center;place-items:center;width:100%}md-focus-ring{height:44px;inset:unset;width:44px}.checked{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}input{appearance:none;height:48px;margin:0;position:absolute;width:48px;cursor:inherit}:host([touch-target=none]) input{width:100%;height:100%}md-ripple{border-radius:50%;height:var(--_state-layer-size);inset:unset;width:var(--_state-layer-size)}.icon{fill:var(--_icon-color);inset:0;position:absolute}.outer.circle{transition:fill 50ms linear}.inner.circle{opacity:0;transform-origin:center;transition:opacity 50ms linear}.checked .icon{fill:var(--_selected-icon-color)}.checked .inner.circle{animation:inner-circle-grow 300ms cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1}@keyframes inner-circle-grow{from{transform:scale(0)}to{transform:scale(1)}}:host([disabled]) .circle{animation-duration:0s;transition-duration:0s}:host(:hover) .icon{fill:var(--_hover-icon-color)}:host(:focus-within) .icon{fill:var(--_focus-icon-color)}:host(:active) .icon{fill:var(--_pressed-icon-color)}:host([disabled]) .icon{fill:var(--_disabled-unselected-icon-color);opacity:var(--_disabled-unselected-icon-opacity)}:host(:hover) .checked .icon{fill:var(--_selected-hover-icon-color)}:host(:focus-within) .checked .icon{fill:var(--_selected-focus-icon-color)}:host(:active) .checked .icon{fill:var(--_selected-pressed-icon-color)}:host([disabled]) .checked .icon{fill:var(--_disabled-selected-icon-color);opacity:var(--_disabled-selected-icon-opacity)}}@layer hcm{@media(forced-colors: active){.icon{fill:CanvasText}:host([disabled]) .icon{fill:GrayText;opacity:1}}}/*# sourceMappingURL=radio-styles.css.map */
 `
 
 /**
@@ -5634,2897 +6290,3694 @@ const styles$9 = i$4`:host{--_level: var(--md-elevation-level, 0);--_shadow-colo
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * The `<md-elevation>` custom element with default styles.
+ * @summary Radio buttons allow users to select one option from a set.
  *
- * Elevation is the relative distance between two surfaces along the z-axis.
- */
-let MdElevation = class MdElevation extends Elevation {}
-MdElevation.styles = [styles$9]
-MdElevation = __decorate([t$3('md-elevation')], MdElevation)
+ * @description
+ * Radio buttons are the recommended way to allow users to make a single
+ * selection from a list of options.
+ *
+ * Only one radio button can be selected at a time.
+ *
+ * Use radio buttons to:
+ * - Select a single option from a set
+ * - Expose all available options
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdRadio = class MdRadio extends Radio {}
+MdRadio.styles = [styles$9]
+MdRadio = __decorate([t$9('md-radio')], MdRadio)
 
 /**
  * @license
- * Copyright 2017 Google LLC
+ * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t = {
-    ATTRIBUTE: 1,
-    CHILD: 2,
-    PROPERTY: 3,
-    BOOLEAN_ATTRIBUTE: 4,
-    EVENT: 5,
-    ELEMENT: 6,
-  },
-  e$2 = t => (...e) => ({ _$litDirective$: t, values: e })
-class i$1 {
-  constructor(t) {}
-  get _$AU() {
-    return this._$AM._$AU
-  }
-  _$AT(t, e, i) {
-    ;(this._$Ct = t), (this._$AM = e), (this._$Ci = i)
+const t$5 = window,
+  e$a =
+    t$5.ShadowRoot &&
+    (void 0 === t$5.ShadyCSS || t$5.ShadyCSS.nativeShadow) &&
+    'adoptedStyleSheets' in Document.prototype &&
+    'replace' in CSSStyleSheet.prototype,
+  s$7 = Symbol(),
+  n$8 = new WeakMap()
+class o$9 {
+  constructor(t, e, n) {
+    if (((this._$cssResult$ = !0), n !== s$7))
+      throw Error(
+        'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.'
+      )
+    ;(this.cssText = t), (this.t = e)
   }
-  _$AS(t, e) {
-    return this.update(t, e)
+  get styleSheet() {
+    let t = this.o
+    const s = this.t
+    if (e$a && void 0 === t) {
+      const e = void 0 !== s && 1 === s.length
+      e && (t = n$8.get(s)),
+        void 0 === t &&
+          ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText),
+          e && n$8.set(s, t))
+    }
+    return t
   }
-  update(t, e) {
-    return this.render(...e)
+  toString() {
+    return this.cssText
   }
 }
+const r$4 = t => new o$9('string' == typeof t ? t : t + '', void 0, s$7),
+  i$4 = (t, ...e) => {
+    const n =
+      1 === t.length
+        ? t[0]
+        : e.reduce(
+            (e, s, n) =>
+              e +
+              (t => {
+                if (!0 === t._$cssResult$) return t.cssText
+                if ('number' == typeof t) return t
+                throw Error(
+                  "Value passed to 'css' function must be a 'css' function result: " +
+                    t +
+                    ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security."
+                )
+              })(s) +
+              t[n + 1],
+            t[0]
+          )
+    return new o$9(n, t, s$7)
+  },
+  S$1 = (s, n) => {
+    e$a
+      ? (s.adoptedStyleSheets = n.map(t =>
+          t instanceof CSSStyleSheet ? t : t.styleSheet
+        ))
+      : n.forEach(e => {
+          const n = document.createElement('style'),
+            o = t$5.litNonce
+          void 0 !== o && n.setAttribute('nonce', o),
+            (n.textContent = e.cssText),
+            s.appendChild(n)
+        })
+  },
+  c$2 = e$a
+    ? t => t
+    : t =>
+        t instanceof CSSStyleSheet
+          ? (t => {
+              let e = ''
+              for (const s of t.cssRules) e += s.cssText
+              return r$4(e)
+            })(t)
+          : t
 
 /**
  * @license
- * Copyright 2018 Google LLC
+ * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */ const e$1 = e$2(
-  class extends i$1 {
-    constructor(t$1) {
-      if (
-        (super(t$1),
-        t$1.type !== t.ATTRIBUTE ||
-          'class' !== t$1.name ||
-          t$1.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.it) {
-        ;(this.it = new Set()),
-          void 0 !== s.strings &&
-            (this.st = new Set(
-              s.strings
-                .join(' ')
-                .split(/\s/)
-                .filter(t => '' !== t)
-            ))
-        for (const t in i) i[t] && !this.st?.has(t) && this.it.add(t)
-        return this.render(i)
+ */ var s$6
+const e$9 = window,
+  r$3 = e$9.trustedTypes,
+  h$3 = r$3 ? r$3.emptyScript : '',
+  o$8 = e$9.reactiveElementPolyfillSupport,
+  n$7 = {
+    toAttribute(t, i) {
+      switch (i) {
+        case Boolean:
+          t = t ? h$3 : null
+          break
+        case Object:
+        case Array:
+          t = null == t ? t : JSON.stringify(t)
       }
-      const r = s.element.classList
-      for (const t of this.it) t in i || (r.remove(t), this.it.delete(t))
-      for (const t in i) {
-        const s = !!i[t]
-        s === this.it.has(t) ||
-          this.st?.has(t) ||
-          (s ? (r.add(t), this.it.add(t)) : (r.remove(t), this.it.delete(t)))
+      return t
+    },
+    fromAttribute(t, i) {
+      let s = t
+      switch (i) {
+        case Boolean:
+          s = null !== t
+          break
+        case Number:
+          s = null === t ? null : Number(t)
+          break
+        case Object:
+        case Array:
+          try {
+            s = JSON.parse(t)
+          } catch (t) {
+            s = null
+          }
       }
-      return w
+      return s
+    },
+  },
+  a$1 = (t, i) => i !== t && (i == i || t == t),
+  l$3 = {
+    attribute: !0,
+    type: String,
+    converter: n$7,
+    reflect: !1,
+    hasChanged: a$1,
+  }
+class d$1 extends HTMLElement {
+  constructor() {
+    super(),
+      (this._$Ei = new Map()),
+      (this.isUpdatePending = !1),
+      (this.hasUpdated = !1),
+      (this._$El = null),
+      this.u()
+  }
+  static addInitializer(t) {
+    var i
+    this.finalize(),
+      (null !== (i = this.h) && void 0 !== i ? i : (this.h = [])).push(t)
+  }
+  static get observedAttributes() {
+    this.finalize()
+    const t = []
+    return (
+      this.elementProperties.forEach((i, s) => {
+        const e = this._$Ep(s, i)
+        void 0 !== e && (this._$Ev.set(e, s), t.push(e))
+      }),
+      t
+    )
+  }
+  static createProperty(t, i = l$3) {
+    if (
+      (i.state && (i.attribute = !1),
+      this.finalize(),
+      this.elementProperties.set(t, i),
+      !i.noAccessor && !this.prototype.hasOwnProperty(t))
+    ) {
+      const s = 'symbol' == typeof t ? Symbol() : '__' + t,
+        e = this.getPropertyDescriptor(t, s, i)
+      void 0 !== e && Object.defineProperty(this.prototype, t, e)
     }
   }
-)
-
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const n$1 = 'important',
-  i = ' !' + n$1,
-  o$1 = e$2(
-    class extends i$1 {
-      constructor(t$1) {
-        if (
-          (super(t$1),
-          t$1.type !== t.ATTRIBUTE ||
-            'style' !== t$1.name ||
-            t$1.strings?.length > 2)
-        )
-          throw Error(
-            'The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.'
-          )
-      }
-      render(t) {
-        return Object.keys(t).reduce((e, r) => {
-          const s = t[r]
-          return null == s
-            ? e
-            : e +
-                `${(r = r.includes('-')
-                  ? r
-                  : r
-                      .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')
-                      .toLowerCase())}:${s};`
-        }, '')
-      }
-      update(e, [r]) {
-        const { style: s } = e.element
-        if (void 0 === this.ut)
-          return (this.ut = new Set(Object.keys(r))), this.render(r)
-        for (const t of this.ut)
-          null == r[t] &&
-            (this.ut.delete(t),
-            t.includes('-') ? s.removeProperty(t) : (s[t] = null))
-        for (const t in r) {
-          const e = r[t]
-          if (null != e) {
-            this.ut.add(t)
-            const r = 'string' == typeof e && e.endsWith(i)
-            t.includes('-') || r
-              ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n$1 : '')
-              : (s[t] = e)
-          }
-        }
-        return w
-      }
+  static getPropertyDescriptor(t, i, s) {
+    return {
+      get() {
+        return this[i]
+      },
+      set(e) {
+        const r = this[t]
+        ;(this[i] = e), this.requestUpdate(t, r, s)
+      },
+      configurable: !0,
+      enumerable: !0,
     }
-  )
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Accessibility Object Model reflective aria properties.
- */
-const ARIA_PROPERTIES = [
-  'ariaAtomic',
-  'ariaAutoComplete',
-  'ariaBusy',
-  'ariaChecked',
-  'ariaColCount',
-  'ariaColIndex',
-  'ariaColSpan',
-  'ariaCurrent',
-  'ariaDisabled',
-  'ariaExpanded',
-  'ariaHasPopup',
-  'ariaHidden',
-  'ariaInvalid',
-  'ariaKeyShortcuts',
-  'ariaLabel',
-  'ariaLevel',
-  'ariaLive',
-  'ariaModal',
-  'ariaMultiLine',
-  'ariaMultiSelectable',
-  'ariaOrientation',
-  'ariaPlaceholder',
-  'ariaPosInSet',
-  'ariaPressed',
-  'ariaReadOnly',
-  'ariaRequired',
-  'ariaRoleDescription',
-  'ariaRowCount',
-  'ariaRowIndex',
-  'ariaRowSpan',
-  'ariaSelected',
-  'ariaSetSize',
-  'ariaSort',
-  'ariaValueMax',
-  'ariaValueMin',
-  'ariaValueNow',
-  'ariaValueText',
-]
-/**
- * Accessibility Object Model aria attributes.
- */
-ARIA_PROPERTIES.map(ariaPropertyToAttribute)
-/**
- * Converts an AOM aria property into its corresponding attribute.
- *
- * @example
- * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
- *
- * @param property The aria property.
- * @return The aria attribute.
- */
-function ariaPropertyToAttribute(property) {
-  return (
-    property
-      .replace('aria', 'aria-')
-      // IDREF attributes also include an "Element" or "Elements" suffix
-      .replace(/Elements?/g, '')
-      .toLowerCase()
-  )
-}
-/**
- * Enables a host custom element to be the target for aria roles and attributes.
- * Components should set the `elementInternals.role` property.
- *
- * By default, aria components are tab focusable. Provide a `focusable: false`
- * option for components that should not be tab focusable, such as
- * `role="listbox"`.
- *
- * This function will also polyfill aria `ElementInternals` properties for
- * Firefox.
- *
- * @param ctor The `ReactiveElement` constructor to set up.
- * @param options Options to configure the element's host aria.
- */
-function setupHostAria(ctor, { focusable } = {}) {
-  if (focusable !== false) {
-    ctor.addInitializer(host => {
-      host.addController({
-        hostConnected() {
-          if (host.hasAttribute('tabindex')) {
-            return
-          }
-          host.tabIndex = 0
-        },
-      })
-    })
   }
-  if ('role' in Element.prototype) {
-    return
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) || l$3
   }
-  // Polyfill reflective aria properties for Firefox
-  for (const ariaProperty of ARIA_PROPERTIES) {
-    ctor.createProperty(ariaProperty, {
-      attribute: ariaPropertyToAttribute(ariaProperty),
-      reflect: true,
-    })
+  static finalize() {
+    if (this.hasOwnProperty('finalized')) return !1
+    this.finalized = !0
+    const t = Object.getPrototypeOf(this)
+    if (
+      (t.finalize(),
+      void 0 !== t.h && (this.h = [...t.h]),
+      (this.elementProperties = new Map(t.elementProperties)),
+      (this._$Ev = new Map()),
+      this.hasOwnProperty('properties'))
+    ) {
+      const t = this.properties,
+        i = [
+          ...Object.getOwnPropertyNames(t),
+          ...Object.getOwnPropertySymbols(t),
+        ]
+      for (const s of i) this.createProperty(s, t[s])
+    }
+    return (this.elementStyles = this.finalizeStyles(this.styles)), !0
   }
-  ctor.createProperty('role', { reflect: true })
-}
-/**
- * Polyfills an element and its `ElementInternals` to support `ARIAMixin`
- * properties on internals. This is needed for Firefox.
- *
- * `setupHostAria()` must be called for the element class.
- *
- * @example
- * class XButton extends LitElement {
- *   static {
- *     setupHostAria(XButton);
- *   }
- *
- *   private internals =
- *       polyfillElementInternalsAria(this, this.attachInternals());
- *
- *   constructor() {
- *     super();
- *     this.internals.role = 'button';
- *   }
- * }
- */
-function polyfillElementInternalsAria(host, internals) {
-  if (checkIfElementInternalsSupportsAria(internals)) {
-    return internals
+  static finalizeStyles(i) {
+    const s = []
+    if (Array.isArray(i)) {
+      const e = new Set(i.flat(1 / 0).reverse())
+      for (const i of e) s.unshift(c$2(i))
+    } else void 0 !== i && s.push(c$2(i))
+    return s
   }
-  if (!('role' in host)) {
-    throw new Error('Missing setupHostAria()')
+  static _$Ep(t, i) {
+    const s = i.attribute
+    return !1 === s
+      ? void 0
+      : 'string' == typeof s
+      ? s
+      : 'string' == typeof t
+      ? t.toLowerCase()
+      : void 0
   }
-  let firstConnectedCallbacks = []
-  let hasBeenConnected = false
-  // Add support for Firefox, which has not yet implement ElementInternals aria
-  for (const ariaProperty of ARIA_PROPERTIES) {
-    let internalAriaValue = null
-    Object.defineProperty(internals, ariaProperty, {
-      enumerable: true,
-      configurable: true,
-      get() {
-        return internalAriaValue
-      },
-      set(value) {
-        const setValue = () => {
-          internalAriaValue = value
-          if (!hasBeenConnected) {
-            firstConnectedCallbacks.push({
-              property: ariaProperty,
-              callback: setValue,
-            })
-            return
-          }
-          // Dynamic lookup rather than hardcoding all properties.
-          // tslint:disable-next-line:no-dict-access-on-struct-type
-          host[ariaProperty] = value
-        }
-        setValue()
-      },
+  u() {
+    var t
+    ;(this._$E_ = new Promise(t => (this.enableUpdating = t))),
+      (this._$AL = new Map()),
+      this._$Eg(),
+      this.requestUpdate(),
+      null === (t = this.constructor.h) ||
+        void 0 === t ||
+        t.forEach(t => t(this))
+  }
+  addController(t) {
+    var i, s
+    ;(null !== (i = this._$ES) && void 0 !== i ? i : (this._$ES = [])).push(t),
+      void 0 !== this.renderRoot &&
+        this.isConnected &&
+        (null === (s = t.hostConnected) || void 0 === s || s.call(t))
+  }
+  removeController(t) {
+    var i
+    null === (i = this._$ES) ||
+      void 0 === i ||
+      i.splice(this._$ES.indexOf(t) >>> 0, 1)
+  }
+  _$Eg() {
+    this.constructor.elementProperties.forEach((t, i) => {
+      this.hasOwnProperty(i) && (this._$Ei.set(i, this[i]), delete this[i])
     })
   }
-  let internalRoleValue = null
-  Object.defineProperty(internals, 'role', {
-    enumerable: true,
-    configurable: true,
-    get() {
-      return internalRoleValue
-    },
-    set(value) {
-      const setRole = () => {
-        internalRoleValue = value
-        if (!hasBeenConnected) {
-          firstConnectedCallbacks.push({
-            property: 'role',
-            callback: setRole,
-          })
-          return
-        }
-        if (value === null) {
-          host.removeAttribute('role')
-        } else {
-          host.setAttribute('role', value)
-        }
-      }
-      setRole()
-    },
-  })
-  host.addController({
-    hostConnected() {
-      if (hasBeenConnected) {
-        return
-      }
-      hasBeenConnected = true
-      const propertiesSetByUser = new Set()
-      // See which properties were set by the user on host before we apply
-      // internals values as attributes to host. Needs to be done in another
-      // for loop because the callbacks set these attributes on host.
-      for (const { property } of firstConnectedCallbacks) {
-        const wasSetByUser =
-          host.getAttribute(ariaPropertyToAttribute(property)) !== null ||
-          // Dynamic lookup rather than hardcoding all properties.
-          // tslint:disable-next-line:no-dict-access-on-struct-type
-          host[property] !== undefined
-        if (wasSetByUser) {
-          propertiesSetByUser.add(property)
-        }
-      }
-      for (const { property, callback } of firstConnectedCallbacks) {
-        // If the user has set the attribute or property, do not override the
-        // user's value
-        if (propertiesSetByUser.has(property)) {
-          continue
-        }
-        callback()
-      }
-      // Remove strong callback references
-      firstConnectedCallbacks = []
-    },
-  })
-  return internals
-}
-// Separate function so that typescript doesn't complain about internals being
-// "never".
-function checkIfElementInternalsSupportsAria(internals) {
-  return 'role' in internals
-}
-
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Easing functions to use for web animations.
- *
- * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
- *
- * TODO(b/241113345): replace with tokens
- */
-const EASING = {
-  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)',
-  STANDARD_ACCELERATE: 'cubic-bezier(.3,0,1,1)',
-  STANDARD_DECELERATE: 'cubic-bezier(0,0,0,1)',
-  EMPHASIZED: 'cubic-bezier(.3,0,0,1)',
-  EMPHASIZED_ACCELERATE: 'cubic-bezier(.3,0,.8,.15)',
-  EMPHASIZED_DECELERATE: 'cubic-bezier(.05,.7,.1,1)',
-}
-/**
- * Creates an `AnimationSignal` that can be used to cancel a previous task.
- *
- * @example
- * class MyClass {
- *   private labelAnimationSignal = createAnimationSignal();
- *
- *   private async animateLabel() {
- *     // Start of the task. Previous tasks will be canceled.
- *     const signal = this.labelAnimationSignal.start();
- *
- *     // Do async work...
- *     if (signal.aborted) {
- *       // Use AbortSignal to check if a request was made to abort after some
- *       // asynchronous work.
- *       return;
- *     }
- *
- *     const animation = this.animate(...);
- *     // Add event listeners to be notified when the task should be canceled.
- *     signal.addEventListener('abort', () => {
- *       animation.cancel();
- *     });
- *
- *     animation.addEventListener('finish', () => {
- *       // Tell the signal that the current task is finished.
- *       this.labelAnimationSignal.finish();
- *     });
- *   }
- * }
- *
- * @return An `AnimationSignal`.
- */
-function createAnimationSignal() {
-  // The current animation's AbortController
-  let animationAbortController = null
-  return {
-    start() {
-      // Tell the previous animation to cancel.
-      animationAbortController?.abort()
-      // Set up a new AbortController for the current animation.
-      animationAbortController = new AbortController()
-      // Provide the AbortSignal so that the caller can check aborted status
-      // and add listeners.
-      return animationAbortController.signal
-    },
-    finish() {
-      animationAbortController = null
-    },
+  createRenderRoot() {
+    var t
+    const s =
+      null !== (t = this.shadowRoot) && void 0 !== t
+        ? t
+        : this.attachShadow(this.constructor.shadowRootOptions)
+    return S$1(s, this.constructor.elementStyles), s
   }
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Activates the first non-disabled item of a given array of items.
- *
- * @param items {Array<ListItem>} The items from which to activate the
- *     first item.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- */
-function activateFirstItem(items, isActivatable = isItemNotDisabled) {
-  // NOTE: These selector functions are static and not on the instance such
-  // that multiple operations can be chained and we do not have to re-query
-  // the DOM
-  const firstItem = getFirstActivatableItem(items, isActivatable)
-  if (firstItem) {
-    firstItem.tabIndex = 0
-    firstItem.focus()
+  connectedCallback() {
+    var t
+    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()),
+      this.enableUpdating(!0),
+      null === (t = this._$ES) ||
+        void 0 === t ||
+        t.forEach(t => {
+          var i
+          return null === (i = t.hostConnected) || void 0 === i
+            ? void 0
+            : i.call(t)
+        })
   }
-  return firstItem
-}
-/**
- * Activates the last non-disabled item of a given array of items.
- *
- * @param items {Array<ListItem>} The items from which to activate the
- *     last item.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- * @nocollapse
- */
-function activateLastItem(items, isActivatable = isItemNotDisabled) {
-  const lastItem = getLastActivatableItem(items, isActivatable)
-  if (lastItem) {
-    lastItem.tabIndex = 0
-    lastItem.focus()
+  enableUpdating(t) {}
+  disconnectedCallback() {
+    var t
+    null === (t = this._$ES) ||
+      void 0 === t ||
+      t.forEach(t => {
+        var i
+        return null === (i = t.hostDisconnected) || void 0 === i
+          ? void 0
+          : i.call(t)
+      })
   }
-  return lastItem
-}
-/**
- * Retrieves the first activated item of a given array of items.
- *
- * @param items {Array<ListItem>} The items to search.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- * @return A record of the first activated item including the item and the
- *     index of the item or `null` if none are activated.
- * @nocollapse
- */
-function getActiveItem(items, isActivatable = isItemNotDisabled) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    if (item.tabIndex === 0 && isActivatable(item)) {
-      return {
-        item,
-        index: i,
-      }
+  attributeChangedCallback(t, i, s) {
+    this._$AK(t, s)
+  }
+  _$EO(t, i, s = l$3) {
+    var e
+    const r = this.constructor._$Ep(t, s)
+    if (void 0 !== r && !0 === s.reflect) {
+      const h = (void 0 !==
+      (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute)
+        ? s.converter
+        : n$7
+      ).toAttribute(i, s.type)
+      ;(this._$El = t),
+        null == h ? this.removeAttribute(r) : this.setAttribute(r, h),
+        (this._$El = null)
     }
   }
-  return null
-}
-/**
- * Retrieves the first non-disabled item of a given array of items. This
- * the first item that is not disabled.
- *
- * @param items {Array<ListItem>} The items to search.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- * @return The first activatable item or `null` if none are activatable.
- * @nocollapse
- */
-function getFirstActivatableItem(items, isActivatable = isItemNotDisabled) {
-  for (const item of items) {
-    if (isActivatable(item)) {
-      return item
+  _$AK(t, i) {
+    var s
+    const e = this.constructor,
+      r = e._$Ev.get(t)
+    if (void 0 !== r && this._$El !== r) {
+      const t = e.getPropertyOptions(r),
+        h =
+          'function' == typeof t.converter
+            ? { fromAttribute: t.converter }
+            : void 0 !==
+              (null === (s = t.converter) || void 0 === s
+                ? void 0
+                : s.fromAttribute)
+            ? t.converter
+            : n$7
+      ;(this._$El = r),
+        (this[r] = h.fromAttribute(i, t.type)),
+        (this._$El = null)
     }
   }
-  return null
-}
-/**
- * Retrieves the last non-disabled item of a given array of items.
- *
- * @param items {Array<ListItem>} The items to search.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- * @return The last activatable item or `null` if none are activatable.
- * @nocollapse
- */
-function getLastActivatableItem(items, isActivatable = isItemNotDisabled) {
-  for (let i = items.length - 1; i >= 0; i--) {
-    const item = items[i]
-    if (isActivatable(item)) {
-      return item
+  requestUpdate(t, i, s) {
+    let e = !0
+    void 0 !== t &&
+      (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$1)(
+        this[t],
+        i
+      )
+        ? (this._$AL.has(t) || this._$AL.set(t, i),
+          !0 === s.reflect &&
+            this._$El !== t &&
+            (void 0 === this._$EC && (this._$EC = new Map()),
+            this._$EC.set(t, s)))
+        : (e = !1)),
+      !this.isUpdatePending && e && (this._$E_ = this._$Ej())
+  }
+  async _$Ej() {
+    this.isUpdatePending = !0
+    try {
+      await this._$E_
+    } catch (t) {
+      Promise.reject(t)
     }
+    const t = this.scheduleUpdate()
+    return null != t && (await t), !this.isUpdatePending
   }
-  return null
-}
-/**
- * Retrieves the next non-disabled item of a given array of items.
- *
- * @param items {Array<ListItem>} The items to search.
- * @param index {{index: number}} The index to search from.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- * @return The next activatable item or `null` if none are activatable.
- */
-function getNextItem(items, index, isActivatable = isItemNotDisabled) {
-  for (let i = 1; i < items.length; i++) {
-    const nextIndex = (i + index) % items.length
-    const item = items[nextIndex]
-    if (isActivatable(item)) {
-      return item
-    }
+  scheduleUpdate() {
+    return this.performUpdate()
   }
-  return items[index] ? items[index] : null
-}
-/**
- * Retrieves the previous non-disabled item of a given array of items.
- *
- * @param items {Array<ListItem>} The items to search.
- * @param index {{index: number}} The index to search from.
- * @param isActivatable Function to determine if an item can be  activated.
- *     Defaults to non-disabled items.
- * @return The previous activatable item or `null` if none are activatable.
- */
-function getPrevItem(items, index, isActivatable = isItemNotDisabled) {
-  for (let i = 1; i < items.length; i++) {
-    const prevIndex = (index - i + items.length) % items.length
-    const item = items[prevIndex]
-    if (isActivatable(item)) {
-      return item
+  performUpdate() {
+    var t
+    if (!this.isUpdatePending) return
+    this.hasUpdated,
+      this._$Ei &&
+        (this._$Ei.forEach((t, i) => (this[i] = t)), (this._$Ei = void 0))
+    let i = !1
+    const s = this._$AL
+    try {
+      ;(i = this.shouldUpdate(s)),
+        i
+          ? (this.willUpdate(s),
+            null === (t = this._$ES) ||
+              void 0 === t ||
+              t.forEach(t => {
+                var i
+                return null === (i = t.hostUpdate) || void 0 === i
+                  ? void 0
+                  : i.call(t)
+              }),
+            this.update(s))
+          : this._$Ek()
+    } catch (t) {
+      throw ((i = !1), this._$Ek(), t)
     }
+    i && this._$AE(s)
   }
-  return items[index] ? items[index] : null
+  willUpdate(t) {}
+  _$AE(t) {
+    var i
+    null === (i = this._$ES) ||
+      void 0 === i ||
+      i.forEach(t => {
+        var i
+        return null === (i = t.hostUpdated) || void 0 === i ? void 0 : i.call(t)
+      }),
+      this.hasUpdated || ((this.hasUpdated = !0), this.firstUpdated(t)),
+      this.updated(t)
+  }
+  _$Ek() {
+    ;(this._$AL = new Map()), (this.isUpdatePending = !1)
+  }
+  get updateComplete() {
+    return this.getUpdateComplete()
+  }
+  getUpdateComplete() {
+    return this._$E_
+  }
+  shouldUpdate(t) {
+    return !0
+  }
+  update(t) {
+    void 0 !== this._$EC &&
+      (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)),
+      (this._$EC = void 0)),
+      this._$Ek()
+  }
+  updated(t) {}
+  firstUpdated(t) {}
 }
+;(d$1.finalized = !0),
+  (d$1.elementProperties = new Map()),
+  (d$1.elementStyles = []),
+  (d$1.shadowRootOptions = { mode: 'open' }),
+  null == o$8 || o$8({ ReactiveElement: d$1 }),
+  (null !== (s$6 = e$9.reactiveElementVersions) && void 0 !== s$6
+    ? s$6
+    : (e$9.reactiveElementVersions = [])
+  ).push('1.6.1')
+
 /**
- * Activates the next item and focuses it. If nothing is currently activated,
- * activates the first item.
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
  */
-function activateNextItem(
-  items,
-  activeItemRecord,
-  isActivatable = isItemNotDisabled
-) {
-  if (activeItemRecord) {
-    const next = getNextItem(items, activeItemRecord.index, isActivatable)
-    if (next) {
-      next.tabIndex = 0
-      next.focus()
+var t$4
+const i$3 = window,
+  s$5 = i$3.trustedTypes,
+  e$8 = s$5 ? s$5.createPolicy('lit-html', { createHTML: t => t }) : void 0,
+  o$7 = `lit$${(Math.random() + '').slice(9)}$`,
+  n$6 = '?' + o$7,
+  l$2 = `<${n$6}>`,
+  h$2 = document,
+  r$2 = (t = '') => h$2.createComment(t),
+  d = t => null === t || ('object' != typeof t && 'function' != typeof t),
+  u = Array.isArray,
+  c$1 = t =>
+    u(t) || 'function' == typeof (null == t ? void 0 : t[Symbol.iterator]),
+  v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
+  a = /-->/g,
+  f = />/g,
+  _ = RegExp(
+    '>|[ \t\n\f\r](?:([^\\s"\'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r"\'`<>=]|("|\')|))|$)',
+    'g'
+  ),
+  m = /'/g,
+  p = /"/g,
+  $ = /^(?:script|style|textarea|title)$/i,
+  g = t => (i, ...s) => ({ _$litType$: t, strings: i, values: s }),
+  y = g(1),
+  x = Symbol.for('lit-noChange'),
+  b = Symbol.for('lit-nothing'),
+  T = new WeakMap(),
+  A = h$2.createTreeWalker(h$2, 129, null, !1),
+  E = (t, i) => {
+    const s = t.length - 1,
+      n = []
+    let h,
+      r = 2 === i ? '<svg>' : '',
+      d = v
+    for (let i = 0; i < s; i++) {
+      const s = t[i]
+      let e,
+        u,
+        c = -1,
+        g = 0
+      for (; g < s.length && ((d.lastIndex = g), (u = d.exec(s)), null !== u); )
+        (g = d.lastIndex),
+          d === v
+            ? '!--' === u[1]
+              ? (d = a)
+              : void 0 !== u[1]
+              ? (d = f)
+              : void 0 !== u[2]
+              ? ($.test(u[2]) && (h = RegExp('</' + u[2], 'g')), (d = _))
+              : void 0 !== u[3] && (d = _)
+            : d === _
+            ? '>' === u[0]
+              ? ((d = null != h ? h : v), (c = -1))
+              : void 0 === u[1]
+              ? (c = -2)
+              : ((c = d.lastIndex - u[2].length),
+                (e = u[1]),
+                (d = void 0 === u[3] ? _ : '"' === u[3] ? p : m))
+            : d === p || d === m
+            ? (d = _)
+            : d === a || d === f
+            ? (d = v)
+            : ((d = _), (h = void 0))
+      const y = d === _ && t[i + 1].startsWith('/>') ? ' ' : ''
+      r +=
+        d === v
+          ? s + l$2
+          : c >= 0
+          ? (n.push(e), s.slice(0, c) + '$lit$' + s.slice(c) + o$7 + y)
+          : s + o$7 + (-2 === c ? (n.push(void 0), i) : y)
     }
-    return next
-  } else {
-    return activateFirstItem(items, isActivatable)
+    const u = r + (t[s] || '<?>') + (2 === i ? '</svg>' : '')
+    if (!Array.isArray(t) || !t.hasOwnProperty('raw'))
+      throw Error('invalid template strings array')
+    return [void 0 !== e$8 ? e$8.createHTML(u) : u, n]
   }
-}
-/**
- * Activates the previous item and focuses it. If nothing is currently
- * activated, activates the last item.
- */
-function activatePreviousItem(
-  items,
-  activeItemRecord,
-  isActivatable = isItemNotDisabled
-) {
-  if (activeItemRecord) {
-    const prev = getPrevItem(items, activeItemRecord.index, isActivatable)
-    if (prev) {
-      prev.tabIndex = 0
-      prev.focus()
+class C {
+  constructor({ strings: t, _$litType$: i }, e) {
+    let l
+    this.parts = []
+    let h = 0,
+      d = 0
+    const u = t.length - 1,
+      c = this.parts,
+      [v, a] = E(t, i)
+    if (
+      ((this.el = C.createElement(v, e)),
+      (A.currentNode = this.el.content),
+      2 === i)
+    ) {
+      const t = this.el.content,
+        i = t.firstChild
+      i.remove(), t.append(...i.childNodes)
+    }
+    for (; null !== (l = A.nextNode()) && c.length < u; ) {
+      if (1 === l.nodeType) {
+        if (l.hasAttributes()) {
+          const t = []
+          for (const i of l.getAttributeNames())
+            if (i.endsWith('$lit$') || i.startsWith(o$7)) {
+              const s = a[d++]
+              if ((t.push(i), void 0 !== s)) {
+                const t = l.getAttribute(s.toLowerCase() + '$lit$').split(o$7),
+                  i = /([.?@])?(.*)/.exec(s)
+                c.push({
+                  type: 1,
+                  index: h,
+                  name: i[2],
+                  strings: t,
+                  ctor:
+                    '.' === i[1] ? M : '?' === i[1] ? k : '@' === i[1] ? H : S,
+                })
+              } else c.push({ type: 6, index: h })
+            }
+          for (const i of t) l.removeAttribute(i)
+        }
+        if ($.test(l.tagName)) {
+          const t = l.textContent.split(o$7),
+            i = t.length - 1
+          if (i > 0) {
+            l.textContent = s$5 ? s$5.emptyScript : ''
+            for (let s = 0; s < i; s++)
+              l.append(t[s], r$2()),
+                A.nextNode(),
+                c.push({ type: 2, index: ++h })
+            l.append(t[i], r$2())
+          }
+        }
+      } else if (8 === l.nodeType)
+        if (l.data === n$6) c.push({ type: 2, index: h })
+        else {
+          let t = -1
+          for (; -1 !== (t = l.data.indexOf(o$7, t + 1)); )
+            c.push({ type: 7, index: h }), (t += o$7.length - 1)
+        }
+      h++
     }
-    return prev
-  } else {
-    return activateLastItem(items, isActivatable)
+  }
+  static createElement(t, i) {
+    const s = h$2.createElement('template')
+    return (s.innerHTML = t), s
   }
 }
-/**
- * The default `isActivatable` function, which checks if an item is not
- * disabled.
- *
- * @param item The item to check.
- * @return true if `item.disabled` is `false.
- */
-function isItemNotDisabled(item) {
-  return !item.disabled
-}
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-// TODO: move this file to List and make List use this
-/**
- * Default keys that trigger navigation.
- */
-// tslint:disable:enforce-name-casing Following Enum style
-const NavigableKeys = {
-  ArrowDown: 'ArrowDown',
-  ArrowLeft: 'ArrowLeft',
-  ArrowUp: 'ArrowUp',
-  ArrowRight: 'ArrowRight',
-  Home: 'Home',
-  End: 'End',
+function P(t, i, s = t, e) {
+  var o, n, l, h
+  if (i === x) return i
+  let r =
+    void 0 !== e
+      ? null === (o = s._$Co) || void 0 === o
+        ? void 0
+        : o[e]
+      : s._$Cl
+  const u = d(i) ? void 0 : i._$litDirective$
+  return (
+    (null == r ? void 0 : r.constructor) !== u &&
+      (null === (n = null == r ? void 0 : r._$AO) ||
+        void 0 === n ||
+        n.call(r, !1),
+      void 0 === u ? (r = void 0) : ((r = new u(t)), r._$AT(t, s, e)),
+      void 0 !== e
+        ? ((null !== (l = (h = s)._$Co) && void 0 !== l ? l : (h._$Co = []))[
+            e
+          ] = r)
+        : (s._$Cl = r)),
+    void 0 !== r && (i = P(t, r._$AS(t, i.values), r, e)),
+    i
+  )
 }
-/**
- * A controller that handles list keyboard navigation and item management.
- */
-class ListController {
-  constructor(config) {
-    /**
-     * Handles keyboard navigation. Should be bound to the node that will act as
-     * the List.
-     */
-    this.handleKeydown = event => {
-      const key = event.key
-      if (event.defaultPrevented || !this.isNavigableKey(key)) {
-        return
-      }
-      // do not use this.items directly in upcoming calculations so we don't
-      // re-query the DOM unnecessarily
-      const items = this.items
-      if (!items.length) {
-        return
-      }
-      const activeItemRecord = getActiveItem(items, this.isActivatable)
-      if (activeItemRecord) {
-        activeItemRecord.item.tabIndex = -1
-      }
-      event.preventDefault()
-      const isRtl = this.isRtl()
-      const inlinePrevious = isRtl
-        ? NavigableKeys.ArrowRight
-        : NavigableKeys.ArrowLeft
-      const inlineNext = isRtl
-        ? NavigableKeys.ArrowLeft
-        : NavigableKeys.ArrowRight
-      switch (key) {
-        // Activate the next item
-        case NavigableKeys.ArrowDown:
-        case inlineNext:
-          activateNextItem(items, activeItemRecord, this.isActivatable)
-          break
-        // Activate the previous item
-        case NavigableKeys.ArrowUp:
-        case inlinePrevious:
-          activatePreviousItem(items, activeItemRecord, this.isActivatable)
-          break
-        // Activate the first item
-        case NavigableKeys.Home:
-          activateFirstItem(items, this.isActivatable)
-          break
-        // Activate the last item
-        case NavigableKeys.End:
-          activateLastItem(items, this.isActivatable)
-          break
-      }
-    }
-    /**
-     * Listener to be bound to the `deactivate-items` item event.
-     */
-    this.onDeactivateItems = () => {
-      const items = this.items
-      for (const item of items) {
-        this.deactivateItem(item)
-      }
-    }
-    /**
-     * Listener to be bound to the `request-activation` item event..
-     */
-    this.onRequestActivation = event => {
-      this.onDeactivateItems()
-      const target = event.target
-      this.activateItem(target)
-      target.focus()
-    }
-    /**
-     * Listener to be bound to the `slotchange` event for the slot that renders
-     * the items.
-     */
-    this.onSlotchange = () => {
-      const items = this.items
-      // Whether we have encountered an item that has been activated
-      let encounteredActivated = false
-      for (const item of items) {
-        const isActivated = !item.disabled && item.tabIndex > -1
-        if (isActivated && !encounteredActivated) {
-          encounteredActivated = true
-          item.tabIndex = 0
-          continue
-        }
-        // Deactivate the rest including disabled
-        item.tabIndex = -1
-      }
-      if (encounteredActivated) {
-        return
-      }
-      const firstActivatableItem = getFirstActivatableItem(
-        items,
-        this.isActivatable
-      )
-      if (!firstActivatableItem) {
-        return
-      }
-      firstActivatableItem.tabIndex = 0
-    }
-    const {
-      isItem,
-      getPossibleItems,
-      isRtl,
-      deactivateItem,
-      activateItem,
-      isNavigableKey,
-      isActivatable,
-    } = config
-    this.isItem = isItem
-    this.getPossibleItems = getPossibleItems
-    this.isRtl = isRtl
-    this.deactivateItem = deactivateItem
-    this.activateItem = activateItem
-    this.isNavigableKey = isNavigableKey
-    this.isActivatable = isActivatable
+class V {
+  constructor(t, i) {
+    ;(this.u = []), (this._$AN = void 0), (this._$AD = t), (this._$AM = i)
   }
-  /**
-   * The items being managed by the list. Additionally, attempts to see if the
-   * object has a sub-item in the `.item` property.
-   */
-  get items() {
-    const maybeItems = this.getPossibleItems()
-    const items = []
-    for (const itemOrParent of maybeItems) {
-      const isItem = this.isItem(itemOrParent)
-      // if the item is a list item, add it to the list of items
-      if (isItem) {
-        items.push(itemOrParent)
-        continue
-      }
-      // If the item exposes an `item` property check if it is a list item.
-      const subItem = itemOrParent.item
-      if (subItem && this.isItem(subItem)) {
-        items.push(subItem)
-      }
-    }
-    return items
+  get parentNode() {
+    return this._$AM.parentNode
   }
-  /**
-   * Activates the next item in the list. If at the end of the list, the first
-   * item will be activated.
-   *
-   * @return The activated list item or `null` if there are no items.
-   */
-  activateNextItem() {
-    const items = this.items
-    const activeItemRecord = getActiveItem(items, this.isActivatable)
-    if (activeItemRecord) {
-      activeItemRecord.item.tabIndex = -1
-    }
-    return activateNextItem(items, activeItemRecord, this.isActivatable)
+  get _$AU() {
+    return this._$AM._$AU
   }
-  /**
-   * Activates the previous item in the list. If at the start of the list, the
-   * last item will be activated.
-   *
-   * @return The activated list item or `null` if there are no items.
-   */
-  activatePreviousItem() {
-    const items = this.items
-    const activeItemRecord = getActiveItem(items, this.isActivatable)
-    if (activeItemRecord) {
-      activeItemRecord.item.tabIndex = -1
+  v(t) {
+    var i
+    const {
+        el: { content: s },
+        parts: e,
+      } = this._$AD,
+      o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i
+        ? i
+        : h$2
+      ).importNode(s, !0)
+    A.currentNode = o
+    let n = A.nextNode(),
+      l = 0,
+      r = 0,
+      d = e[0]
+    for (; void 0 !== d; ) {
+      if (l === d.index) {
+        let i
+        2 === d.type
+          ? (i = new N(n, n.nextSibling, this, t))
+          : 1 === d.type
+          ? (i = new d.ctor(n, d.name, d.strings, this, t))
+          : 6 === d.type && (i = new I(n, this, t)),
+          this.u.push(i),
+          (d = e[++r])
+      }
+      l !== (null == d ? void 0 : d.index) && ((n = A.nextNode()), l++)
     }
-    return activatePreviousItem(items, activeItemRecord, this.isActivatable)
+    return o
+  }
+  p(t) {
+    let i = 0
+    for (const s of this.u)
+      void 0 !== s &&
+        (void 0 !== s.strings
+          ? (s._$AI(t, s, i), (i += s.strings.length - 2))
+          : s._$AI(t[i])),
+        i++
   }
 }
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Creates an event that closes any parent menus.
- */
-function createCloseMenuEvent(initiator, reason) {
-  return new CustomEvent('close-menu', {
-    bubbles: true,
-    composed: true,
-    detail: { initiator, reason, itemPath: [initiator] },
-  })
-}
-/**
- * Creates a default close menu event used by md-menu.
- */
-const createDefaultCloseMenuEvent = createCloseMenuEvent
-/**
- * Keys that are used for selection in menus.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const SelectionKey = {
-  SPACE: 'Space',
-  ENTER: 'Enter',
-}
-/**
- * Default close `Reason` kind values.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const CloseReason = {
-  CLICK_SELECTION: 'click-selection',
-  KEYDOWN: 'keydown',
-}
-/**
- * Keys that can close menus.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const KeydownCloseKey = {
-  ESCAPE: 'Escape',
-  SPACE: SelectionKey.SPACE,
-  ENTER: SelectionKey.ENTER,
-}
-/**
- * Determines whether the given key code is a key code that should close the
- * menu.
- *
- * @param code The KeyboardEvent code to check.
- * @return Whether or not the key code is in the predetermined list to close the
- * menu.
- */
-function isClosableKey(code) {
-  return Object.values(KeydownCloseKey).some(value => value === code)
-}
-/**
- * Determines whether a target element is contained inside another element's
- * composed tree.
- *
- * @param target The potential contained element.
- * @param container The potential containing element of the target.
- * @returns Whether the target element is contained inside the container's
- * composed subtree
- */
-function isElementInSubtree(target, container) {
-  // Dispatch a composed, bubbling event to check its path to see if the
-  // newly-focused element is contained in container's subtree
-  const focusEv = new Event('md-contains', { bubbles: true, composed: true })
-  let composedPath = []
-  const listener = ev => {
-    composedPath = ev.composedPath()
+class N {
+  constructor(t, i, s, e) {
+    var o
+    ;(this.type = 2),
+      (this._$AH = b),
+      (this._$AN = void 0),
+      (this._$AA = t),
+      (this._$AB = i),
+      (this._$AM = s),
+      (this.options = e),
+      (this._$Cm =
+        null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o)
   }
-  container.addEventListener('md-contains', listener)
-  target.dispatchEvent(focusEv)
-  container.removeEventListener('md-contains', listener)
-  const isContained = composedPath.length > 0
-  return isContained
-}
-/**
- * Element to focus on when menu is first opened.
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const FocusState = {
-  NONE: 'none',
-  LIST_ROOT: 'list-root',
-  FIRST_ITEM: 'first-item',
-  LAST_ITEM: 'last-item',
-}
+  get _$AU() {
+    var t, i
+    return null !==
+      (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) &&
+      void 0 !== i
+      ? i
+      : this._$Cm
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode
+    const i = this._$AM
+    return void 0 !== i && 11 === t.nodeType && (t = i.parentNode), t
+  }
+  get startNode() {
+    return this._$AA
+  }
+  get endNode() {
+    return this._$AB
+  }
+  _$AI(t, i = this) {
+    ;(t = P(this, t, i)),
+      d(t)
+        ? t === b || null == t || '' === t
+          ? (this._$AH !== b && this._$AR(), (this._$AH = b))
+          : t !== this._$AH && t !== x && this.g(t)
+        : void 0 !== t._$litType$
+        ? this.$(t)
+        : void 0 !== t.nodeType
+        ? this.T(t)
+        : c$1(t)
+        ? this.k(t)
+        : this.g(t)
+  }
+  O(t, i = this._$AB) {
+    return this._$AA.parentNode.insertBefore(t, i)
+  }
+  T(t) {
+    this._$AH !== t && (this._$AR(), (this._$AH = this.O(t)))
+  }
+  g(t) {
+    this._$AH !== b && d(this._$AH)
+      ? (this._$AA.nextSibling.data = t)
+      : this.T(h$2.createTextNode(t)),
+      (this._$AH = t)
+  }
+  $(t) {
+    var i
+    const { values: s, _$litType$: e } = t,
+      o =
+        'number' == typeof e
+          ? this._$AC(t)
+          : (void 0 === e.el && (e.el = C.createElement(e.h, this.options)), e)
+    if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o)
+      this._$AH.p(s)
+    else {
+      const t = new V(o, this),
+        i = t.v(this.options)
+      t.p(s), this.T(i), (this._$AH = t)
+    }
+  }
+  _$AC(t) {
+    let i = T.get(t.strings)
+    return void 0 === i && T.set(t.strings, (i = new C(t))), i
+  }
+  k(t) {
+    u(this._$AH) || ((this._$AH = []), this._$AR())
+    const i = this._$AH
+    let s,
+      e = 0
+    for (const o of t)
+      e === i.length
+        ? i.push((s = new N(this.O(r$2()), this.O(r$2()), this, this.options)))
+        : (s = i[e]),
+        s._$AI(o),
+        e++
+    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), (i.length = e))
+  }
+  _$AR(t = this._$AA.nextSibling, i) {
+    var s
+    for (
+      null === (s = this._$AP) || void 0 === s || s.call(this, !1, !0, i);
+      t && t !== this._$AB;
 
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * An enum of supported Menu corners
- */
-// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
-const Corner = {
-  END_START: 'end-start',
-  END_END: 'end-end',
-  START_START: 'start-start',
-  START_END: 'start-end',
+    ) {
+      const i = t.nextSibling
+      t.remove(), (t = i)
+    }
+  }
+  setConnected(t) {
+    var i
+    void 0 === this._$AM &&
+      ((this._$Cm = t),
+      null === (i = this._$AP) || void 0 === i || i.call(this, t))
+  }
 }
-/**
- * Given a surface, an anchor, corners, and some options, this surface will
- * calculate the position of a surface to align the two given corners and keep
- * the surface inside the window viewport. It also provides a StyleInfo map that
- * can be applied to the surface to handle visiblility and position.
- */
-class SurfacePositionController {
-  /**
-   * @param host The host to connect the controller to.
-   * @param getProperties A function that returns the properties for the
-   * controller.
-   */
-  constructor(host, getProperties) {
-    this.host = host
-    this.getProperties = getProperties
-    // The current styles to apply to the surface.
-    this.surfaceStylesInternal = {
-      display: 'none',
+class S {
+  constructor(t, i, s, e, o) {
+    ;(this.type = 1),
+      (this._$AH = b),
+      (this._$AN = void 0),
+      (this.element = t),
+      (this.name = i),
+      (this._$AM = e),
+      (this.options = o),
+      s.length > 2 || '' !== s[0] || '' !== s[1]
+        ? ((this._$AH = Array(s.length - 1).fill(new String())),
+          (this.strings = s))
+        : (this._$AH = b)
+  }
+  get tagName() {
+    return this.element.tagName
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AI(t, i = this, s, e) {
+    const o = this.strings
+    let n = !1
+    if (void 0 === o)
+      (t = P(this, t, i, 0)),
+        (n = !d(t) || (t !== this._$AH && t !== x)),
+        n && (this._$AH = t)
+    else {
+      const e = t
+      let l, h
+      for (t = o[0], l = 0; l < o.length - 1; l++)
+        (h = P(this, e[s + l], i, l)),
+          h === x && (h = this._$AH[l]),
+          n || (n = !d(h) || h !== this._$AH[l]),
+          h === b ? (t = b) : t !== b && (t += (null != h ? h : '') + o[l + 1]),
+          (this._$AH[l] = h)
     }
-    // Previous values stored for change detection. Open change detection is
-    // calculated separately so initialize it here.
-    this.lastValues = { isOpen: false }
-    this.host.addController(this)
+    n && !e && this.j(t)
   }
-  /**
-   * The StyleInfo map to apply to the surface via Lit's stylemap
-   */
-  get surfaceStyles() {
-    return this.surfaceStylesInternal
+  j(t) {
+    t === b
+      ? this.element.removeAttribute(this.name)
+      : this.element.setAttribute(this.name, null != t ? t : '')
   }
-  /**
-   * Calculates the surface's new position required so that the surface's
-   * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the
-   * surface inside the window viewport. This positioning also respects RTL by
-   * checking `getComputedStyle()` on the surface element.
-   */
-  async position() {
-    const {
-      surfaceEl,
-      anchorEl,
-      anchorCorner: anchorCornerRaw,
-      surfaceCorner: surfaceCornerRaw,
-      positioning,
-      xOffset,
-      yOffset,
-      repositionStrategy,
-    } = this.getProperties()
-    const anchorCorner = anchorCornerRaw.toLowerCase().trim()
-    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim()
-    if (!surfaceEl || !anchorEl) {
+}
+class M extends S {
+  constructor() {
+    super(...arguments), (this.type = 3)
+  }
+  j(t) {
+    this.element[this.name] = t === b ? void 0 : t
+  }
+}
+const R = s$5 ? s$5.emptyScript : ''
+class k extends S {
+  constructor() {
+    super(...arguments), (this.type = 4)
+  }
+  j(t) {
+    t && t !== b
+      ? this.element.setAttribute(this.name, R)
+      : this.element.removeAttribute(this.name)
+  }
+}
+class H extends S {
+  constructor(t, i, s, e, o) {
+    super(t, i, s, e, o), (this.type = 5)
+  }
+  _$AI(t, i = this) {
+    var s
+    if ((t = null !== (s = P(this, t, i, 0)) && void 0 !== s ? s : b) === x)
       return
-    }
-    // Store these before we potentially resize the window with the next set of
-    // lines
-    const windowInnerWidth = window.innerWidth
-    const windowInnerHeight = window.innerHeight
-    // Paint the surface transparently so that we can get the position and the
-    // rect info of the surface.
-    this.surfaceStylesInternal = {
-      display: 'block',
-      opacity: '0',
-    }
-    // Wait for it to be visible.
-    this.host.requestUpdate()
-    await this.host.updateComplete
-    const surfaceRect = surfaceEl.getSurfacePositionClientRect
-      ? surfaceEl.getSurfacePositionClientRect()
-      : surfaceEl.getBoundingClientRect()
-    const anchorRect = anchorEl.getSurfacePositionClientRect
-      ? anchorEl.getSurfacePositionClientRect()
-      : anchorEl.getBoundingClientRect()
-    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-')
-    const [anchorBlock, anchorInline] = anchorCorner.split('-')
-    // LTR depends on the direction of the SURFACE not the anchor.
-    const isLTR = getComputedStyle(surfaceEl).direction === 'ltr'
-    /*
-     * A diagram that helps describe some of the variables used in the following
-     * calculations.
-     *
-     * ┌───── inline/blockTopLayerOffset
-     * │       │
-     * │     ┌─▼───┐                  Window
-     * │    ┌┼─────┴────────────────────────┐
-     * │    ││                              │
-     * └──► ││  ┌──inline/blockAnchorOffset │
-     *      ││  │     │                     │
-     *      └┤  │  ┌──▼───┐                 │
-     *       │  │ ┌┼──────┤                 │
-     *       │  └─►│Anchor│                 │
-     *       │    └┴──────┘                 │
-     *       │                              │
-     *       │     ┌────────────────────────┼────┐
-     *       │     │ Surface                │    │
-     *       │     │                        │    │
-     *       │     │                        │    │
-     *       │     │                        │    │
-     *       │     │                        │    │
-     *       │     │                        │    │
-     *       └─────┼────────────────────────┘    ├┐
-     *             │ inline/blockOOBCorrection   ││
-     *             │                         │   ││
-     *             │                         ├──►││
-     *             │                         │   ││
-     *             └────────────────────────┐▼───┼┘
-     *                                      └────┘
-     */
-    // Calculate the block positioning properties
-    let {
-      blockInset,
-      blockOutOfBoundsCorrection,
-      surfaceBlockProperty,
-    } = this.calculateBlock({
-      surfaceRect,
-      anchorRect,
-      anchorBlock,
-      surfaceBlock,
-      yOffset,
-      positioning,
-      windowInnerHeight,
-    })
-    // If the surface should be out of bounds in the block direction, flip the
-    // surface and anchor corner block values and recalculate
-    if (blockOutOfBoundsCorrection) {
-      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start'
-      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start'
-      const flippedBlock = this.calculateBlock({
-        surfaceRect,
-        anchorRect,
-        anchorBlock: flippedAnchorBlock,
-        surfaceBlock: flippedSurfaceBlock,
-        yOffset,
-        positioning,
-        windowInnerHeight,
-      })
-      // In the case that the flipped verion would require less out of bounds
-      // correcting, use the flipped corner block values
-      if (
-        blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection
-      ) {
-        blockInset = flippedBlock.blockInset
-        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection
-        surfaceBlockProperty = flippedBlock.surfaceBlockProperty
-      }
-    }
-    // Calculate the inline positioning properties
-    let {
-      inlineInset,
-      inlineOutOfBoundsCorrection,
-      surfaceInlineProperty,
-    } = this.calculateInline({
-      surfaceRect,
-      anchorRect,
-      anchorInline,
-      surfaceInline,
-      xOffset,
-      positioning,
-      isLTR,
-      windowInnerWidth,
-    })
-    // If the surface should be out of bounds in the inline direction, flip the
-    // surface and anchor corner inline values and recalculate
-    if (inlineOutOfBoundsCorrection) {
-      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start'
-      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start'
-      const flippedInline = this.calculateInline({
-        surfaceRect,
-        anchorRect,
-        anchorInline: flippedAnchorInline,
-        surfaceInline: flippedSurfaceInline,
-        xOffset,
-        positioning,
-        isLTR,
-        windowInnerWidth,
-      })
-      // In the case that the flipped verion would require less out of bounds
-      // correcting, use the flipped corner inline values
-      if (
-        Math.abs(inlineOutOfBoundsCorrection) >
-        Math.abs(flippedInline.inlineOutOfBoundsCorrection)
-      ) {
-        inlineInset = flippedInline.inlineInset
-        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection
-        surfaceInlineProperty = flippedInline.surfaceInlineProperty
-      }
-    }
-    // If we are simply repositioning the surface back inside the viewport,
-    // subtract the out of bounds correction values from the positioning.
-    if (repositionStrategy === 'move') {
-      blockInset = blockInset - blockOutOfBoundsCorrection
-      inlineInset = inlineInset - inlineOutOfBoundsCorrection
-    }
-    this.surfaceStylesInternal = {
-      display: 'block',
-      opacity: '1',
-      [surfaceBlockProperty]: `${blockInset}px`,
-      [surfaceInlineProperty]: `${inlineInset}px`,
-    }
-    // In the case that we are resizing the surface to stay inside the viewport
-    // we need to set height and width on the surface.
-    if (repositionStrategy === 'resize') {
-      // Add a height property to the styles if there is block height correction
-      if (blockOutOfBoundsCorrection) {
-        this.surfaceStylesInternal['height'] = `${surfaceRect.height -
-          blockOutOfBoundsCorrection}px`
+    const e = this._$AH,
+      o =
+        (t === b && e !== b) ||
+        t.capture !== e.capture ||
+        t.once !== e.once ||
+        t.passive !== e.passive,
+      n = t !== b && (e === b || o)
+    o && this.element.removeEventListener(this.name, this, e),
+      n && this.element.addEventListener(this.name, this, t),
+      (this._$AH = t)
+  }
+  handleEvent(t) {
+    var i, s
+    'function' == typeof this._$AH
+      ? this._$AH.call(
+          null !==
+            (s =
+              null === (i = this.options) || void 0 === i ? void 0 : i.host) &&
+            void 0 !== s
+            ? s
+            : this.element,
+          t
+        )
+      : this._$AH.handleEvent(t)
+  }
+}
+class I {
+  constructor(t, i, s) {
+    ;(this.element = t),
+      (this.type = 6),
+      (this._$AN = void 0),
+      (this._$AM = i),
+      (this.options = s)
+  }
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AI(t) {
+    P(this, t)
+  }
+}
+const z = i$3.litHtmlPolyfillSupport
+null == z || z(C, N),
+  (null !== (t$4 = i$3.litHtmlVersions) && void 0 !== t$4
+    ? t$4
+    : (i$3.litHtmlVersions = [])
+  ).push('2.6.1')
+const Z = (t, i, s) => {
+  var e, o
+  const n =
+    null !== (e = null == s ? void 0 : s.renderBefore) && void 0 !== e ? e : i
+  let l = n._$litPart$
+  if (void 0 === l) {
+    const t =
+      null !== (o = null == s ? void 0 : s.renderBefore) && void 0 !== o
+        ? o
+        : null
+    n._$litPart$ = l = new N(
+      i.insertBefore(r$2(), t),
+      t,
+      void 0,
+      null != s ? s : {}
+    )
+  }
+  return l._$AI(t), l
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var l$1, o$6
+class s$4 extends d$1 {
+  constructor() {
+    super(...arguments),
+      (this.renderOptions = { host: this }),
+      (this._$Do = void 0)
+  }
+  createRenderRoot() {
+    var t, e
+    const i = super.createRenderRoot()
+    return (
+      (null !== (t = (e = this.renderOptions).renderBefore) && void 0 !== t) ||
+        (e.renderBefore = i.firstChild),
+      i
+    )
+  }
+  update(t) {
+    const i = this.render()
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected),
+      super.update(t),
+      (this._$Do = Z(i, this.renderRoot, this.renderOptions))
+  }
+  connectedCallback() {
+    var t
+    super.connectedCallback(),
+      null === (t = this._$Do) || void 0 === t || t.setConnected(!0)
+  }
+  disconnectedCallback() {
+    var t
+    super.disconnectedCallback(),
+      null === (t = this._$Do) || void 0 === t || t.setConnected(!1)
+  }
+  render() {
+    return x
+  }
+}
+;(s$4.finalized = !0),
+  (s$4._$litElement$ = !0),
+  null === (l$1 = globalThis.litElementHydrateSupport) ||
+    void 0 === l$1 ||
+    l$1.call(globalThis, { LitElement: s$4 })
+const n$5 = globalThis.litElementPolyfillSupport
+null == n$5 || n$5({ LitElement: s$4 })
+;(null !== (o$6 = globalThis.litElementVersions) && void 0 !== o$6
+  ? o$6
+  : (globalThis.litElementVersions = [])
+).push('3.2.2')
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$7 = e => n =>
+  'function' == typeof n
+    ? ((e, n) => (customElements.define(e, n), n))(e, n)
+    : ((e, n) => {
+        const { kind: t, elements: s } = n
+        return {
+          kind: t,
+          elements: s,
+          finisher(n) {
+            customElements.define(e, n)
+          },
+        }
+      })(e, n)
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i$2 = (i, e) =>
+  'method' === e.kind && e.descriptor && !('value' in e.descriptor)
+    ? {
+        ...e,
+        finisher(n) {
+          n.createProperty(e.key, i)
+        },
       }
-      // Add a width property to the styles if there is block height correction
-      if (inlineOutOfBoundsCorrection) {
-        this.surfaceStylesInternal['width'] = `${surfaceRect.width -
-          inlineOutOfBoundsCorrection}px`
+    : {
+        kind: 'field',
+        key: Symbol(),
+        placement: 'own',
+        descriptor: {},
+        originalKey: e.key,
+        initializer() {
+          'function' == typeof e.initializer &&
+            (this[e.key] = e.initializer.call(this))
+        },
+        finisher(n) {
+          n.createProperty(e.key, i)
+        },
       }
-    }
-    this.host.requestUpdate()
-  }
-  /**
-   * Calculates the css property, the inset, and the out of bounds correction
-   * for the surface in the block direction.
-   */
-  calculateBlock(config) {
-    const {
-      surfaceRect,
-      anchorRect,
-      anchorBlock,
-      surfaceBlock,
-      yOffset,
-      positioning,
-      windowInnerHeight,
-    } = config
-    // We use number booleans to multiply values rather than `if` / ternary
-    // statements because it _heavily_ cuts down on nesting and readability
-    const relativeToWindow = positioning === 'fixed' ? 1 : 0
-    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0
-    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0
-    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0
-    // Whether or not to apply the height of the anchor
-    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset
-    // The absolute block position of the anchor relative to window
-    const blockTopLayerOffset =
-      isSurfaceBlockStart * anchorRect.top +
-      isSurfaceBlockEnd * (windowInnerHeight - anchorRect.bottom)
-    // If the surface's block would be out of bounds of the window, move it back
-    // in
-    const blockOutOfBoundsCorrection = Math.abs(
-      Math.min(
-        0,
-        windowInnerHeight -
-          blockTopLayerOffset -
-          blockAnchorOffset -
-          surfaceRect.height
-      )
+function e$6(e) {
+  return (n, t) =>
+    void 0 !== t
+      ? ((i, e, n) => {
+          e.constructor.createProperty(n, i)
+        })(e, n, t)
+      : i$2(e, n)
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function t$3(t) {
+  return e$6({ ...t, state: !0 })
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$5 = ({ finisher: e, descriptor: t }) => (o, n) => {
+  var r
+  if (void 0 === n) {
+    const n = null !== (r = o.originalKey) && void 0 !== r ? r : o.key,
+      i =
+        null != t
+          ? {
+              kind: 'method',
+              placement: 'prototype',
+              key: n,
+              descriptor: t(o.key),
+            }
+          : { ...o, key: n }
+    return (
+      null != e &&
+        (i.finisher = function(t) {
+          e(t, n)
+        }),
+      i
     )
-    // The block logical value of the surface
-    const blockInset =
-      relativeToWindow * blockTopLayerOffset + blockAnchorOffset
-    const surfaceBlockProperty =
-      surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end'
-    return { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty }
   }
-  /**
-   * Calculates the css property, the inset, and the out of bounds correction
-   * for the surface in the inline direction.
-   */
-  calculateInline(config) {
-    const {
-      isLTR: isLTRBool,
-      surfaceInline,
-      anchorInline,
-      anchorRect,
-      surfaceRect,
-      xOffset,
-      positioning,
-      windowInnerWidth,
-    } = config
-    // We use number booleans to multiply values rather than `if` / ternary
-    // statements because it _heavily_ cuts down on nesting and readability
-    const relativeToWindow = positioning === 'fixed' ? 1 : 0
-    const isLTR = isLTRBool ? 1 : 0
-    const isRTL = isLTRBool ? 0 : 1
-    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0
-    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0
-    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0
-    // Whether or not to apply the width of the anchor
-    const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset
-    // The inline position of the anchor relative to window in LTR
-    const inlineTopLayerOffsetLTR =
-      isSurfaceInlineStart * anchorRect.left +
-      isSurfaceInlineEnd * (windowInnerWidth - anchorRect.right)
-    // The inline position of the anchor relative to window in RTL
-    const inlineTopLayerOffsetRTL =
-      isSurfaceInlineStart * (windowInnerWidth - anchorRect.right) +
-      isSurfaceInlineEnd * anchorRect.left
-    // The inline position of the anchor relative to window
-    const inlineTopLayerOffset =
-      isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL
-    // If the surface's inline would be out of bounds of the window, move it
-    // back in
-    const inlineOutOfBoundsCorrection = Math.abs(
-      Math.min(
-        0,
-        windowInnerWidth -
-          inlineTopLayerOffset -
-          inlineAnchorOffset -
-          surfaceRect.width
+  {
+    const r = o.constructor
+    void 0 !== t && Object.defineProperty(o, n, t(n)), null == e || e(r, n)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ var n$4
+null !=
+(null === (n$4 = window.HTMLSlotElement) || void 0 === n$4
+  ? void 0
+  : n$4.prototype.assignedElements)
+  ? (o, n) => o.assignedElements(n)
+  : (o, n) => o.assignedNodes(n).filter(o => o.nodeType === Node.ELEMENT_NODE)
+
+var selectState = {}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class s$3 extends Event {
+  constructor(s, t, e) {
+    super('context-request', { bubbles: !0, composed: !0 }),
+      (this.context = s),
+      (this.callback = t),
+      (this.subscribe = e)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function n$3(n) {
+  return n
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ class s$2 {
+  constructor(t, s, i, h = !1) {
+    ;(this.host = t),
+      (this.context = s),
+      (this.callback = i),
+      (this.subscribe = h),
+      (this.provided = !1),
+      (this.value = void 0),
+      this.host.addController(this)
+  }
+  hostConnected() {
+    this.dispatchRequest()
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), (this.unsubscribe = void 0))
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(
+      new s$3(
+        this.context,
+        (t, s) => {
+          this.unsubscribe &&
+            (this.unsubscribe !== s &&
+              ((this.provided = !1), this.unsubscribe()),
+            this.subscribe || this.unsubscribe()),
+            (this.value = t),
+            this.host.requestUpdate(),
+            (this.provided && !this.subscribe) ||
+              ((this.provided = !0), this.callback && this.callback(t, s)),
+            (this.unsubscribe = s)
+        },
+        this.subscribe
       )
     )
-    // The inline logical value of the surface
-    const inlineInset =
-      relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset
-    const surfaceInlineProperty =
-      surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end'
-    return {
-      inlineInset,
-      inlineOutOfBoundsCorrection,
-      surfaceInlineProperty,
-    }
   }
-  hostUpdate() {
-    this.onUpdate()
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class t$2 {
+  constructor(t) {
+    ;(this.callbacks = new Map()),
+      (this.updateObservers = () => {
+        for (const [t, s] of this.callbacks) t(this.t, s)
+      }),
+      void 0 !== t && (this.value = t)
   }
-  hostUpdated() {
-    this.onUpdate()
+  get value() {
+    return this.t
   }
-  /**
-   * Checks whether the properties passed into the controller have changed since
-   * the last positioning. If so, it will reposition if the surface is open or
-   * close it if the surface should close.
-   */
-  async onUpdate() {
-    const props = this.getProperties()
-    let hasChanged = false
-    for (const [key, value] of Object.entries(props)) {
-      // tslint:disable-next-line
-      hasChanged = hasChanged || value !== this.lastValues[key]
-      if (hasChanged) break
-    }
-    const openChanged = this.lastValues.isOpen !== props.isOpen
-    const hasAnchor = !!props.anchorEl
-    const hasSurface = !!props.surfaceEl
-    if (hasChanged && hasAnchor && hasSurface) {
-      // Only update isOpen, because if it's closed, we do not want to waste
-      // time on a useless reposition calculation. So save the other "dirty"
-      // values until next time it opens.
-      this.lastValues.isOpen = props.isOpen
-      if (props.isOpen) {
-        // We are going to do a reposition, so save the prop values for future
-        // dirty checking.
-        this.lastValues = props
-        await this.position()
-        props.onOpen()
-      } else if (openChanged) {
-        await props.beforeClose()
-        this.close()
-        props.onClose()
-      }
-    }
+  set value(t) {
+    this.setValue(t)
+  }
+  setValue(t, s = !1) {
+    const i = s || !Object.is(t, this.t)
+    ;(this.t = t), i && this.updateObservers()
+  }
+  addCallback(t, s) {
+    s &&
+      (this.callbacks.has(t) ||
+        this.callbacks.set(t, () => {
+          this.callbacks.delete(t)
+        })),
+      t(this.value)
+  }
+  clearCallbacks() {
+    this.callbacks.clear()
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ class s$1 extends Event {
+  constructor(t) {
+    super('context-provider', { bubbles: !0, composed: !0 }), (this.context = t)
+  }
+}
+class e$5 extends t$2 {
+  constructor(t, s, e) {
+    super(e),
+      (this.host = t),
+      (this.context = s),
+      (this.onContextRequest = t => {
+        t.context === this.context &&
+          t.composedPath()[0] !== this.host &&
+          (t.stopPropagation(), this.addCallback(t.callback, t.subscribe))
+      }),
+      this.attachListeners(),
+      this.host.addController(this)
+  }
+  attachListeners() {
+    this.host.addEventListener('context-request', this.onContextRequest)
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new s$1(this.context))
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ class e$4 {
+  constructor() {
+    ;(this.pendingContextRequests = new Map()),
+      (this.onContextProvider = e => {
+        const s = this.pendingContextRequests.get(e.context)
+        s &&
+          (this.pendingContextRequests.delete(e.context),
+          s.forEach(s => {
+            const c = s.element,
+              i = s.callback
+            c && c.dispatchEvent(new s$3(e.context, i, !0))
+          }))
+      }),
+      (this.onContextRequest = t => {
+        if (!t.subscribe) return
+        const e = { element: t.target, callback: t.callback }
+        let s = this.pendingContextRequests.get(t.context)
+        s || ((s = new Set()), this.pendingContextRequests.set(t.context, s)),
+          s.add(e)
+      })
   }
-  /**
-   * Hides the surface.
-   */
-  close() {
-    this.surfaceStylesInternal = {
-      display: 'none',
-    }
-    this.host.requestUpdate()
+  attach(t) {
+    t.addEventListener('context-request', this.onContextRequest),
+      t.addEventListener('context-provider', this.onContextProvider)
+  }
+  detach(t) {
+    t.removeEventListener('context-request', this.onContextRequest),
+      t.removeEventListener('context-provider', this.onContextProvider)
   }
 }
 
 /**
  * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function o$4({ context: o }) {
+  return o$5({
+    finisher: (t, n) => {
+      const r = new WeakMap()
+      t.addInitializer(t => {
+        r.set(t, new e$5(t, o))
+      })
+      const i = Object.getOwnPropertyDescriptor(t.prototype, n),
+        c = null == i ? void 0 : i.set,
+        s = {
+          ...i,
+          set: function(t) {
+            var e
+            null === (e = r.get(this)) || void 0 === e || e.setValue(t),
+              c && c.call(this, t)
+          },
+        }
+      Object.defineProperty(t.prototype, n, s)
+    },
+  })
+}
+
 /**
- * Indicies to access the TypeaheadRecord tuple type.
- */
-const TYPEAHEAD_RECORD = {
-  INDEX: 0,
-  ITEM: 1,
-  TEXT: 2,
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ function t$1({ context: t, subscribe: o }) {
+  return o$5({
+    finisher: (e, n) => {
+      e.addInitializer(e => {
+        new s$2(
+          e,
+          t,
+          r => {
+            e[n] = r
+          },
+          o
+        )
+      })
+    },
+  })
 }
+
 /**
- * This controller listens to `keydown` events and searches the header text of
- * an array of `MenuItem`s with the corresponding entered keys within the buffer
- * time and activates the item.
- *
- * @example
- * ```ts
- * const typeaheadController = new TypeaheadController(() => ({
- *   typeaheadBufferTime: 50,
- *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
- * }));
- * html`
- *   <div
- *       @keydown=${typeaheadController.onKeydown}
- *       tabindex="0"
- *       class="activeItemText">
- *     <!-- focusable element that will receive keydown events -->
- *     Apple
- *   </div>
- *   <div>
- *     <md-menu-item active header="Apple"></md-menu-item>
- *     <md-menu-item header="Apricot"></md-menu-item>
- *     <md-menu-item header="Banana"></md-menu-item>
- *     <md-menu-item header="Olive"></md-menu-item>
- *     <md-menu-item header="Orange"></md-menu-item>
- *   </div>
- * `;
- * ```
- */
-class TypeaheadController {
-  /**
-   * @param getProperties A function that returns the options of the typeahead
-   * controller:
-   *
-   * {
-   *   getItems: A function that returns an array of menu items to be searched.
-   *   typeaheadBufferTime: The maximum time between each keystroke to keep the
-   *       current type buffer alive.
-   * }
-   */
-  constructor(getProperties) {
-    this.getProperties = getProperties
-    /**
-     * Array of tuples that helps with indexing.
-     */
-    this.typeaheadRecords = []
-    /**
-     * Currently-typed text since last buffer timeout
-     */
-    this.typaheadBuffer = ''
-    /**
-     * The timeout id from the current buffer's setTimeout
-     */
-    this.cancelTypeaheadTimeout = 0
-    /**
-     * If we are currently "typing"
-     */
-    this.isTypingAhead = false
-    /**
-     * The record of the last active item.
-     */
-    this.lastActiveRecord = null
-    /**
-     * Apply this listener to the element that will receive `keydown` events that
-     * should trigger this controller.
-     *
-     * @param event The native browser `KeyboardEvent` from the `keydown` event.
-     */
-    this.onKeydown = event => {
-      if (this.isTypingAhead) {
-        this.typeahead(event)
-      } else {
-        this.beginTypeahead(event)
-      }
-    }
-    /**
-     * Ends the current typeahead and clears the buffer.
-     */
-    this.endTypeahead = () => {
-      this.isTypingAhead = false
-      this.typaheadBuffer = ''
-      this.typeaheadRecords = []
-    }
-  }
-  get items() {
-    return this.getProperties().getItems()
-  }
-  get active() {
-    return this.getProperties().active
-  }
-  /**
-   * Sets up typingahead
-   */
-  beginTypeahead(event) {
-    if (!this.active) {
-      return
-    }
-    // We don't want to typeahead if the _beginning_ of the typeahead is a menu
-    // navigation, or a selection. We will handle "Space" only if it's in the
-    // middle of a typeahead
-    if (
-      event.code === 'Space' ||
-      event.code === 'Enter' ||
-      event.code.startsWith('Arrow') ||
-      event.code === 'Escape'
-    ) {
-      return
-    }
-    this.isTypingAhead = true
-    // Generates the record array data structure which is the index, the element
-    // and a normalized header.
-    this.typeaheadRecords = this.items.map((el, index) => [
-      index,
-      el,
-      el.typeaheadText.trim().toLowerCase(),
-    ])
-    this.lastActiveRecord =
-      this.typeaheadRecords.find(
-        record => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0
-      ) ?? null
-    if (this.lastActiveRecord) {
-      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
-    }
-    this.typeahead(event)
-  }
-  /**
-   * Performs the typeahead. Based on the normalized items and the current text
-   * buffer, finds the _next_ item with matching text and activates it.
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive, Orange, Cucumber
-   * buffer: ''
-   * user types: o
-   *
-   * activates Olive
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive (active), Orange, Cucumber
-   * buffer: 'o'
-   * user types: l
-   *
-   * activates Olive
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive (active), Orange, Cucumber
-   * buffer: ''
-   * user types: o
-   *
-   * activates Orange
-   *
-   * @example
-   *
-   * items: Apple, Banana, Olive, Orange (active), Cucumber
-   * buffer: ''
-   * user types: o
-   *
-   * activates Olive
-   */
-  typeahead(event) {
-    if (event.defaultPrevented) return
-    clearTimeout(this.cancelTypeaheadTimeout)
-    // Stop typingahead if one of the navigation or selection keys (except for
-    // Space) are pressed
-    if (
-      event.code === 'Enter' ||
-      event.code.startsWith('Arrow') ||
-      event.code === 'Escape'
-    ) {
-      this.endTypeahead()
-      if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
-      }
-      return
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e$3 = o$4,
+  r$1 = t$1
+
+var context = /*#__PURE__*/ Object.freeze({
+  __proto__: null,
+  contextProvided: r$1,
+  contextProvider: e$3,
+  ContextEvent: s$3,
+  createContext: n$3,
+  ContextConsumer: s$2,
+  ContextProvider: e$5,
+  ContextRoot: e$4,
+  provide: o$4,
+  consume: t$1,
+})
+
+var require$$0 = /*@__PURE__*/ getAugmentedNamespace(context)
+
+var selectController = {}
+
+;(function(exports) {
+  Object.defineProperty(exports, '__esModule', { value: true })
+  exports.connectSelector = exports.SelectorController = exports.getSnapshot = exports.getServiceSnapshot = exports.isActorWithState = exports.isService = exports.defaultCompare = void 0
+  const defaultCompare = (a, b) => a === b
+  exports.defaultCompare = defaultCompare
+  function isService(actor) {
+    return 'state' in actor && 'machine' in actor
+  }
+  exports.isService = isService
+  function isActorWithState(actorRef) {
+    return 'state' in actorRef
+  }
+  exports.isActorWithState = isActorWithState
+  function getServiceSnapshot(service) {
+    return service.status !== 0
+      ? service.getSnapshot()
+      : service.machine.initialState
+  }
+  exports.getServiceSnapshot = getServiceSnapshot
+  function getSnapshot(actorRef) {
+    if (isService(actorRef)) {
+      return getServiceSnapshot(actorRef)
     }
-    // If Space is pressed, prevent it from selecting and closing the menu
-    if (event.code === 'Space') {
-      event.preventDefault()
+    return isActorWithState(actorRef) ? actorRef.state : undefined
+  }
+  exports.getSnapshot = getSnapshot
+  class SelectorController {
+    host
+    subscription
+    selected
+    constructor(host, actorRef, selector, compare = exports.defaultCompare) {
+      this.host = host
+      this.host.addController(this)
+      this.selected = selector(getSnapshot(actorRef))
+      this.subscription = actorRef.subscribe(emitted => {
+        const nextSelected = selector(emitted)
+        if (!compare(this.selected, nextSelected)) {
+          this.selected = nextSelected
+          this.host.requestUpdate()
+        }
+      })
     }
-    // Start up a new keystroke buffer timeout
-    this.cancelTypeaheadTimeout = setTimeout(
-      this.endTypeahead,
-      this.getProperties().typeaheadBufferTime
+    get value() {
+      return this.selected
+    }
+    hostDisconnected() {
+      this.subscription.unsubscribe()
+    }
+  }
+  exports.SelectorController = SelectorController
+  function connectSelector(
+    host,
+    actorRef,
+    selector,
+    compare = exports.defaultCompare
+  ) {
+    return new SelectorController(host, actorRef, selector, compare)
+  }
+  exports.connectSelector = connectSelector
+})(selectController)
+
+Object.defineProperty(selectState, '__esModule', { value: true })
+selectState.compareObjects = compareArrays_1 = selectState.compareArrays = connectState_1 = selectState.connectState = selectState.SelectState = void 0
+const context_1 = require$$0
+const select_controller_js_1 = selectController
+class SelectState {
+  serviceContext
+  selectorController
+  host
+  selector
+  compare // if current value same as old value, return true
+  constructor(
+    context,
+    host,
+    selector,
+    compare = select_controller_js_1.defaultCompare
+  ) {
+    ;(this.host = host).addController(this)
+    this.serviceContext = new context_1.ContextConsumer(
+      this.host,
+      context,
+      undefined,
+      true
     )
-    this.typaheadBuffer += event.key.toLowerCase()
-    const lastActiveIndex = this.lastActiveRecord
-      ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]
-      : -1
-    const numRecords = this.typeaheadRecords.length
-    /**
-     * Sorting function that will resort the items starting with the given index
-     *
-     * @example
-     *
-     * this.typeaheadRecords =
-     * 0: [0, <reference>, 'apple']
-     * 1: [1, <reference>, 'apricot']
-     * 2: [2, <reference>, 'banana']
-     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex
-     * 4: [4, <reference>, 'orange']
-     * 5: [5, <reference>, 'strawberry']
-     *
-     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)
-     *                                       - rebaseIndexOnActive(b)) ===
-     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex
-     * 1: [4, <reference>, 'orange']
-     * 2: [5, <reference>, 'strawberry']
-     * 3: [0, <reference>, 'apple']
-     * 4: [1, <reference>, 'apricot']
-     * 5: [2, <reference>, 'banana']
-     */
-    const rebaseIndexOnActive = record => {
-      return (
-        (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
-        numRecords
-      )
+    this.selector = selector
+    this.compare = compare
+  }
+  hostConnected() {
+    // has hostConnected already been called?
+    if (this.selectorController) {
+      this.hostDisconnected()
     }
-    // records filtered and sorted / rebased around the last active index
-    const matchingRecords = this.typeaheadRecords
-      .filter(
-        record =>
-          !record[TYPEAHEAD_RECORD.ITEM].disabled &&
-          record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer)
-      )
-      .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b))
-    // Just leave if there's nothing that matches. Native select will just
-    // choose the first thing that starts with the next letter in the alphabet
-    // but that's out of scope and hard to localize
-    if (matchingRecords.length === 0) {
-      clearTimeout(this.cancelTypeaheadTimeout)
-      if (this.lastActiveRecord) {
-        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
-      }
-      this.endTypeahead()
-      return
+    this.serviceContext.hostConnected()
+    this.selectorController = new select_controller_js_1.SelectorController(
+      this.host,
+      this.serviceContext.value.service,
+      this.selector,
+      this.compare
+    )
+  }
+  hostDisconnected() {
+    this.serviceContext?.hostDisconnected()
+    this.selectorController?.hostDisconnected()
+  }
+  get value() {
+    return this.selectorController?.value
+  }
+}
+selectState.SelectState = SelectState
+// Factory function for SelectState
+function connectState(
+  context,
+  host,
+  selector,
+  compare = select_controller_js_1.defaultCompare
+) {
+  return new SelectState(context, host, selector, compare)
+}
+var connectState_1 = (selectState.connectState = connectState)
+const compareArrays = (a, b) =>
+  a.length === b.length && a.every((value, idx) => value === b[idx])
+var compareArrays_1 = (selectState.compareArrays = compareArrays)
+const compareObjects = (obj1, obj2) =>
+  Object.keys(obj1).length === Object.keys(obj2).length &&
+  Object.keys(obj1).every(key => {
+    return (
+      Object.prototype.hasOwnProperty.call(obj2, key) && obj1[key] === obj2[key]
+    )
+  })
+selectState.compareObjects = compareObjects
+
+// "Inject" XState context into components with DOM events
+const viewerContext = n$3('viewer-context')
+let appContext
+const setContext = context => {
+  appContext = context
+}
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e$2 = o => void 0 === o.strings
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = {
+    ATTRIBUTE: 1,
+    CHILD: 2,
+    PROPERTY: 3,
+    BOOLEAN_ATTRIBUTE: 4,
+    EVENT: 5,
+    ELEMENT: 6,
+  },
+  e$1 = t => (...e) => ({ _$litDirective$: t, values: e })
+class i$1 {
+  constructor(t) {}
+  get _$AU() {
+    return this._$AM._$AU
+  }
+  _$AT(t, e, i) {
+    ;(this._$Ct = t), (this._$AM = e), (this._$Ci = i)
+  }
+  _$AS(t, e) {
+    return this.update(t, e)
+  }
+  update(t, e) {
+    return this.render(...e)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const s = (i, t) => {
+    var e, o
+    const r = i._$AN
+    if (void 0 === r) return !1
+    for (const i of r)
+      null === (o = (e = i)._$AO) || void 0 === o || o.call(e, t, !1), s(i, t)
+    return !0
+  },
+  o$3 = i => {
+    let t, e
+    do {
+      if (void 0 === (t = i._$AM)) break
+      ;(e = t._$AN), e.delete(i), (i = t)
+    } while (0 === (null == e ? void 0 : e.size))
+  },
+  r = i => {
+    for (let t; (t = i._$AM); i = t) {
+      let e = t._$AN
+      if (void 0 === e) t._$AN = e = new Set()
+      else if (e.has(i)) break
+      e.add(i), l(t)
     }
-    const isNewQuery = this.typaheadBuffer.length === 1
-    let nextRecord
-    // This is likely the case that someone is trying to "tab" through different
-    // entries that start with the same letter
-    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {
-      nextRecord = matchingRecords[1] ?? matchingRecords[0]
-    } else {
-      nextRecord = matchingRecords[0]
+  }
+function n$2(i) {
+  void 0 !== this._$AN ? (o$3(this), (this._$AM = i), r(this)) : (this._$AM = i)
+}
+function h$1(i, t = !1, e = 0) {
+  const r = this._$AH,
+    n = this._$AN
+  if (void 0 !== n && 0 !== n.size)
+    if (t)
+      if (Array.isArray(r))
+        for (let i = e; i < r.length; i++) s(r[i], !1), o$3(r[i])
+      else null != r && (s(r, !1), o$3(r))
+    else s(this, i)
+}
+const l = i => {
+  var t$1, s, o, r
+  i.type == t.CHILD &&
+    ((null !== (t$1 = (o = i)._$AP) && void 0 !== t$1) || (o._$AP = h$1),
+    (null !== (s = (r = i)._$AQ) && void 0 !== s) || (r._$AQ = n$2))
+}
+class c extends i$1 {
+  constructor() {
+    super(...arguments), (this._$AN = void 0)
+  }
+  _$AT(i, t, e) {
+    super._$AT(i, t, e), r(this), (this.isConnected = i._$AU)
+  }
+  _$AO(i, t = !0) {
+    var e, r
+    i !== this.isConnected &&
+      ((this.isConnected = i),
+      i
+        ? null === (e = this.reconnected) || void 0 === e || e.call(this)
+        : null === (r = this.disconnected) || void 0 === r || r.call(this)),
+      t && (s(this, i), o$3(this))
+  }
+  setValue(t) {
+    if (e$2(this._$Ct)) this._$Ct._$AI(t, this)
+    else {
+      const i = [...this._$Ct._$AH]
+      ;(i[this._$Ci] = t), this._$Ct._$AI(i, this, 0)
     }
-    if (this.lastActiveRecord) {
-      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
+  }
+  disconnected() {}
+  reconnected() {}
+}
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const e = () => new o$2()
+class o$2 {}
+const h = new WeakMap(),
+  n$1 = e$1(
+    class extends c {
+      render(t) {
+        return b
+      }
+      update(t, [s]) {
+        var e
+        const o = s !== this.Y
+        return (
+          o && void 0 !== this.Y && this.rt(void 0),
+          (o || this.lt !== this.ct) &&
+            ((this.Y = s),
+            (this.dt =
+              null === (e = t.options) || void 0 === e ? void 0 : e.host),
+            this.rt((this.ct = t.element))),
+          b
+        )
+      }
+      rt(i) {
+        var t
+        if ('function' == typeof this.Y) {
+          const s = null !== (t = this.dt) && void 0 !== t ? t : globalThis
+          let e = h.get(s)
+          void 0 === e && ((e = new WeakMap()), h.set(s, e)),
+            void 0 !== e.get(this.Y) && this.Y.call(this.dt, void 0),
+            e.set(this.Y, i),
+            void 0 !== i && this.Y.call(this.dt, i)
+        } else this.Y.value = i
+      }
+      get lt() {
+        var i, t, s
+        return 'function' == typeof this.Y
+          ? null ===
+              (t = h.get(
+                null !== (i = this.dt) && void 0 !== i ? i : globalThis
+              )) || void 0 === t
+            ? void 0
+            : t.get(this.Y)
+          : null === (s = this.Y) || void 0 === s
+          ? void 0
+          : s.value
+      }
+      disconnected() {
+        this.lt === this.ct && this.rt(void 0)
+      }
+      reconnected() {
+        this.rt(this.ct)
+      }
     }
-    this.lastActiveRecord = nextRecord
-    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0
-    nextRecord[TYPEAHEAD_RECORD.ITEM].focus()
-    return
+  )
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function* o$1(o, f) {
+  if (void 0 !== o) {
+    let i = 0
+    for (const t of o) yield f(t, i++)
+  }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A component for elevation.
+ */
+class Elevation extends s$9 {
+  connectedCallback() {
+    super.connectedCallback()
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
+  }
+  render() {
+    return x$1`<span class="shadow"></span>`
   }
 }
 
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const styles$8 = i$8`:host{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}/*# sourceMappingURL=elevation-styles.css.map */
+`
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The `<md-elevation>` custom element with default styles.
+ *
+ * Elevation is the relative distance between two surfaces along the z-axis.
+ */
+let MdElevation = class MdElevation extends Elevation {}
+MdElevation.styles = [styles$8]
+MdElevation = __decorate([t$9('md-elevation')], MdElevation)
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */ const n = 'important',
+  i = ' !' + n,
+  o = e$d(
+    class extends i$5 {
+      constructor(t) {
+        if (
+          (super(t),
+          t.type !== t$6.ATTRIBUTE ||
+            'style' !== t.name ||
+            t.strings?.length > 2)
+        )
+          throw Error(
+            'The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.'
+          )
+      }
+      render(t) {
+        return Object.keys(t).reduce((e, r) => {
+          const s = t[r]
+          return null == s
+            ? e
+            : e +
+                `${(r = r.includes('-')
+                  ? r
+                  : r
+                      .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')
+                      .toLowerCase())}:${s};`
+        }, '')
+      }
+      update(e, [r]) {
+        const { style: s } = e.element
+        if (void 0 === this.ut)
+          return (this.ut = new Set(Object.keys(r))), this.render(r)
+        for (const t of this.ut)
+          null == r[t] &&
+            (this.ut.delete(t),
+            t.includes('-') ? s.removeProperty(t) : (s[t] = null))
+        for (const t in r) {
+          const e = r[t]
+          if (null != e) {
+            this.ut.add(t)
+            const r = 'string' == typeof e && e.endsWith(i)
+            t.includes('-') || r
+              ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n : '')
+              : (s[t] = e)
+          }
+        }
+        return w
+      }
+    }
+  )
+
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * The default value for the typeahead buffer time in Milliseconds.
+ * Activates the first non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     first item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
  */
-const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200
-const submenuNavKeys = new Set([
-  NavigableKeys.ArrowDown,
-  NavigableKeys.ArrowUp,
-  NavigableKeys.Home,
-  NavigableKeys.End,
-])
-const menuNavKeys = new Set([
-  NavigableKeys.ArrowLeft,
-  NavigableKeys.ArrowRight,
-  ...submenuNavKeys,
-])
+function activateFirstItem(items, isActivatable = isItemNotDisabled) {
+  // NOTE: These selector functions are static and not on the instance such
+  // that multiple operations can be chained and we do not have to re-query
+  // the DOM
+  const firstItem = getFirstActivatableItem(items, isActivatable)
+  if (firstItem) {
+    firstItem.tabIndex = 0
+    firstItem.focus()
+  }
+  return firstItem
+}
 /**
- * Gets the currently focused element on the page.
+ * Activates the last non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items from which to activate the
+ *     last item.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @nocollapse
+ */
+function activateLastItem(items, isActivatable = isItemNotDisabled) {
+  const lastItem = getLastActivatableItem(items, isActivatable)
+  if (lastItem) {
+    lastItem.tabIndex = 0
+    lastItem.focus()
+  }
+  return lastItem
+}
+/**
+ * Retrieves the first activated item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return A record of the first activated item including the item and the
+ *     index of the item or `null` if none are activated.
+ * @nocollapse
+ */
+function getActiveItem(items, isActivatable = isItemNotDisabled) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.tabIndex === 0 && isActivatable(item)) {
+      return {
+        item,
+        index: i,
+      }
+    }
+  }
+  return null
+}
+/**
+ * Retrieves the first non-disabled item of a given array of items. This
+ * the first item that is not disabled.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The first activatable item or `null` if none are activatable.
+ * @nocollapse
+ */
+function getFirstActivatableItem(items, isActivatable = isItemNotDisabled) {
+  for (const item of items) {
+    if (isActivatable(item)) {
+      return item
+    }
+  }
+  return null
+}
+/**
+ * Retrieves the last non-disabled item of a given array of items.
  *
- * @param activeDoc The document or shadowroot from which to start the search.
- *    Defaults to `window.document`
- * @return Returns the currently deeply focused element or `null` if none.
+ * @param items {Array<ListItem>} The items to search.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The last activatable item or `null` if none are activatable.
+ * @nocollapse
  */
-function getFocusedElement(activeDoc = document) {
-  let activeEl = activeDoc.activeElement
-  // Check for activeElement in the case that an element with a shadow root host
-  // is currently focused.
-  while (activeEl && activeEl?.shadowRoot?.activeElement) {
-    activeEl = activeEl.shadowRoot.activeElement
+function getLastActivatableItem(items, isActivatable = isItemNotDisabled) {
+  for (let i = items.length - 1; i >= 0; i--) {
+    const item = items[i]
+    if (isActivatable(item)) {
+      return item
+    }
   }
-  return activeEl
+  return null
 }
 /**
- * @fires opening Fired before the opening animation begins
- * @fires opened Fired once the menu is open, after any animations
- * @fires closing Fired before the closing animation begins
- * @fires closed Fired once the menu is closed, after any animations
+ * Retrieves the next non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The next activatable item or `null` if none are activatable.
  */
-class Menu extends s$1 {
-  /**
-   * Whether the menu is animating upwards or downwards when opening. This is
-   * helpful for calculating some animation calculations.
-   */
-  get openDirection() {
-    const menuCornerBlock = this.menuCorner.split('-')[0]
-    return menuCornerBlock === 'start' ? 'DOWN' : 'UP'
-  }
-  /**
-   * The element which the menu should align to. If `anchor` is set to a
-   * non-empty idref string, then `anchorEl` will resolve to the element with
-   * the given id in the same root node. Otherwise, `null`.
-   */
-  get anchorElement() {
-    if (this.anchor) {
-      return this.getRootNode().querySelector(`#${this.anchor}`)
+function getNextItem(items, index, isActivatable = isItemNotDisabled) {
+  for (let i = 1; i < items.length; i++) {
+    const nextIndex = (i + index) % items.length
+    const item = items[nextIndex]
+    if (isActivatable(item)) {
+      return item
     }
-    return this.currentAnchorElement
   }
-  set anchorElement(element) {
-    this.currentAnchorElement = element
-    this.requestUpdate('anchorElement')
+  return items[index] ? items[index] : null
+}
+/**
+ * Retrieves the previous non-disabled item of a given array of items.
+ *
+ * @param items {Array<ListItem>} The items to search.
+ * @param index {{index: number}} The index to search from.
+ * @param isActivatable Function to determine if an item can be  activated.
+ *     Defaults to non-disabled items.
+ * @return The previous activatable item or `null` if none are activatable.
+ */
+function getPrevItem(items, index, isActivatable = isItemNotDisabled) {
+  for (let i = 1; i < items.length; i++) {
+    const prevIndex = (index - i + items.length) % items.length
+    const item = items[prevIndex]
+    if (isActivatable(item)) {
+      return item
+    }
   }
-  constructor() {
-    super()
-    /**
-     * The ID of the element in the same root node in which the menu should align
-     * to. Overrides setting `anchorElement = elementReference`.
-     *
-     * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
-     * to an HTMLElement in order for menu to open.
-     */
-    this.anchor = ''
-    /**
-     * Whether the positioning algorithim should calculate relative to the parent
-     * of the anchor element (absolute) or relative to the window (fixed).
-     *
-     * Examples for `position = 'fixed'`:
-     *
-     * - If there is no `position:relative` in the given parent tree and the
-     *   surface is `position:absolute`
-     * - If the surface is `position:fixed`
-     * - If the surface is in the "top layer"
-     * - The anchor and the surface do not share a common `position:relative`
-     *   ancestor
-     *
-     * When using positioning = fixed, in most cases, the menu should position
-     * itself above most other `position:absolute` or `position:fixed` elements
-     * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
-     *
-     * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
-     * the window instead.
-     */
-    this.positioning = 'absolute'
-    /**
-     * Skips the opening and closing animations.
-     */
-    this.quick = false
-    /**
-     * Displays overflow content like a submenu.
-     *
-     * __NOTE__: This may cause adverse effects if you set
-     * `md-menu {max-height:...}`
-     * and have items overflowing items in the "y" direction.
-     */
-    this.hasOverflow = false
-    /**
-     * Opens the menu and makes it visible. Alternative to the `.show()` and
-     * `.close()` methods
-     */
-    this.open = false
-    /**
-     * Offsets the menu's inline alignment from the anchor by the given number in
-     * pixels. This value is direction aware and will follow the LTR / RTL
-     * direction.
-     *
-     * e.g. LTR: positive -> right, negative -> left
-     *      RTL: positive -> left, negative -> right
-     */
-    this.xOffset = 0
-    /**
-     * Offsets the menu's block alignment from the anchor by the given number in
-     * pixels.
-     *
-     * e.g. positive -> down, negative -> up
-     */
-    this.yOffset = 0
-    /**
-     * The max time between the keystrokes of the typeahead menu behavior before
-     * it clears the typeahead buffer.
-     */
-    this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME
-    /**
-     * The corner of the anchor which to align the menu in the standard logical
-     * property style of <block>-<inline> e.g. `'end-start'`.
-     *
-     * NOTE: This value may not be respected by the menu positioning algorithm
-     * if the menu would render outisde the viewport.
-     */
-    this.anchorCorner = Corner.END_START
-    /**
-     * The corner of the menu which to align the anchor in the standard logical
-     * property style of <block>-<inline> e.g. `'start-start'`.
-     *
-     * NOTE: This value may not be respected by the menu positioning algorithm
-     * if the menu would render outisde the viewport.
-     */
-    this.menuCorner = Corner.START_START
-    /**
-     * Keeps the user clicks outside the menu.
-     *
-     * NOTE: clicking outside may still cause focusout to close the menu so see
-     * `stayOpenOnFocusout`.
-     */
-    this.stayOpenOnOutsideClick = false
-    /**
-     * Keeps the menu open when focus leaves the menu's composed subtree.
-     *
-     * NOTE: Focusout behavior will stop propagation of the focusout event. Set
-     * this property to true to opt-out of menu's focuout handling altogether.
-     */
-    this.stayOpenOnFocusout = false
-    /**
-     * After closing, does not restore focus to the last focused element before
-     * the menu was opened.
-     */
-    this.skipRestoreFocus = false
-    /**
-     * The element that should be focused by default once opened.
-     *
-     * NOTE: When setting default focus to 'LIST_ROOT', remember to change
-     * `tabindex` to `0` and change md-menu's display to something other than
-     * `display: contents` when necessary.
-     */
-    this.defaultFocus = FocusState.FIRST_ITEM
-    this.typeaheadActive = true
-    /**
-     * Whether or not the current menu is a submenu and should not handle specific
-     * navigation keys.
-     *
-     * @exports
-     */
-    this.isSubmenu = false
-    /**
-     * The event path of the last window pointerdown event.
-     */
-    this.pointerPath = []
-    this.openCloseAnimationSignal = createAnimationSignal()
-    this.listController = new ListController({
-      isItem: maybeItem => {
-        return maybeItem.hasAttribute('md-menu-item')
-      },
-      getPossibleItems: () => this.slotItems,
-      isRtl: () => getComputedStyle(this).direction === 'rtl',
-      deactivateItem: item => {
-        item.selected = false
-        item.tabIndex = -1
-      },
-      activateItem: item => {
-        item.selected = true
-        item.tabIndex = 0
-      },
-      isNavigableKey: key => {
-        if (!this.isSubmenu) {
-          return menuNavKeys.has(key)
-        }
-        const isRtl = getComputedStyle(this).direction === 'rtl'
-        // we want md-submenu to handle the submenu's left/right arrow exit
-        // key so it can close the menu instead of navigate the list.
-        // Therefore we need to include all keys but left/right arrow close
-        // key
-        const arrowOpen = isRtl
-          ? NavigableKeys.ArrowLeft
-          : NavigableKeys.ArrowRight
-        if (key === arrowOpen) {
-          return true
-        }
-        return submenuNavKeys.has(key)
-      },
-    })
-    /**
-     * The element that was focused before the menu opened.
-     */
-    this.lastFocusedElement = null
-    /**
-     * Handles typeahead navigation through the menu.
-     */
-    this.typeaheadController = new TypeaheadController(() => {
-      return {
-        getItems: () => this.items,
-        typeaheadBufferTime: this.typeaheadDelay,
-        active: this.typeaheadActive,
-      }
-    })
-    this.currentAnchorElement = null
-    this.internals = polyfillElementInternalsAria(
-      this,
-      this /* needed for closure */.attachInternals()
-    )
+  return items[index] ? items[index] : null
+}
+/**
+ * Activates the next item and focuses it. If nothing is currently activated,
+ * activates the first item.
+ */
+function activateNextItem(
+  items,
+  activeItemRecord,
+  isActivatable = isItemNotDisabled
+) {
+  if (activeItemRecord) {
+    const next = getNextItem(items, activeItemRecord.index, isActivatable)
+    if (next) {
+      next.tabIndex = 0
+      next.focus()
+    }
+    return next
+  } else {
+    return activateFirstItem(items, isActivatable)
+  }
+}
+/**
+ * Activates the previous item and focuses it. If nothing is currently
+ * activated, activates the last item.
+ */
+function activatePreviousItem(
+  items,
+  activeItemRecord,
+  isActivatable = isItemNotDisabled
+) {
+  if (activeItemRecord) {
+    const prev = getPrevItem(items, activeItemRecord.index, isActivatable)
+    if (prev) {
+      prev.tabIndex = 0
+      prev.focus()
+    }
+    return prev
+  } else {
+    return activateLastItem(items, isActivatable)
+  }
+}
+/**
+ * The default `isActivatable` function, which checks if an item is not
+ * disabled.
+ *
+ * @param item The item to check.
+ * @return true if `item.disabled` is `false.
+ */
+function isItemNotDisabled(item) {
+  return !item.disabled
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// TODO: move this file to List and make List use this
+/**
+ * Default keys that trigger navigation.
+ */
+// tslint:disable:enforce-name-casing Following Enum style
+const NavigableKeys = {
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft',
+  ArrowUp: 'ArrowUp',
+  ArrowRight: 'ArrowRight',
+  Home: 'Home',
+  End: 'End',
+}
+/**
+ * A controller that handles list keyboard navigation and item management.
+ */
+class ListController {
+  constructor(config) {
     /**
-     * Handles positioning the surface and aligning it to the anchor as well as
-     * keeping it in the viewport.
+     * Handles keyboard navigation. Should be bound to the node that will act as
+     * the List.
      */
-    this.menuPositionController = new SurfacePositionController(this, () => {
-      return {
-        anchorCorner: this.anchorCorner,
-        surfaceCorner: this.menuCorner,
-        surfaceEl: this.surfaceEl,
-        anchorEl: this.anchorElement,
-        positioning: this.positioning,
-        isOpen: this.open,
-        xOffset: this.xOffset,
-        yOffset: this.yOffset,
-        onOpen: this.onOpened,
-        beforeClose: this.beforeClose,
-        onClose: this.onClosed,
-        // We can't resize components that have overflow like menus with
-        // submenus because the overflow-y will show menu items / content
-        // outside the bounds of the menu. (to be fixed w/ popover API)
-        repositionStrategy: this.hasOverflow ? 'move' : 'resize',
-      }
-    })
-    this.handleFocusout = async event => {
-      const anchorEl = this.anchorElement
-      // Do not close if we focused out by clicking on the anchor element. We
-      // can't assume anchor buttons can be the related target because of iOS does
-      // not focus buttons.
-      if (
-        this.stayOpenOnFocusout ||
-        !this.open ||
-        this.pointerPath.includes(anchorEl)
-      ) {
+    this.handleKeydown = event => {
+      const key = event.key
+      if (event.defaultPrevented || !this.isNavigableKey(key)) {
         return
       }
-      if (event.relatedTarget) {
-        // Don't close the menu if we are switching focus between menu,
-        // md-menu-item, and md-list or if the anchor was click focused.
-        if (
-          isElementInSubtree(event.relatedTarget, this) ||
-          isElementInSubtree(event.relatedTarget, anchorEl)
-        ) {
-          return
-        }
-      } else if (this.pointerPath.includes(this)) {
-        // If menu tabindex == -1 and the user clicks on the menu or a divider, we
-        // want to keep the menu open.
+      // do not use this.items directly in upcoming calculations so we don't
+      // re-query the DOM unnecessarily
+      const items = this.items
+      if (!items.length) {
         return
       }
-      const oldRestoreFocus = this.skipRestoreFocus
-      // allow focus to continue to the next focused object rather than returning
-      this.skipRestoreFocus = true
-      this.close()
-      // await for close
-      await this.updateComplete
-      // return to previous behavior
-      this.skipRestoreFocus = oldRestoreFocus
-    }
-    /**
-     * Saves the last focused element focuses the new element based on
-     * `defaultFocus`, and animates open.
-     */
-    this.onOpened = async () => {
-      this.lastFocusedElement = getFocusedElement()
-      const items = this.items
-      const activeItemRecord = getActiveItem(items)
-      if (activeItemRecord && this.defaultFocus !== FocusState.NONE) {
+      const activeItemRecord = getActiveItem(items, this.isActivatable)
+      if (activeItemRecord) {
         activeItemRecord.item.tabIndex = -1
       }
-      let animationAborted = !this.quick
-      if (this.quick) {
-        this.dispatchEvent(new Event('opening'))
-      } else {
-        animationAborted = !!(await this.animateOpen())
-      }
-      // This must come after the opening animation or else it may focus one of
-      // the items before the animation has begun and causes the list to slide
-      // (block-padding-of-the-menu)px at the end of the animation
-      switch (this.defaultFocus) {
-        case FocusState.FIRST_ITEM:
-          const first = getFirstActivatableItem(items)
-          if (first) {
-            first.tabIndex = 0
-            first.focus()
-            await first.updateComplete
-          }
+      event.preventDefault()
+      const isRtl = this.isRtl()
+      const inlinePrevious = isRtl
+        ? NavigableKeys.ArrowRight
+        : NavigableKeys.ArrowLeft
+      const inlineNext = isRtl
+        ? NavigableKeys.ArrowLeft
+        : NavigableKeys.ArrowRight
+      switch (key) {
+        // Activate the next item
+        case NavigableKeys.ArrowDown:
+        case inlineNext:
+          activateNextItem(items, activeItemRecord, this.isActivatable)
           break
-        case FocusState.LAST_ITEM:
-          const last = getLastActivatableItem(items)
-          if (last) {
-            last.tabIndex = 0
-            last.focus()
-            await last.updateComplete
-          }
+        // Activate the previous item
+        case NavigableKeys.ArrowUp:
+        case inlinePrevious:
+          activatePreviousItem(items, activeItemRecord, this.isActivatable)
           break
-        case FocusState.LIST_ROOT:
-          this.focus()
+        // Activate the first item
+        case NavigableKeys.Home:
+          activateFirstItem(items, this.isActivatable)
           break
-        default:
-        case FocusState.NONE:
-          // Do nothing.
+        // Activate the last item
+        case NavigableKeys.End:
+          activateLastItem(items, this.isActivatable)
           break
       }
-      if (!animationAborted) {
-        this.dispatchEvent(new Event('opened'))
-      }
     }
     /**
-     * Animates closed.
+     * Listener to be bound to the `deactivate-items` item event.
      */
-    this.beforeClose = async () => {
-      this.open = false
-      if (!this.skipRestoreFocus) {
-        this.lastFocusedElement?.focus?.()
-      }
-      if (!this.quick) {
-        await this.animateClose()
+    this.onDeactivateItems = () => {
+      const items = this.items
+      for (const item of items) {
+        this.deactivateItem(item)
       }
     }
     /**
-     * Focuses the last focused element.
+     * Listener to be bound to the `request-activation` item event..
      */
-    this.onClosed = () => {
-      if (this.quick) {
-        this.dispatchEvent(new Event('closing'))
-        this.dispatchEvent(new Event('closed'))
-      }
-    }
-    this.onWindowPointerdown = event => {
-      this.pointerPath = event.composedPath()
+    this.onRequestActivation = event => {
+      this.onDeactivateItems()
+      const target = event.target
+      this.activateItem(target)
+      target.focus()
     }
     /**
-     * We cannot listen to window click because Safari on iOS will not bubble a
-     * click event on window if the item clicked is not a "clickable" item such as
-     * <body>
+     * Listener to be bound to the `slotchange` event for the slot that renders
+     * the items.
      */
-    this.onDocumentClick = event => {
-      if (!this.open) {
+    this.onSlotchange = () => {
+      const items = this.items
+      // Whether we have encountered an item that has been activated
+      let encounteredActivated = false
+      for (const item of items) {
+        const isActivated = !item.disabled && item.tabIndex > -1
+        if (isActivated && !encounteredActivated) {
+          encounteredActivated = true
+          item.tabIndex = 0
+          continue
+        }
+        // Deactivate the rest including disabled
+        item.tabIndex = -1
+      }
+      if (encounteredActivated) {
+        return
+      }
+      const firstActivatableItem = getFirstActivatableItem(
+        items,
+        this.isActivatable
+      )
+      if (!firstActivatableItem) {
         return
       }
-      const path = event.composedPath()
-      if (
-        !this.stayOpenOnOutsideClick &&
-        !path.includes(this) &&
-        !path.includes(this.anchorElement)
-      ) {
-        this.open = false
-      }
-    }
-    {
-      this.internals.role = 'menu'
-      this.addEventListener('keydown', this.handleKeydown)
-      // Capture so that we can grab the event before it reaches the menu item
-      // istelf. Specifically useful for the case where typeahead encounters a
-      // space and we don't want the menu item to close the menu.
-      this.addEventListener('keydown', this.captureKeydown, { capture: true })
-      this.addEventListener('focusout', this.handleFocusout)
+      firstActivatableItem.tabIndex = 0
     }
+    const {
+      isItem,
+      getPossibleItems,
+      isRtl,
+      deactivateItem,
+      activateItem,
+      isNavigableKey,
+      isActivatable,
+    } = config
+    this.isItem = isItem
+    this.getPossibleItems = getPossibleItems
+    this.isRtl = isRtl
+    this.deactivateItem = deactivateItem
+    this.activateItem = activateItem
+    this.isNavigableKey = isNavigableKey
+    this.isActivatable = isActivatable
   }
   /**
-   * The menu items associated with this menu. The items must be `MenuItem`s and
-   * have both the `md-menu-item` and `md-list-item` attributes.
+   * The items being managed by the list. Additionally, attempts to see if the
+   * object has a sub-item in the `.item` property.
    */
   get items() {
-    return this.listController.items
-  }
-  willUpdate(changed) {
-    if (!changed.has('open')) {
-      return
-    }
-    if (this.open) {
-      this.removeAttribute('aria-hidden')
-      return
-    }
-    this.setAttribute('aria-hidden', 'true')
-  }
-  update(changed) {
-    if (changed.has('open')) {
-      if (this.open) {
-        this.setUpGlobalEventListeners()
-      } else {
-        this.cleanUpGlobalEventListeners()
+    const maybeItems = this.getPossibleItems()
+    const items = []
+    for (const itemOrParent of maybeItems) {
+      const isItem = this.isItem(itemOrParent)
+      // if the item is a list item, add it to the list of items
+      if (isItem) {
+        items.push(itemOrParent)
+        continue
+      }
+      // If the item exposes an `item` property check if it is a list item.
+      const subItem = itemOrParent.item
+      if (subItem && this.isItem(subItem)) {
+        items.push(subItem)
       }
     }
-    super.update(changed)
-  }
-  connectedCallback() {
-    super.connectedCallback()
-    if (this.open) {
-      this.setUpGlobalEventListeners()
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.cleanUpGlobalEventListeners()
-  }
-  render() {
-    return this.renderSurface()
-  }
-  /**
-   * Renders the positionable surface element and its contents.
-   */
-  renderSurface() {
-    return x`
-       <div
-          class="menu ${e$1(this.getSurfaceClasses())}"
-          style=${o$1(this.menuPositionController.surfaceStyles)}>
-        ${this.renderElevation()}
-        <div class="items">
-          <div class="item-padding">
-            ${this.renderMenuItems()}
-          </div>
-        </div>
-       </div>
-     `
+    return items
   }
   /**
-   * Renders the menu items' slot
+   * Activates the next item in the list. If at the end of the list, the first
+   * item will be activated.
+   *
+   * @return The activated list item or `null` if there are no items.
    */
-  renderMenuItems() {
-    return x`<slot
-        @close-menu=${this.onCloseMenu}
-        @deactivate-items=${this.onDeactivateItems}
-        @request-activation=${this.onRequestActivation}
-        @deactivate-typeahead=${this.handleDeactivateTypeahead}
-        @activate-typeahead=${this.handleActivateTypeahead}
-        @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
-        @close-on-focusout=${this.handleCloseOnFocusout}
-        @slotchange=${this.listController.onSlotchange}></slot>`
+  activateNextItem() {
+    const items = this.items
+    const activeItemRecord = getActiveItem(items, this.isActivatable)
+    if (activeItemRecord) {
+      activeItemRecord.item.tabIndex = -1
+    }
+    return activateNextItem(items, activeItemRecord, this.isActivatable)
   }
   /**
-   * Renders the elevation component.
+   * Activates the previous item in the list. If at the start of the list, the
+   * last item will be activated.
+   *
+   * @return The activated list item or `null` if there are no items.
    */
-  renderElevation() {
-    return x`<md-elevation part="elevation"></md-elevation>`
-  }
-  getSurfaceClasses() {
-    return {
-      open: this.open,
-      fixed: this.positioning === 'fixed',
-      'has-overflow': this.hasOverflow,
+  activatePreviousItem() {
+    const items = this.items
+    const activeItemRecord = getActiveItem(items, this.isActivatable)
+    if (activeItemRecord) {
+      activeItemRecord.item.tabIndex = -1
     }
+    return activatePreviousItem(items, activeItemRecord, this.isActivatable)
   }
-  captureKeydown(event) {
-    if (
-      event.target === this &&
-      !event.defaultPrevented &&
-      isClosableKey(event.code)
-    ) {
-      event.preventDefault()
-      this.close()
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Creates an event that closes any parent menus.
+ */
+function createCloseMenuEvent(initiator, reason) {
+  return new CustomEvent('close-menu', {
+    bubbles: true,
+    composed: true,
+    detail: { initiator, reason, itemPath: [initiator] },
+  })
+}
+/**
+ * Creates a default close menu event used by md-menu.
+ */
+const createDefaultCloseMenuEvent = createCloseMenuEvent
+/**
+ * Keys that are used for selection in menus.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const SelectionKey = {
+  SPACE: 'Space',
+  ENTER: 'Enter',
+}
+/**
+ * Default close `Reason` kind values.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const CloseReason = {
+  CLICK_SELECTION: 'click-selection',
+  KEYDOWN: 'keydown',
+}
+/**
+ * Keys that can close menus.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const KeydownCloseKey = {
+  ESCAPE: 'Escape',
+  SPACE: SelectionKey.SPACE,
+  ENTER: SelectionKey.ENTER,
+}
+/**
+ * Determines whether the given key code is a key code that should close the
+ * menu.
+ *
+ * @param code The KeyboardEvent code to check.
+ * @return Whether or not the key code is in the predetermined list to close the
+ * menu.
+ */
+function isClosableKey(code) {
+  return Object.values(KeydownCloseKey).some(value => value === code)
+}
+/**
+ * Determines whether a target element is contained inside another element's
+ * composed tree.
+ *
+ * @param target The potential contained element.
+ * @param container The potential containing element of the target.
+ * @returns Whether the target element is contained inside the container's
+ * composed subtree
+ */
+function isElementInSubtree(target, container) {
+  // Dispatch a composed, bubbling event to check its path to see if the
+  // newly-focused element is contained in container's subtree
+  const focusEv = new Event('md-contains', { bubbles: true, composed: true })
+  let composedPath = []
+  const listener = ev => {
+    composedPath = ev.composedPath()
+  }
+  container.addEventListener('md-contains', listener)
+  target.dispatchEvent(focusEv)
+  container.removeEventListener('md-contains', listener)
+  const isContained = composedPath.length > 0
+  return isContained
+}
+/**
+ * Element to focus on when menu is first opened.
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const FocusState = {
+  NONE: 'none',
+  LIST_ROOT: 'list-root',
+  FIRST_ITEM: 'first-item',
+  LAST_ITEM: 'last-item',
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An enum of supported Menu corners
+ */
+// tslint:disable-next-line:enforce-name-casing We are mimicking enum style
+const Corner = {
+  END_START: 'end-start',
+  END_END: 'end-end',
+  START_START: 'start-start',
+  START_END: 'start-end',
+}
+/**
+ * Given a surface, an anchor, corners, and some options, this surface will
+ * calculate the position of a surface to align the two given corners and keep
+ * the surface inside the window viewport. It also provides a StyleInfo map that
+ * can be applied to the surface to handle visiblility and position.
+ */
+class SurfacePositionController {
+  /**
+   * @param host The host to connect the controller to.
+   * @param getProperties A function that returns the properties for the
+   * controller.
+   */
+  constructor(host, getProperties) {
+    this.host = host
+    this.getProperties = getProperties
+    // The current styles to apply to the surface.
+    this.surfaceStylesInternal = {
+      display: 'none',
     }
-    this.typeaheadController.onKeydown(event)
+    // Previous values stored for change detection. Open change detection is
+    // calculated separately so initialize it here.
+    this.lastValues = { isOpen: false }
+    this.host.addController(this)
   }
   /**
-   * Performs the opening animation:
-   *
-   * https://direct.googleplex.com/#/spec/295000003+271060003
-   *
-   * @return A promise that resolve to `true` if the animation was aborted,
-   *     `false` if it was not aborted.
+   * The StyleInfo map to apply to the surface via Lit's stylemap
    */
-  async animateOpen() {
-    const surfaceEl = this.surfaceEl
-    const slotEl = this.slotEl
-    if (!surfaceEl || !slotEl) return true
-    const openDirection = this.openDirection
-    this.dispatchEvent(new Event('opening'))
-    // needs to be imperative because we don't want to mix animation and Lit
-    // render timing
-    surfaceEl.classList.toggle('animating', true)
-    const signal = this.openCloseAnimationSignal.start()
-    const height = surfaceEl.offsetHeight
-    const openingUpwards = openDirection === 'UP'
-    const children = this.items
-    const FULL_DURATION = 500
-    const SURFACE_OPACITY_DURATION = 50
-    const ITEM_OPACITY_DURATION = 250
-    // We want to fit every child fade-in animation within the full duration of
-    // the animation.
-    const DELAY_BETWEEN_ITEMS =
-      (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length
-    const surfaceHeightAnimation = surfaceEl.animate(
-      [{ height: '0px' }, { height: `${height}px` }],
-      {
-        duration: FULL_DURATION,
-        easing: EASING.EMPHASIZED,
-      }
-    )
-    // When we are opening upwards, we want to make sure the last item is always
-    // in view, so we need to translate it upwards the opposite direction of the
-    // height animation
-    const upPositionCorrectionAnimation = slotEl.animate(
-      [
-        { transform: openingUpwards ? `translateY(-${height}px)` : '' },
-        { transform: '' },
-      ],
-      { duration: FULL_DURATION, easing: EASING.EMPHASIZED }
-    )
-    const surfaceOpacityAnimation = surfaceEl.animate(
-      [{ opacity: 0 }, { opacity: 1 }],
-      SURFACE_OPACITY_DURATION
-    )
-    const childrenAnimations = []
-    for (let i = 0; i < children.length; i++) {
-      // If we are animating upwards, then reverse the children list.
-      const directionalIndex = openingUpwards ? children.length - 1 - i : i
-      const child = children[directionalIndex]
-      const animation = child.animate([{ opacity: 0 }, { opacity: 1 }], {
-        duration: ITEM_OPACITY_DURATION,
-        delay: DELAY_BETWEEN_ITEMS * i,
-      })
-      // Make them all initially hidden and then clean up at the end of each
-      // animation.
-      child.classList.toggle('md-menu-hidden', true)
-      animation.addEventListener('finish', () => {
-        child.classList.toggle('md-menu-hidden', false)
-      })
-      childrenAnimations.push([child, animation])
-    }
-    let resolveAnimation = value => {}
-    const animationFinished = new Promise(resolve => {
-      resolveAnimation = resolve
-    })
-    signal.addEventListener('abort', () => {
-      surfaceHeightAnimation.cancel()
-      upPositionCorrectionAnimation.cancel()
-      surfaceOpacityAnimation.cancel()
-      childrenAnimations.forEach(([child, animation]) => {
-        child.classList.toggle('md-menu-hidden', false)
-        animation.cancel()
-      })
-      resolveAnimation(true)
-    })
-    surfaceHeightAnimation.addEventListener('finish', () => {
-      surfaceEl.classList.toggle('animating', false)
-      this.openCloseAnimationSignal.finish()
-      resolveAnimation(false)
-    })
-    return await animationFinished
+  get surfaceStyles() {
+    return this.surfaceStylesInternal
   }
   /**
-   * Performs the closing animation:
-   *
-   * https://direct.googleplex.com/#/spec/295000003+271060003
+   * Calculates the surface's new position required so that the surface's
+   * `surfaceCorner` aligns to the anchor's `anchorCorner` while keeping the
+   * surface inside the window viewport. This positioning also respects RTL by
+   * checking `getComputedStyle()` on the surface element.
    */
-  animateClose() {
-    let resolve
-    let reject
-    // This promise blocks the surface position controller from setting
-    // display: none on the surface which will interfere with this animation.
-    const animationEnded = new Promise((res, rej) => {
-      resolve = res
-      reject = rej
-    })
-    const surfaceEl = this.surfaceEl
-    const slotEl = this.slotEl
-    if (!surfaceEl || !slotEl) {
-      reject()
-      return animationEnded
+  async position() {
+    const {
+      surfaceEl,
+      anchorEl,
+      anchorCorner: anchorCornerRaw,
+      surfaceCorner: surfaceCornerRaw,
+      positioning,
+      xOffset,
+      yOffset,
+      repositionStrategy,
+    } = this.getProperties()
+    const anchorCorner = anchorCornerRaw.toLowerCase().trim()
+    const surfaceCorner = surfaceCornerRaw.toLowerCase().trim()
+    if (!surfaceEl || !anchorEl) {
+      return
     }
-    const openDirection = this.openDirection
-    const closingDownwards = openDirection === 'UP'
-    this.dispatchEvent(new Event('closing'))
-    // needs to be imperative because we don't want to mix animation and Lit
-    // render timing
-    surfaceEl.classList.toggle('animating', true)
-    const signal = this.openCloseAnimationSignal.start()
-    const height = surfaceEl.offsetHeight
-    const children = this.items
-    const FULL_DURATION = 150
-    const SURFACE_OPACITY_DURATION = 50
-    // The surface fades away at the very end
-    const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION
-    const ITEM_OPACITY_DURATION = 50
-    const ITEM_OPACITY_INITIAL_DELAY = 50
-    const END_HEIGHT_PERCENTAGE = 0.35
-    // We want to fit every child fade-out animation within the full duration of
-    // the animation.
-    const DELAY_BETWEEN_ITEMS =
-      (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
-      children.length
-    // The mock has the animation shrink to 35%
-    const surfaceHeightAnimation = surfaceEl.animate(
-      [
-        { height: `${height}px` },
-        { height: `${height * END_HEIGHT_PERCENTAGE}px` },
-      ],
-      {
-        duration: FULL_DURATION,
-        easing: EASING.EMPHASIZED_ACCELERATE,
-      }
-    )
-    // When we are closing downwards, we want to make sure the last item is
-    // always in view, so we need to translate it upwards the opposite direction
-    // of the height animation
-    const downPositionCorrectionAnimation = slotEl.animate(
-      [
-        { transform: '' },
-        {
-          transform: closingDownwards
-            ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
-            : '',
-        },
-      ],
-      { duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE }
-    )
-    const surfaceOpacityAnimation = surfaceEl.animate(
-      [{ opacity: 1 }, { opacity: 0 }],
-      { duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY }
-    )
-    const childrenAnimations = []
-    for (let i = 0; i < children.length; i++) {
-      // If the animation is closing upwards, then reverse the list of
-      // children so that we animate in the opposite direction.
-      const directionalIndex = closingDownwards ? i : children.length - 1 - i
-      const child = children[directionalIndex]
-      const animation = child.animate([{ opacity: 1 }, { opacity: 0 }], {
-        duration: ITEM_OPACITY_DURATION,
-        delay: ITEM_OPACITY_INITIAL_DELAY + DELAY_BETWEEN_ITEMS * i,
-      })
-      // Make sure the items stay hidden at the end of each child animation.
-      // We clean this up at the end of the overall animation.
-      animation.addEventListener('finish', () => {
-        child.classList.toggle('md-menu-hidden', true)
+    // Store these before we potentially resize the window with the next set of
+    // lines
+    const windowInnerWidth = window.innerWidth
+    const windowInnerHeight = window.innerHeight
+    // Paint the surface transparently so that we can get the position and the
+    // rect info of the surface.
+    this.surfaceStylesInternal = {
+      display: 'block',
+      opacity: '0',
+    }
+    // Wait for it to be visible.
+    this.host.requestUpdate()
+    await this.host.updateComplete
+    const surfaceRect = surfaceEl.getSurfacePositionClientRect
+      ? surfaceEl.getSurfacePositionClientRect()
+      : surfaceEl.getBoundingClientRect()
+    const anchorRect = anchorEl.getSurfacePositionClientRect
+      ? anchorEl.getSurfacePositionClientRect()
+      : anchorEl.getBoundingClientRect()
+    const [surfaceBlock, surfaceInline] = surfaceCorner.split('-')
+    const [anchorBlock, anchorInline] = anchorCorner.split('-')
+    // LTR depends on the direction of the SURFACE not the anchor.
+    const isLTR = getComputedStyle(surfaceEl).direction === 'ltr'
+    /*
+     * A diagram that helps describe some of the variables used in the following
+     * calculations.
+     *
+     * ┌───── inline/blockTopLayerOffset
+     * │       │
+     * │     ┌─▼───┐                  Window
+     * │    ┌┼─────┴────────────────────────┐
+     * │    ││                              │
+     * └──► ││  ┌──inline/blockAnchorOffset │
+     *      ││  │     │                     │
+     *      └┤  │  ┌──▼───┐                 │
+     *       │  │ ┌┼──────┤                 │
+     *       │  └─►│Anchor│                 │
+     *       │    └┴──────┘                 │
+     *       │                              │
+     *       │     ┌────────────────────────┼────┐
+     *       │     │ Surface                │    │
+     *       │     │                        │    │
+     *       │     │                        │    │
+     *       │     │                        │    │
+     *       │     │                        │    │
+     *       │     │                        │    │
+     *       └─────┼────────────────────────┘    ├┐
+     *             │ inline/blockOOBCorrection   ││
+     *             │                         │   ││
+     *             │                         ├──►││
+     *             │                         │   ││
+     *             └────────────────────────┐▼───┼┘
+     *                                      └────┘
+     */
+    // Calculate the block positioning properties
+    let {
+      blockInset,
+      blockOutOfBoundsCorrection,
+      surfaceBlockProperty,
+    } = this.calculateBlock({
+      surfaceRect,
+      anchorRect,
+      anchorBlock,
+      surfaceBlock,
+      yOffset,
+      positioning,
+      windowInnerHeight,
+    })
+    // If the surface should be out of bounds in the block direction, flip the
+    // surface and anchor corner block values and recalculate
+    if (blockOutOfBoundsCorrection) {
+      const flippedSurfaceBlock = surfaceBlock === 'start' ? 'end' : 'start'
+      const flippedAnchorBlock = anchorBlock === 'start' ? 'end' : 'start'
+      const flippedBlock = this.calculateBlock({
+        surfaceRect,
+        anchorRect,
+        anchorBlock: flippedAnchorBlock,
+        surfaceBlock: flippedSurfaceBlock,
+        yOffset,
+        positioning,
+        windowInnerHeight,
       })
-      childrenAnimations.push([child, animation])
+      // In the case that the flipped verion would require less out of bounds
+      // correcting, use the flipped corner block values
+      if (
+        blockOutOfBoundsCorrection > flippedBlock.blockOutOfBoundsCorrection
+      ) {
+        blockInset = flippedBlock.blockInset
+        blockOutOfBoundsCorrection = flippedBlock.blockOutOfBoundsCorrection
+        surfaceBlockProperty = flippedBlock.surfaceBlockProperty
+      }
     }
-    signal.addEventListener('abort', () => {
-      surfaceHeightAnimation.cancel()
-      downPositionCorrectionAnimation.cancel()
-      surfaceOpacityAnimation.cancel()
-      childrenAnimations.forEach(([child, animation]) => {
-        animation.cancel()
-        child.classList.toggle('md-menu-hidden', false)
-      })
-      reject()
+    // Calculate the inline positioning properties
+    let {
+      inlineInset,
+      inlineOutOfBoundsCorrection,
+      surfaceInlineProperty,
+    } = this.calculateInline({
+      surfaceRect,
+      anchorRect,
+      anchorInline,
+      surfaceInline,
+      xOffset,
+      positioning,
+      isLTR,
+      windowInnerWidth,
     })
-    surfaceHeightAnimation.addEventListener('finish', () => {
-      surfaceEl.classList.toggle('animating', false)
-      childrenAnimations.forEach(([child]) => {
-        child.classList.toggle('md-menu-hidden', false)
+    // If the surface should be out of bounds in the inline direction, flip the
+    // surface and anchor corner inline values and recalculate
+    if (inlineOutOfBoundsCorrection) {
+      const flippedSurfaceInline = surfaceInline === 'start' ? 'end' : 'start'
+      const flippedAnchorInline = anchorInline === 'start' ? 'end' : 'start'
+      const flippedInline = this.calculateInline({
+        surfaceRect,
+        anchorRect,
+        anchorInline: flippedAnchorInline,
+        surfaceInline: flippedSurfaceInline,
+        xOffset,
+        positioning,
+        isLTR,
+        windowInnerWidth,
       })
-      this.openCloseAnimationSignal.finish()
-      this.dispatchEvent(new Event('closed'))
-      resolve(true)
-    })
-    return animationEnded
-  }
-  handleKeydown(event) {
-    // At any key event, the pointer interaction is done so we need to clear our
-    // cached pointerpath. This handles the case where the user clicks on the
-    // anchor, and then hits shift+tab
-    this.pointerPath = []
-    this.listController.handleKeydown(event)
-  }
-  setUpGlobalEventListeners() {
-    document.addEventListener('click', this.onDocumentClick, { capture: true })
-    window.addEventListener('pointerdown', this.onWindowPointerdown)
-  }
-  cleanUpGlobalEventListeners() {
-    document.removeEventListener('click', this.onDocumentClick, {
-      capture: true,
-    })
-    window.removeEventListener('pointerdown', this.onWindowPointerdown)
-  }
-  onCloseMenu() {
-    this.close()
-  }
-  onDeactivateItems(event) {
-    event.stopPropagation()
-    this.listController.onDeactivateItems()
-  }
-  onRequestActivation(event) {
-    event.stopPropagation()
-    this.listController.onRequestActivation(event)
-  }
-  handleDeactivateTypeahead(event) {
-    // stopPropagation so that this does not deactivate any typeaheads in menus
-    // nested above it e.g. md-sub-menu
-    event.stopPropagation()
-    this.typeaheadActive = false
-  }
-  handleActivateTypeahead(event) {
-    // stopPropagation so that this does not activate any typeaheads in menus
-    // nested above it e.g. md-sub-menu
-    event.stopPropagation()
-    this.typeaheadActive = true
+      // In the case that the flipped verion would require less out of bounds
+      // correcting, use the flipped corner inline values
+      if (
+        Math.abs(inlineOutOfBoundsCorrection) >
+        Math.abs(flippedInline.inlineOutOfBoundsCorrection)
+      ) {
+        inlineInset = flippedInline.inlineInset
+        inlineOutOfBoundsCorrection = flippedInline.inlineOutOfBoundsCorrection
+        surfaceInlineProperty = flippedInline.surfaceInlineProperty
+      }
+    }
+    // If we are simply repositioning the surface back inside the viewport,
+    // subtract the out of bounds correction values from the positioning.
+    if (repositionStrategy === 'move') {
+      blockInset = blockInset - blockOutOfBoundsCorrection
+      inlineInset = inlineInset - inlineOutOfBoundsCorrection
+    }
+    this.surfaceStylesInternal = {
+      display: 'block',
+      opacity: '1',
+      [surfaceBlockProperty]: `${blockInset}px`,
+      [surfaceInlineProperty]: `${inlineInset}px`,
+    }
+    // In the case that we are resizing the surface to stay inside the viewport
+    // we need to set height and width on the surface.
+    if (repositionStrategy === 'resize') {
+      // Add a height property to the styles if there is block height correction
+      if (blockOutOfBoundsCorrection) {
+        this.surfaceStylesInternal['height'] = `${surfaceRect.height -
+          blockOutOfBoundsCorrection}px`
+      }
+      // Add a width property to the styles if there is block height correction
+      if (inlineOutOfBoundsCorrection) {
+        this.surfaceStylesInternal['width'] = `${surfaceRect.width -
+          inlineOutOfBoundsCorrection}px`
+      }
+    }
+    this.host.requestUpdate()
   }
-  handleStayOpenOnFocusout(event) {
-    event.stopPropagation()
-    this.stayOpenOnFocusout = true
+  /**
+   * Calculates the css property, the inset, and the out of bounds correction
+   * for the surface in the block direction.
+   */
+  calculateBlock(config) {
+    const {
+      surfaceRect,
+      anchorRect,
+      anchorBlock,
+      surfaceBlock,
+      yOffset,
+      positioning,
+      windowInnerHeight,
+    } = config
+    // We use number booleans to multiply values rather than `if` / ternary
+    // statements because it _heavily_ cuts down on nesting and readability
+    const relativeToWindow = positioning === 'fixed' ? 1 : 0
+    const isSurfaceBlockStart = surfaceBlock === 'start' ? 1 : 0
+    const isSurfaceBlockEnd = surfaceBlock === 'end' ? 1 : 0
+    const isOneBlockEnd = anchorBlock !== surfaceBlock ? 1 : 0
+    // Whether or not to apply the height of the anchor
+    const blockAnchorOffset = isOneBlockEnd * anchorRect.height + yOffset
+    // The absolute block position of the anchor relative to window
+    const blockTopLayerOffset =
+      isSurfaceBlockStart * anchorRect.top +
+      isSurfaceBlockEnd * (windowInnerHeight - anchorRect.bottom)
+    // If the surface's block would be out of bounds of the window, move it back
+    // in
+    const blockOutOfBoundsCorrection = Math.abs(
+      Math.min(
+        0,
+        windowInnerHeight -
+          blockTopLayerOffset -
+          blockAnchorOffset -
+          surfaceRect.height
+      )
+    )
+    // The block logical value of the surface
+    const blockInset =
+      relativeToWindow * blockTopLayerOffset + blockAnchorOffset
+    const surfaceBlockProperty =
+      surfaceBlock === 'start' ? 'inset-block-start' : 'inset-block-end'
+    return { blockInset, blockOutOfBoundsCorrection, surfaceBlockProperty }
   }
-  handleCloseOnFocusout(event) {
-    event.stopPropagation()
-    this.stayOpenOnFocusout = false
+  /**
+   * Calculates the css property, the inset, and the out of bounds correction
+   * for the surface in the inline direction.
+   */
+  calculateInline(config) {
+    const {
+      isLTR: isLTRBool,
+      surfaceInline,
+      anchorInline,
+      anchorRect,
+      surfaceRect,
+      xOffset,
+      positioning,
+      windowInnerWidth,
+    } = config
+    // We use number booleans to multiply values rather than `if` / ternary
+    // statements because it _heavily_ cuts down on nesting and readability
+    const relativeToWindow = positioning === 'fixed' ? 1 : 0
+    const isLTR = isLTRBool ? 1 : 0
+    const isRTL = isLTRBool ? 0 : 1
+    const isSurfaceInlineStart = surfaceInline === 'start' ? 1 : 0
+    const isSurfaceInlineEnd = surfaceInline === 'end' ? 1 : 0
+    const isOneInlineEnd = anchorInline !== surfaceInline ? 1 : 0
+    // Whether or not to apply the width of the anchor
+    const inlineAnchorOffset = isOneInlineEnd * anchorRect.width + xOffset
+    // The inline position of the anchor relative to window in LTR
+    const inlineTopLayerOffsetLTR =
+      isSurfaceInlineStart * anchorRect.left +
+      isSurfaceInlineEnd * (windowInnerWidth - anchorRect.right)
+    // The inline position of the anchor relative to window in RTL
+    const inlineTopLayerOffsetRTL =
+      isSurfaceInlineStart * (windowInnerWidth - anchorRect.right) +
+      isSurfaceInlineEnd * anchorRect.left
+    // The inline position of the anchor relative to window
+    const inlineTopLayerOffset =
+      isLTR * inlineTopLayerOffsetLTR + isRTL * inlineTopLayerOffsetRTL
+    // If the surface's inline would be out of bounds of the window, move it
+    // back in
+    const inlineOutOfBoundsCorrection = Math.abs(
+      Math.min(
+        0,
+        windowInnerWidth -
+          inlineTopLayerOffset -
+          inlineAnchorOffset -
+          surfaceRect.width
+      )
+    )
+    // The inline logical value of the surface
+    const inlineInset =
+      relativeToWindow * inlineTopLayerOffset + inlineAnchorOffset
+    const surfaceInlineProperty =
+      surfaceInline === 'start' ? 'inset-inline-start' : 'inset-inline-end'
+    return {
+      inlineInset,
+      inlineOutOfBoundsCorrection,
+      surfaceInlineProperty,
+    }
   }
-  close() {
-    this.open = false
-    const maybeSubmenu = this.slotItems
-    maybeSubmenu.forEach(item => {
-      item.close?.()
-    })
+  hostUpdate() {
+    this.onUpdate()
   }
-  show() {
-    this.open = true
+  hostUpdated() {
+    this.onUpdate()
   }
   /**
-   * Activates the next item in the menu. If at the end of the menu, the first
-   * item will be activated.
-   *
-   * @return The activated menu item or `null` if there are no items.
+   * Checks whether the properties passed into the controller have changed since
+   * the last positioning. If so, it will reposition if the surface is open or
+   * close it if the surface should close.
    */
-  activateNextItem() {
-    return this.listController.activateNextItem() ?? null
+  async onUpdate() {
+    const props = this.getProperties()
+    let hasChanged = false
+    for (const [key, value] of Object.entries(props)) {
+      // tslint:disable-next-line
+      hasChanged = hasChanged || value !== this.lastValues[key]
+      if (hasChanged) break
+    }
+    const openChanged = this.lastValues.isOpen !== props.isOpen
+    const hasAnchor = !!props.anchorEl
+    const hasSurface = !!props.surfaceEl
+    if (hasChanged && hasAnchor && hasSurface) {
+      // Only update isOpen, because if it's closed, we do not want to waste
+      // time on a useless reposition calculation. So save the other "dirty"
+      // values until next time it opens.
+      this.lastValues.isOpen = props.isOpen
+      if (props.isOpen) {
+        // We are going to do a reposition, so save the prop values for future
+        // dirty checking.
+        this.lastValues = props
+        await this.position()
+        props.onOpen()
+      } else if (openChanged) {
+        await props.beforeClose()
+        this.close()
+        props.onClose()
+      }
+    }
   }
   /**
-   * Activates the previous item in the menu. If at the start of the menu, the
-   * last item will be activated.
-   *
-   * @return The activated menu item or `null` if there are no items.
+   * Hides the surface.
    */
-  activatePreviousItem() {
-    return this.listController.activatePreviousItem() ?? null
+  close() {
+    this.surfaceStylesInternal = {
+      display: 'none',
+    }
+    this.host.requestUpdate()
   }
 }
-;(() => {
-  // We want to manage tabindex ourselves.
-  setupHostAria(Menu, { focusable: false })
-})()
-__decorate([e$5('.menu')], Menu.prototype, 'surfaceEl', void 0)
-__decorate([e$5('slot')], Menu.prototype, 'slotEl', void 0)
-__decorate([n$3()], Menu.prototype, 'anchor', void 0)
-__decorate([n$3()], Menu.prototype, 'positioning', void 0)
-__decorate([n$3({ type: Boolean })], Menu.prototype, 'quick', void 0)
-__decorate(
-  [n$3({ type: Boolean, attribute: 'has-overflow' })],
-  Menu.prototype,
-  'hasOverflow',
-  void 0
-)
-__decorate(
-  [n$3({ type: Boolean, reflect: true })],
-  Menu.prototype,
-  'open',
-  void 0
-)
-__decorate(
-  [n$3({ type: Number, attribute: 'x-offset' })],
-  Menu.prototype,
-  'xOffset',
-  void 0
-)
-__decorate(
-  [n$3({ type: Number, attribute: 'y-offset' })],
-  Menu.prototype,
-  'yOffset',
-  void 0
-)
-__decorate(
-  [n$3({ type: Number, attribute: 'typeahead-delay' })],
-  Menu.prototype,
-  'typeaheadDelay',
-  void 0
-)
-__decorate(
-  [n$3({ attribute: 'anchor-corner' })],
-  Menu.prototype,
-  'anchorCorner',
-  void 0
-)
-__decorate(
-  [n$3({ attribute: 'menu-corner' })],
-  Menu.prototype,
-  'menuCorner',
-  void 0
-)
-__decorate(
-  [n$3({ type: Boolean, attribute: 'stay-open-on-outside-click' })],
-  Menu.prototype,
-  'stayOpenOnOutsideClick',
-  void 0
-)
-__decorate(
-  [n$3({ type: Boolean, attribute: 'stay-open-on-focusout' })],
-  Menu.prototype,
-  'stayOpenOnFocusout',
-  void 0
-)
-__decorate(
-  [n$3({ type: Boolean, attribute: 'skip-restore-focus' })],
-  Menu.prototype,
-  'skipRestoreFocus',
-  void 0
-)
-__decorate(
-  [n$3({ attribute: 'default-focus' })],
-  Menu.prototype,
-  'defaultFocus',
-  void 0
-)
-__decorate([o$3({ flatten: true })], Menu.prototype, 'slotItems', void 0)
-__decorate([r$3()], Menu.prototype, 'typeaheadActive', void 0)
 
 /**
  * @license
- * Copyright 2022 Google LLC
+ * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$8 = i$4`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow .items{overflow:visible}.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
-`
-
 /**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
+ * Indicies to access the TypeaheadRecord tuple type.
  */
+const TYPEAHEAD_RECORD = {
+  INDEX: 0,
+  ITEM: 1,
+  TEXT: 2,
+}
 /**
- * @summary Menus display a list of choices on a temporary surface.
- *
- * @description
- * Menus appear when users interact with a button, action, or other control.
- *
- * They can be opened from a variety of elements, most commonly icon buttons,
- * buttons, and text fields.
- *
- * md-menu listens for the `close-menu` and `deselect-items` events.
- *
- * - `close-menu` closes the menu when dispatched from a child element.
- * - `deselect-items` deselects all of its immediate menu-item children.
+ * This controller listens to `keydown` events and searches the header text of
+ * an array of `MenuItem`s with the corresponding entered keys within the buffer
+ * time and activates the item.
  *
  * @example
- * ```html
- * <div style="position:relative;">
- *   <button
- *       id="anchor"
- *       @click=${() => this.menuRef.value.show()}>
- *     Click to open menu
- *   </button>
- *   <!--
- *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents.
- *
- *     Additionally, `anchor` ingests an idref which do not pass through shadow
- *     roots. You can also set `.anchorElement` to an element reference if
- *     necessary.
- *   -->
- *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
- *     <md-menu-item headline="This is a headline"></md-menu-item>
- *     <md-sub-menu>
- *       <md-menu-item
- *           slot="item"
- *           headline="this is a submenu item">
- *       </md-menu-item>
- *       <md-menu slot="menu">
- *         <md-menu-item headline="This is an item inside a submenu">
- *         </md-menu-item>
- *       </md-menu>
- *     </md-sub-menu>
- *   </md-menu>
- * </div>
+ * ```ts
+ * const typeaheadController = new TypeaheadController(() => ({
+ *   typeaheadBufferTime: 50,
+ *   getItems: () => Array.from(document.querySelectorAll('md-menu-item'))
+ * }));
+ * html`
+ *   <div
+ *       @keydown=${typeaheadController.onKeydown}
+ *       tabindex="0"
+ *       class="activeItemText">
+ *     <!-- focusable element that will receive keydown events -->
+ *     Apple
+ *   </div>
+ *   <div>
+ *     <md-menu-item active header="Apple"></md-menu-item>
+ *     <md-menu-item header="Apricot"></md-menu-item>
+ *     <md-menu-item header="Banana"></md-menu-item>
+ *     <md-menu-item header="Olive"></md-menu-item>
+ *     <md-menu-item header="Orange"></md-menu-item>
+ *   </div>
+ * `;
  * ```
- *
- * @final
- * @suppress {visibility}
- */
-let MdMenu = class MdMenu extends Menu {}
-MdMenu.styles = [styles$8]
-MdMenu = __decorate([t$3('md-menu')], MdMenu)
-
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
  */
-const PRESS_GROW_MS = 450
-const MINIMUM_PRESS_MS = 225
-const INITIAL_ORIGIN_SCALE = 0.2
-const PADDING$1 = 10
-const SOFT_EDGE_MINIMUM_SIZE = 75
-const SOFT_EDGE_CONTAINER_RATIO = 0.35
-const PRESS_PSEUDO = '::after'
-const ANIMATION_FILL = 'forwards'
-/**
- * Interaction states for the ripple.
- *
- * On Touch:
- *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
- *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
- *
- * On Mouse or Pen:
- *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
- */
-var State
-;(function(State) {
+class TypeaheadController {
   /**
-   * Initial state of the control, no touch in progress.
+   * @param getProperties A function that returns the options of the typeahead
+   * controller:
    *
-   * Transitions:
-   *   - on touch down: transition to `TOUCH_DELAY`.
-   *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+   * {
+   *   getItems: A function that returns an array of menu items to be searched.
+   *   typeaheadBufferTime: The maximum time between each keystroke to keep the
+   *       current type buffer alive.
+   * }
    */
-  State[(State['INACTIVE'] = 0)] = 'INACTIVE'
+  constructor(getProperties) {
+    this.getProperties = getProperties
+    /**
+     * Array of tuples that helps with indexing.
+     */
+    this.typeaheadRecords = []
+    /**
+     * Currently-typed text since last buffer timeout
+     */
+    this.typaheadBuffer = ''
+    /**
+     * The timeout id from the current buffer's setTimeout
+     */
+    this.cancelTypeaheadTimeout = 0
+    /**
+     * If we are currently "typing"
+     */
+    this.isTypingAhead = false
+    /**
+     * The record of the last active item.
+     */
+    this.lastActiveRecord = null
+    /**
+     * Apply this listener to the element that will receive `keydown` events that
+     * should trigger this controller.
+     *
+     * @param event The native browser `KeyboardEvent` from the `keydown` event.
+     */
+    this.onKeydown = event => {
+      if (this.isTypingAhead) {
+        this.typeahead(event)
+      } else {
+        this.beginTypeahead(event)
+      }
+    }
+    /**
+     * Ends the current typeahead and clears the buffer.
+     */
+    this.endTypeahead = () => {
+      this.isTypingAhead = false
+      this.typaheadBuffer = ''
+      this.typeaheadRecords = []
+    }
+  }
+  get items() {
+    return this.getProperties().getItems()
+  }
+  get active() {
+    return this.getProperties().active
+  }
   /**
-   * Touch down has been received, waiting to determine if it's a swipe or
-   * scroll.
-   *
-   * Transitions:
-   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
-   *   - on cancel: transition to `INACTIVE`.
-   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+   * Sets up typingahead
    */
-  State[(State['TOUCH_DELAY'] = 1)] = 'TOUCH_DELAY'
+  beginTypeahead(event) {
+    if (!this.active) {
+      return
+    }
+    // We don't want to typeahead if the _beginning_ of the typeahead is a menu
+    // navigation, or a selection. We will handle "Space" only if it's in the
+    // middle of a typeahead
+    if (
+      event.code === 'Space' ||
+      event.code === 'Enter' ||
+      event.code.startsWith('Arrow') ||
+      event.code === 'Escape'
+    ) {
+      return
+    }
+    this.isTypingAhead = true
+    // Generates the record array data structure which is the index, the element
+    // and a normalized header.
+    this.typeaheadRecords = this.items.map((el, index) => [
+      index,
+      el,
+      el.typeaheadText.trim().toLowerCase(),
+    ])
+    this.lastActiveRecord =
+      this.typeaheadRecords.find(
+        record => record[TYPEAHEAD_RECORD.ITEM].tabIndex === 0
+      ) ?? null
+    if (this.lastActiveRecord) {
+      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
+    }
+    this.typeahead(event)
+  }
   /**
-   * A touch has been deemed to be a press
+   * Performs the typeahead. Based on the normalized items and the current text
+   * buffer, finds the _next_ item with matching text and activates it.
    *
-   * Transitions:
-   *  - on up: transition to `WAITING_FOR_CLICK`.
-   */
-  State[(State['HOLDING'] = 2)] = 'HOLDING'
-  /**
-   * The user touch has finished, transition into rest state.
+   * @example
    *
-   * Transitions:
-   *   - on click end press; transition to `INACTIVE`.
+   * items: Apple, Banana, Olive, Orange, Cucumber
+   * buffer: ''
+   * user types: o
+   *
+   * activates Olive
+   *
+   * @example
+   *
+   * items: Apple, Banana, Olive (active), Orange, Cucumber
+   * buffer: 'o'
+   * user types: l
+   *
+   * activates Olive
+   *
+   * @example
+   *
+   * items: Apple, Banana, Olive (active), Orange, Cucumber
+   * buffer: ''
+   * user types: o
+   *
+   * activates Orange
+   *
+   * @example
+   *
+   * items: Apple, Banana, Olive, Orange (active), Cucumber
+   * buffer: ''
+   * user types: o
+   *
+   * activates Olive
    */
-  State[(State['WAITING_FOR_CLICK'] = 3)] = 'WAITING_FOR_CLICK'
-})(State || (State = {}))
+  typeahead(event) {
+    if (event.defaultPrevented) return
+    clearTimeout(this.cancelTypeaheadTimeout)
+    // Stop typingahead if one of the navigation or selection keys (except for
+    // Space) are pressed
+    if (
+      event.code === 'Enter' ||
+      event.code.startsWith('Arrow') ||
+      event.code === 'Escape'
+    ) {
+      this.endTypeahead()
+      if (this.lastActiveRecord) {
+        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
+      }
+      return
+    }
+    // If Space is pressed, prevent it from selecting and closing the menu
+    if (event.code === 'Space') {
+      event.preventDefault()
+    }
+    // Start up a new keystroke buffer timeout
+    this.cancelTypeaheadTimeout = setTimeout(
+      this.endTypeahead,
+      this.getProperties().typeaheadBufferTime
+    )
+    this.typaheadBuffer += event.key.toLowerCase()
+    const lastActiveIndex = this.lastActiveRecord
+      ? this.lastActiveRecord[TYPEAHEAD_RECORD.INDEX]
+      : -1
+    const numRecords = this.typeaheadRecords.length
+    /**
+     * Sorting function that will resort the items starting with the given index
+     *
+     * @example
+     *
+     * this.typeaheadRecords =
+     * 0: [0, <reference>, 'apple']
+     * 1: [1, <reference>, 'apricot']
+     * 2: [2, <reference>, 'banana']
+     * 3: [3, <reference>, 'olive'] <-- lastActiveIndex
+     * 4: [4, <reference>, 'orange']
+     * 5: [5, <reference>, 'strawberry']
+     *
+     * this.typeaheadRecords.sort((a,b) => rebaseIndexOnActive(a)
+     *                                       - rebaseIndexOnActive(b)) ===
+     * 0: [3, <reference>, 'olive'] <-- lastActiveIndex
+     * 1: [4, <reference>, 'orange']
+     * 2: [5, <reference>, 'strawberry']
+     * 3: [0, <reference>, 'apple']
+     * 4: [1, <reference>, 'apricot']
+     * 5: [2, <reference>, 'banana']
+     */
+    const rebaseIndexOnActive = record => {
+      return (
+        (record[TYPEAHEAD_RECORD.INDEX] + numRecords - lastActiveIndex) %
+        numRecords
+      )
+    }
+    // records filtered and sorted / rebased around the last active index
+    const matchingRecords = this.typeaheadRecords
+      .filter(
+        record =>
+          !record[TYPEAHEAD_RECORD.ITEM].disabled &&
+          record[TYPEAHEAD_RECORD.TEXT].startsWith(this.typaheadBuffer)
+      )
+      .sort((a, b) => rebaseIndexOnActive(a) - rebaseIndexOnActive(b))
+    // Just leave if there's nothing that matches. Native select will just
+    // choose the first thing that starts with the next letter in the alphabet
+    // but that's out of scope and hard to localize
+    if (matchingRecords.length === 0) {
+      clearTimeout(this.cancelTypeaheadTimeout)
+      if (this.lastActiveRecord) {
+        this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
+      }
+      this.endTypeahead()
+      return
+    }
+    const isNewQuery = this.typaheadBuffer.length === 1
+    let nextRecord
+    // This is likely the case that someone is trying to "tab" through different
+    // entries that start with the same letter
+    if (this.lastActiveRecord === matchingRecords[0] && isNewQuery) {
+      nextRecord = matchingRecords[1] ?? matchingRecords[0]
+    } else {
+      nextRecord = matchingRecords[0]
+    }
+    if (this.lastActiveRecord) {
+      this.lastActiveRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = -1
+    }
+    this.lastActiveRecord = nextRecord
+    nextRecord[TYPEAHEAD_RECORD.ITEM].tabIndex = 0
+    nextRecord[TYPEAHEAD_RECORD.ITEM].focus()
+    return
+  }
+}
+
 /**
- * Events that the ripple listens to.
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
-const EVENTS = [
-  'click',
-  'contextmenu',
-  'pointercancel',
-  'pointerdown',
-  'pointerenter',
-  'pointerleave',
-  'pointerup',
-]
 /**
- * Delay reacting to touch so that we do not show the ripple for a swipe or
- * scroll interaction.
+ * The default value for the typeahead buffer time in Milliseconds.
+ */
+const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200
+const submenuNavKeys = new Set([
+  NavigableKeys.ArrowDown,
+  NavigableKeys.ArrowUp,
+  NavigableKeys.Home,
+  NavigableKeys.End,
+])
+const menuNavKeys = new Set([
+  NavigableKeys.ArrowLeft,
+  NavigableKeys.ArrowRight,
+  ...submenuNavKeys,
+])
+/**
+ * Gets the currently focused element on the page.
+ *
+ * @param activeDoc The document or shadowroot from which to start the search.
+ *    Defaults to `window.document`
+ * @return Returns the currently deeply focused element or `null` if none.
  */
-const TOUCH_DELAY_MS = 150
+function getFocusedElement(activeDoc = document) {
+  let activeEl = activeDoc.activeElement
+  // Check for activeElement in the case that an element with a shadow root host
+  // is currently focused.
+  while (activeEl && activeEl?.shadowRoot?.activeElement) {
+    activeEl = activeEl.shadowRoot.activeElement
+  }
+  return activeEl
+}
 /**
- * A ripple component.
+ * @fires opening Fired before the opening animation begins
+ * @fires opened Fired once the menu is open, after any animations
+ * @fires closing Fired before the closing animation begins
+ * @fires closed Fired once the menu is closed, after any animations
  */
-class Ripple extends s$1 {
+class Menu extends s$9 {
+  /**
+   * Whether the menu is animating upwards or downwards when opening. This is
+   * helpful for calculating some animation calculations.
+   */
+  get openDirection() {
+    const menuCornerBlock = this.menuCorner.split('-')[0]
+    return menuCornerBlock === 'start' ? 'DOWN' : 'UP'
+  }
+  /**
+   * The element which the menu should align to. If `anchor` is set to a
+   * non-empty idref string, then `anchorEl` will resolve to the element with
+   * the given id in the same root node. Otherwise, `null`.
+   */
+  get anchorElement() {
+    if (this.anchor) {
+      return this.getRootNode().querySelector(`#${this.anchor}`)
+    }
+    return this.currentAnchorElement
+  }
+  set anchorElement(element) {
+    this.currentAnchorElement = element
+    this.requestUpdate('anchorElement')
+  }
   constructor() {
-    super(...arguments)
+    super()
+    /**
+     * The ID of the element in the same root node in which the menu should align
+     * to. Overrides setting `anchorElement = elementReference`.
+     *
+     * __NOTE__: anchor or anchorElement must either be an HTMLElement or resolve
+     * to an HTMLElement in order for menu to open.
+     */
+    this.anchor = ''
+    /**
+     * Whether the positioning algorithim should calculate relative to the parent
+     * of the anchor element (absolute) or relative to the window (fixed).
+     *
+     * Examples for `position = 'fixed'`:
+     *
+     * - If there is no `position:relative` in the given parent tree and the
+     *   surface is `position:absolute`
+     * - If the surface is `position:fixed`
+     * - If the surface is in the "top layer"
+     * - The anchor and the surface do not share a common `position:relative`
+     *   ancestor
+     *
+     * When using positioning = fixed, in most cases, the menu should position
+     * itself above most other `position:absolute` or `position:fixed` elements
+     * when placed inside of them. e.g. using a menu inside of an `md-dialog`.
+     *
+     * __NOTE__: Fixed menus will not scroll with the page and will be fixed to
+     * the window instead.
+     */
+    this.positioning = 'absolute'
+    /**
+     * Skips the opening and closing animations.
+     */
+    this.quick = false
+    /**
+     * Displays overflow content like a submenu.
+     *
+     * __NOTE__: This may cause adverse effects if you set
+     * `md-menu {max-height:...}`
+     * and have items overflowing items in the "y" direction.
+     */
+    this.hasOverflow = false
+    /**
+     * Opens the menu and makes it visible. Alternative to the `.show()` and
+     * `.close()` methods
+     */
+    this.open = false
+    /**
+     * Offsets the menu's inline alignment from the anchor by the given number in
+     * pixels. This value is direction aware and will follow the LTR / RTL
+     * direction.
+     *
+     * e.g. LTR: positive -> right, negative -> left
+     *      RTL: positive -> left, negative -> right
+     */
+    this.xOffset = 0
+    /**
+     * Offsets the menu's block alignment from the anchor by the given number in
+     * pixels.
+     *
+     * e.g. positive -> down, negative -> up
+     */
+    this.yOffset = 0
+    /**
+     * The max time between the keystrokes of the typeahead menu behavior before
+     * it clears the typeahead buffer.
+     */
+    this.typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME
+    /**
+     * The corner of the anchor which to align the menu in the standard logical
+     * property style of <block>-<inline> e.g. `'end-start'`.
+     *
+     * NOTE: This value may not be respected by the menu positioning algorithm
+     * if the menu would render outisde the viewport.
+     */
+    this.anchorCorner = Corner.END_START
+    /**
+     * The corner of the menu which to align the anchor in the standard logical
+     * property style of <block>-<inline> e.g. `'start-start'`.
+     *
+     * NOTE: This value may not be respected by the menu positioning algorithm
+     * if the menu would render outisde the viewport.
+     */
+    this.menuCorner = Corner.START_START
+    /**
+     * Keeps the user clicks outside the menu.
+     *
+     * NOTE: clicking outside may still cause focusout to close the menu so see
+     * `stayOpenOnFocusout`.
+     */
+    this.stayOpenOnOutsideClick = false
+    /**
+     * Keeps the menu open when focus leaves the menu's composed subtree.
+     *
+     * NOTE: Focusout behavior will stop propagation of the focusout event. Set
+     * this property to true to opt-out of menu's focuout handling altogether.
+     */
+    this.stayOpenOnFocusout = false
+    /**
+     * After closing, does not restore focus to the last focused element before
+     * the menu was opened.
+     */
+    this.skipRestoreFocus = false
+    /**
+     * The element that should be focused by default once opened.
+     *
+     * NOTE: When setting default focus to 'LIST_ROOT', remember to change
+     * `tabindex` to `0` and change md-menu's display to something other than
+     * `display: contents` when necessary.
+     */
+    this.defaultFocus = FocusState.FIRST_ITEM
+    this.typeaheadActive = true
+    /**
+     * Whether or not the current menu is a submenu and should not handle specific
+     * navigation keys.
+     *
+     * @exports
+     */
+    this.isSubmenu = false
+    /**
+     * The event path of the last window pointerdown event.
+     */
+    this.pointerPath = []
+    this.openCloseAnimationSignal = createAnimationSignal()
+    this.listController = new ListController({
+      isItem: maybeItem => {
+        return maybeItem.hasAttribute('md-menu-item')
+      },
+      getPossibleItems: () => this.slotItems,
+      isRtl: () => getComputedStyle(this).direction === 'rtl',
+      deactivateItem: item => {
+        item.selected = false
+        item.tabIndex = -1
+      },
+      activateItem: item => {
+        item.selected = true
+        item.tabIndex = 0
+      },
+      isNavigableKey: key => {
+        if (!this.isSubmenu) {
+          return menuNavKeys.has(key)
+        }
+        const isRtl = getComputedStyle(this).direction === 'rtl'
+        // we want md-submenu to handle the submenu's left/right arrow exit
+        // key so it can close the menu instead of navigate the list.
+        // Therefore we need to include all keys but left/right arrow close
+        // key
+        const arrowOpen = isRtl
+          ? NavigableKeys.ArrowLeft
+          : NavigableKeys.ArrowRight
+        if (key === arrowOpen) {
+          return true
+        }
+        return submenuNavKeys.has(key)
+      },
+    })
+    /**
+     * The element that was focused before the menu opened.
+     */
+    this.lastFocusedElement = null
+    /**
+     * Handles typeahead navigation through the menu.
+     */
+    this.typeaheadController = new TypeaheadController(() => {
+      return {
+        getItems: () => this.items,
+        typeaheadBufferTime: this.typeaheadDelay,
+        active: this.typeaheadActive,
+      }
+    })
+    this.currentAnchorElement = null
+    this.internals = polyfillElementInternalsAria(
+      this,
+      this /* needed for closure */.attachInternals()
+    )
+    /**
+     * Handles positioning the surface and aligning it to the anchor as well as
+     * keeping it in the viewport.
+     */
+    this.menuPositionController = new SurfacePositionController(this, () => {
+      return {
+        anchorCorner: this.anchorCorner,
+        surfaceCorner: this.menuCorner,
+        surfaceEl: this.surfaceEl,
+        anchorEl: this.anchorElement,
+        positioning: this.positioning,
+        isOpen: this.open,
+        xOffset: this.xOffset,
+        yOffset: this.yOffset,
+        onOpen: this.onOpened,
+        beforeClose: this.beforeClose,
+        onClose: this.onClosed,
+        // We can't resize components that have overflow like menus with
+        // submenus because the overflow-y will show menu items / content
+        // outside the bounds of the menu. (to be fixed w/ popover API)
+        repositionStrategy: this.hasOverflow ? 'move' : 'resize',
+      }
+    })
+    this.handleFocusout = async event => {
+      const anchorEl = this.anchorElement
+      // Do not close if we focused out by clicking on the anchor element. We
+      // can't assume anchor buttons can be the related target because of iOS does
+      // not focus buttons.
+      if (
+        this.stayOpenOnFocusout ||
+        !this.open ||
+        this.pointerPath.includes(anchorEl)
+      ) {
+        return
+      }
+      if (event.relatedTarget) {
+        // Don't close the menu if we are switching focus between menu,
+        // md-menu-item, and md-list or if the anchor was click focused.
+        if (
+          isElementInSubtree(event.relatedTarget, this) ||
+          isElementInSubtree(event.relatedTarget, anchorEl)
+        ) {
+          return
+        }
+      } else if (this.pointerPath.includes(this)) {
+        // If menu tabindex == -1 and the user clicks on the menu or a divider, we
+        // want to keep the menu open.
+        return
+      }
+      const oldRestoreFocus = this.skipRestoreFocus
+      // allow focus to continue to the next focused object rather than returning
+      this.skipRestoreFocus = true
+      this.close()
+      // await for close
+      await this.updateComplete
+      // return to previous behavior
+      this.skipRestoreFocus = oldRestoreFocus
+    }
     /**
-     * Disables the ripple.
+     * Saves the last focused element focuses the new element based on
+     * `defaultFocus`, and animates open.
      */
-    this.disabled = false
-    this.hovered = false
-    this.pressed = false
-    this.rippleSize = ''
-    this.rippleScale = ''
-    this.initialSize = 0
-    this.state = State.INACTIVE
-    this.checkBoundsAfterContextMenu = false
-    this.attachableController = new AttachableController(
-      this,
-      this.onControlChange.bind(this)
-    )
-  }
-  get htmlFor() {
-    return this.attachableController.htmlFor
-  }
-  set htmlFor(htmlFor) {
-    this.attachableController.htmlFor = htmlFor
-  }
-  get control() {
-    return this.attachableController.control
+    this.onOpened = async () => {
+      this.lastFocusedElement = getFocusedElement()
+      const items = this.items
+      const activeItemRecord = getActiveItem(items)
+      if (activeItemRecord && this.defaultFocus !== FocusState.NONE) {
+        activeItemRecord.item.tabIndex = -1
+      }
+      let animationAborted = !this.quick
+      if (this.quick) {
+        this.dispatchEvent(new Event('opening'))
+      } else {
+        animationAborted = !!(await this.animateOpen())
+      }
+      // This must come after the opening animation or else it may focus one of
+      // the items before the animation has begun and causes the list to slide
+      // (block-padding-of-the-menu)px at the end of the animation
+      switch (this.defaultFocus) {
+        case FocusState.FIRST_ITEM:
+          const first = getFirstActivatableItem(items)
+          if (first) {
+            first.tabIndex = 0
+            first.focus()
+            await first.updateComplete
+          }
+          break
+        case FocusState.LAST_ITEM:
+          const last = getLastActivatableItem(items)
+          if (last) {
+            last.tabIndex = 0
+            last.focus()
+            await last.updateComplete
+          }
+          break
+        case FocusState.LIST_ROOT:
+          this.focus()
+          break
+        default:
+        case FocusState.NONE:
+          // Do nothing.
+          break
+      }
+      if (!animationAborted) {
+        this.dispatchEvent(new Event('opened'))
+      }
+    }
+    /**
+     * Animates closed.
+     */
+    this.beforeClose = async () => {
+      this.open = false
+      if (!this.skipRestoreFocus) {
+        this.lastFocusedElement?.focus?.()
+      }
+      if (!this.quick) {
+        await this.animateClose()
+      }
+    }
+    /**
+     * Focuses the last focused element.
+     */
+    this.onClosed = () => {
+      if (this.quick) {
+        this.dispatchEvent(new Event('closing'))
+        this.dispatchEvent(new Event('closed'))
+      }
+    }
+    this.onWindowPointerdown = event => {
+      this.pointerPath = event.composedPath()
+    }
+    /**
+     * We cannot listen to window click because Safari on iOS will not bubble a
+     * click event on window if the item clicked is not a "clickable" item such as
+     * <body>
+     */
+    this.onDocumentClick = event => {
+      if (!this.open) {
+        return
+      }
+      const path = event.composedPath()
+      if (
+        !this.stayOpenOnOutsideClick &&
+        !path.includes(this) &&
+        !path.includes(this.anchorElement)
+      ) {
+        this.open = false
+      }
+    }
+    {
+      this.internals.role = 'menu'
+      this.addEventListener('keydown', this.handleKeydown)
+      // Capture so that we can grab the event before it reaches the menu item
+      // istelf. Specifically useful for the case where typeahead encounters a
+      // space and we don't want the menu item to close the menu.
+      this.addEventListener('keydown', this.captureKeydown, { capture: true })
+      this.addEventListener('focusout', this.handleFocusout)
+    }
   }
-  set control(control) {
-    this.attachableController.control = control
+  /**
+   * The menu items associated with this menu. The items must be `MenuItem`s and
+   * have both the `md-menu-item` and `md-list-item` attributes.
+   */
+  get items() {
+    return this.listController.items
   }
-  attach(control) {
-    this.attachableController.attach(control)
+  willUpdate(changed) {
+    if (!changed.has('open')) {
+      return
+    }
+    if (this.open) {
+      this.removeAttribute('aria-hidden')
+      return
+    }
+    this.setAttribute('aria-hidden', 'true')
   }
-  detach() {
-    this.attachableController.detach()
+  update(changed) {
+    if (changed.has('open')) {
+      if (this.open) {
+        this.setUpGlobalEventListeners()
+      } else {
+        this.cleanUpGlobalEventListeners()
+      }
+    }
+    super.update(changed)
   }
   connectedCallback() {
     super.connectedCallback()
-    // Needed for VoiceOver, which will create a "group" if the element is a
-    // sibling to other content.
-    this.setAttribute('aria-hidden', 'true')
+    if (this.open) {
+      this.setUpGlobalEventListeners()
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.cleanUpGlobalEventListeners()
   }
   render() {
-    const classes = {
-      hovered: this.hovered,
-      pressed: this.pressed,
+    return this.renderSurface()
+  }
+  /**
+   * Renders the positionable surface element and its contents.
+   */
+  renderSurface() {
+    return x$1`
+       <div
+          class="menu ${e$c(this.getSurfaceClasses())}"
+          style=${o(this.menuPositionController.surfaceStyles)}>
+        ${this.renderElevation()}
+        <div class="items">
+          <div class="item-padding">
+            ${this.renderMenuItems()}
+          </div>
+        </div>
+       </div>
+     `
+  }
+  /**
+   * Renders the menu items' slot
+   */
+  renderMenuItems() {
+    return x$1`<slot
+        @close-menu=${this.onCloseMenu}
+        @deactivate-items=${this.onDeactivateItems}
+        @request-activation=${this.onRequestActivation}
+        @deactivate-typeahead=${this.handleDeactivateTypeahead}
+        @activate-typeahead=${this.handleActivateTypeahead}
+        @stay-open-on-focusout=${this.handleStayOpenOnFocusout}
+        @close-on-focusout=${this.handleCloseOnFocusout}
+        @slotchange=${this.listController.onSlotchange}></slot>`
+  }
+  /**
+   * Renders the elevation component.
+   */
+  renderElevation() {
+    return x$1`<md-elevation part="elevation"></md-elevation>`
+  }
+  getSurfaceClasses() {
+    return {
+      open: this.open,
+      fixed: this.positioning === 'fixed',
+      'has-overflow': this.hasOverflow,
     }
-    return x`<div class="surface ${e$1(classes)}"></div>`
   }
-  update(changedProps) {
-    if (changedProps.has('disabled') && this.disabled) {
-      this.hovered = false
-      this.pressed = false
+  captureKeydown(event) {
+    if (
+      event.target === this &&
+      !event.defaultPrevented &&
+      isClosableKey(event.code)
+    ) {
+      event.preventDefault()
+      this.close()
     }
-    super.update(changedProps)
+    this.typeaheadController.onKeydown(event)
   }
   /**
-   * TODO(b/269799771): make private
-   * @private only public for slider
+   * Performs the opening animation:
+   *
+   * https://direct.googleplex.com/#/spec/295000003+271060003
+   *
+   * @return A promise that resolve to `true` if the animation was aborted,
+   *     `false` if it was not aborted.
    */
-  handlePointerenter(event) {
-    if (!this.shouldReactToEvent(event)) {
-      return
+  async animateOpen() {
+    const surfaceEl = this.surfaceEl
+    const slotEl = this.slotEl
+    if (!surfaceEl || !slotEl) return true
+    const openDirection = this.openDirection
+    this.dispatchEvent(new Event('opening'))
+    // needs to be imperative because we don't want to mix animation and Lit
+    // render timing
+    surfaceEl.classList.toggle('animating', true)
+    const signal = this.openCloseAnimationSignal.start()
+    const height = surfaceEl.offsetHeight
+    const openingUpwards = openDirection === 'UP'
+    const children = this.items
+    const FULL_DURATION = 500
+    const SURFACE_OPACITY_DURATION = 50
+    const ITEM_OPACITY_DURATION = 250
+    // We want to fit every child fade-in animation within the full duration of
+    // the animation.
+    const DELAY_BETWEEN_ITEMS =
+      (FULL_DURATION - ITEM_OPACITY_DURATION) / children.length
+    const surfaceHeightAnimation = surfaceEl.animate(
+      [{ height: '0px' }, { height: `${height}px` }],
+      {
+        duration: FULL_DURATION,
+        easing: EASING.EMPHASIZED,
+      }
+    )
+    // When we are opening upwards, we want to make sure the last item is always
+    // in view, so we need to translate it upwards the opposite direction of the
+    // height animation
+    const upPositionCorrectionAnimation = slotEl.animate(
+      [
+        { transform: openingUpwards ? `translateY(-${height}px)` : '' },
+        { transform: '' },
+      ],
+      { duration: FULL_DURATION, easing: EASING.EMPHASIZED }
+    )
+    const surfaceOpacityAnimation = surfaceEl.animate(
+      [{ opacity: 0 }, { opacity: 1 }],
+      SURFACE_OPACITY_DURATION
+    )
+    const childrenAnimations = []
+    for (let i = 0; i < children.length; i++) {
+      // If we are animating upwards, then reverse the children list.
+      const directionalIndex = openingUpwards ? children.length - 1 - i : i
+      const child = children[directionalIndex]
+      const animation = child.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: ITEM_OPACITY_DURATION,
+        delay: DELAY_BETWEEN_ITEMS * i,
+      })
+      // Make them all initially hidden and then clean up at the end of each
+      // animation.
+      child.classList.toggle('md-menu-hidden', true)
+      animation.addEventListener('finish', () => {
+        child.classList.toggle('md-menu-hidden', false)
+      })
+      childrenAnimations.push([child, animation])
     }
-    this.hovered = true
+    let resolveAnimation = value => {}
+    const animationFinished = new Promise(resolve => {
+      resolveAnimation = resolve
+    })
+    signal.addEventListener('abort', () => {
+      surfaceHeightAnimation.cancel()
+      upPositionCorrectionAnimation.cancel()
+      surfaceOpacityAnimation.cancel()
+      childrenAnimations.forEach(([child, animation]) => {
+        child.classList.toggle('md-menu-hidden', false)
+        animation.cancel()
+      })
+      resolveAnimation(true)
+    })
+    surfaceHeightAnimation.addEventListener('finish', () => {
+      surfaceEl.classList.toggle('animating', false)
+      this.openCloseAnimationSignal.finish()
+      resolveAnimation(false)
+    })
+    return await animationFinished
   }
   /**
-   * TODO(b/269799771): make private
-   * @private only public for slider
+   * Performs the closing animation:
+   *
+   * https://direct.googleplex.com/#/spec/295000003+271060003
    */
-  handlePointerleave(event) {
-    if (!this.shouldReactToEvent(event)) {
-      return
+  animateClose() {
+    let resolve
+    let reject
+    // This promise blocks the surface position controller from setting
+    // display: none on the surface which will interfere with this animation.
+    const animationEnded = new Promise((res, rej) => {
+      resolve = res
+      reject = rej
+    })
+    const surfaceEl = this.surfaceEl
+    const slotEl = this.slotEl
+    if (!surfaceEl || !slotEl) {
+      reject()
+      return animationEnded
     }
-    this.hovered = false
-    // release a held mouse or pen press that moves outside the element
-    if (this.state !== State.INACTIVE) {
-      this.endPressAnimation()
+    const openDirection = this.openDirection
+    const closingDownwards = openDirection === 'UP'
+    this.dispatchEvent(new Event('closing'))
+    // needs to be imperative because we don't want to mix animation and Lit
+    // render timing
+    surfaceEl.classList.toggle('animating', true)
+    const signal = this.openCloseAnimationSignal.start()
+    const height = surfaceEl.offsetHeight
+    const children = this.items
+    const FULL_DURATION = 150
+    const SURFACE_OPACITY_DURATION = 50
+    // The surface fades away at the very end
+    const SURFACE_OPACITY_DELAY = FULL_DURATION - SURFACE_OPACITY_DURATION
+    const ITEM_OPACITY_DURATION = 50
+    const ITEM_OPACITY_INITIAL_DELAY = 50
+    const END_HEIGHT_PERCENTAGE = 0.35
+    // We want to fit every child fade-out animation within the full duration of
+    // the animation.
+    const DELAY_BETWEEN_ITEMS =
+      (FULL_DURATION - ITEM_OPACITY_INITIAL_DELAY - ITEM_OPACITY_DURATION) /
+      children.length
+    // The mock has the animation shrink to 35%
+    const surfaceHeightAnimation = surfaceEl.animate(
+      [
+        { height: `${height}px` },
+        { height: `${height * END_HEIGHT_PERCENTAGE}px` },
+      ],
+      {
+        duration: FULL_DURATION,
+        easing: EASING.EMPHASIZED_ACCELERATE,
+      }
+    )
+    // When we are closing downwards, we want to make sure the last item is
+    // always in view, so we need to translate it upwards the opposite direction
+    // of the height animation
+    const downPositionCorrectionAnimation = slotEl.animate(
+      [
+        { transform: '' },
+        {
+          transform: closingDownwards
+            ? `translateY(-${height * (1 - END_HEIGHT_PERCENTAGE)}px)`
+            : '',
+        },
+      ],
+      { duration: FULL_DURATION, easing: EASING.EMPHASIZED_ACCELERATE }
+    )
+    const surfaceOpacityAnimation = surfaceEl.animate(
+      [{ opacity: 1 }, { opacity: 0 }],
+      { duration: SURFACE_OPACITY_DURATION, delay: SURFACE_OPACITY_DELAY }
+    )
+    const childrenAnimations = []
+    for (let i = 0; i < children.length; i++) {
+      // If the animation is closing upwards, then reverse the list of
+      // children so that we animate in the opposite direction.
+      const directionalIndex = closingDownwards ? i : children.length - 1 - i
+      const child = children[directionalIndex]
+      const animation = child.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: ITEM_OPACITY_DURATION,
+        delay: ITEM_OPACITY_INITIAL_DELAY + DELAY_BETWEEN_ITEMS * i,
+      })
+      // Make sure the items stay hidden at the end of each child animation.
+      // We clean this up at the end of the overall animation.
+      animation.addEventListener('finish', () => {
+        child.classList.toggle('md-menu-hidden', true)
+      })
+      childrenAnimations.push([child, animation])
     }
+    signal.addEventListener('abort', () => {
+      surfaceHeightAnimation.cancel()
+      downPositionCorrectionAnimation.cancel()
+      surfaceOpacityAnimation.cancel()
+      childrenAnimations.forEach(([child, animation]) => {
+        animation.cancel()
+        child.classList.toggle('md-menu-hidden', false)
+      })
+      reject()
+    })
+    surfaceHeightAnimation.addEventListener('finish', () => {
+      surfaceEl.classList.toggle('animating', false)
+      childrenAnimations.forEach(([child]) => {
+        child.classList.toggle('md-menu-hidden', false)
+      })
+      this.openCloseAnimationSignal.finish()
+      this.dispatchEvent(new Event('closed'))
+      resolve(true)
+    })
+    return animationEnded
   }
-  handlePointerup(event) {
-    if (!this.shouldReactToEvent(event)) {
-      return
-    }
-    if (this.state === State.HOLDING) {
-      this.state = State.WAITING_FOR_CLICK
-      return
-    }
-    if (this.state === State.TOUCH_DELAY) {
-      this.state = State.WAITING_FOR_CLICK
-      this.startPressAnimation(this.rippleStartEvent)
-      return
-    }
+  handleKeydown(event) {
+    // At any key event, the pointer interaction is done so we need to clear our
+    // cached pointerpath. This handles the case where the user clicks on the
+    // anchor, and then hits shift+tab
+    this.pointerPath = []
+    this.listController.handleKeydown(event)
   }
-  async handlePointerdown(event) {
-    if (!this.shouldReactToEvent(event)) {
-      return
-    }
-    this.rippleStartEvent = event
-    if (!this.isTouch(event)) {
-      this.state = State.WAITING_FOR_CLICK
-      this.startPressAnimation(event)
-      return
-    }
-    // after a longpress contextmenu event, an extra `pointerdown` can be
-    // dispatched to the pressed element. Check that the down is within
-    // bounds of the element in this case.
-    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {
-      return
-    }
-    this.checkBoundsAfterContextMenu = false
-    // Wait for a hold after touch delay
-    this.state = State.TOUCH_DELAY
-    await new Promise(resolve => {
-      setTimeout(resolve, TOUCH_DELAY_MS)
-    })
-    if (this.state !== State.TOUCH_DELAY) {
-      return
-    }
-    this.state = State.HOLDING
-    this.startPressAnimation(event)
+  setUpGlobalEventListeners() {
+    document.addEventListener('click', this.onDocumentClick, { capture: true })
+    window.addEventListener('pointerdown', this.onWindowPointerdown)
   }
-  handleClick() {
-    // Click is a MouseEvent in Firefox and Safari, so we cannot use
-    // `shouldReactToEvent`
-    if (this.disabled) {
-      return
-    }
-    if (this.state === State.WAITING_FOR_CLICK) {
-      this.endPressAnimation()
-      return
-    }
-    if (this.state === State.INACTIVE) {
-      // keyboard synthesized click event
-      this.startPressAnimation()
-      this.endPressAnimation()
-    }
+  cleanUpGlobalEventListeners() {
+    document.removeEventListener('click', this.onDocumentClick, {
+      capture: true,
+    })
+    window.removeEventListener('pointerdown', this.onWindowPointerdown)
   }
-  handlePointercancel(event) {
-    if (!this.shouldReactToEvent(event)) {
-      return
-    }
-    this.endPressAnimation()
+  onCloseMenu() {
+    this.close()
   }
-  handleContextmenu() {
-    if (this.disabled) {
-      return
-    }
-    this.checkBoundsAfterContextMenu = true
-    this.endPressAnimation()
+  onDeactivateItems(event) {
+    event.stopPropagation()
+    this.listController.onDeactivateItems()
   }
-  determineRippleSize() {
-    const { height, width } = this.getBoundingClientRect()
-    const maxDim = Math.max(height, width)
-    const softEdgeSize = Math.max(
-      SOFT_EDGE_CONTAINER_RATIO * maxDim,
-      SOFT_EDGE_MINIMUM_SIZE
-    )
-    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
-    const hypotenuse = Math.sqrt(width ** 2 + height ** 2)
-    const maxRadius = hypotenuse + PADDING$1
-    this.initialSize = initialSize
-    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
-    this.rippleSize = `${initialSize}px`
+  onRequestActivation(event) {
+    event.stopPropagation()
+    this.listController.onRequestActivation(event)
   }
-  getNormalizedPointerEventCoords(pointerEvent) {
-    const { scrollX, scrollY } = window
-    const { left, top } = this.getBoundingClientRect()
-    const documentX = scrollX + left
-    const documentY = scrollY + top
-    const { pageX, pageY } = pointerEvent
-    return { x: pageX - documentX, y: pageY - documentY }
+  handleDeactivateTypeahead(event) {
+    // stopPropagation so that this does not deactivate any typeaheads in menus
+    // nested above it e.g. md-sub-menu
+    event.stopPropagation()
+    this.typeaheadActive = false
   }
-  getTranslationCoordinates(positionEvent) {
-    const { height, width } = this.getBoundingClientRect()
-    // end in the center
-    const endPoint = {
-      x: (width - this.initialSize) / 2,
-      y: (height - this.initialSize) / 2,
-    }
-    let startPoint
-    if (positionEvent instanceof PointerEvent) {
-      startPoint = this.getNormalizedPointerEventCoords(positionEvent)
-    } else {
-      startPoint = {
-        x: width / 2,
-        y: height / 2,
-      }
-    }
-    // center around start point
-    startPoint = {
-      x: startPoint.x - this.initialSize / 2,
-      y: startPoint.y - this.initialSize / 2,
-    }
-    return { startPoint, endPoint }
+  handleActivateTypeahead(event) {
+    // stopPropagation so that this does not activate any typeaheads in menus
+    // nested above it e.g. md-sub-menu
+    event.stopPropagation()
+    this.typeaheadActive = true
   }
-  startPressAnimation(positionEvent) {
-    if (!this.mdRoot) {
-      return
-    }
-    this.pressed = true
-    this.growAnimation?.cancel()
-    this.determineRippleSize()
-    const { startPoint, endPoint } = this.getTranslationCoordinates(
-      positionEvent
-    )
-    const translateStart = `${startPoint.x}px, ${startPoint.y}px`
-    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
-    this.growAnimation = this.mdRoot.animate(
-      {
-        top: [0, 0],
-        left: [0, 0],
-        height: [this.rippleSize, this.rippleSize],
-        width: [this.rippleSize, this.rippleSize],
-        transform: [
-          `translate(${translateStart}) scale(1)`,
-          `translate(${translateEnd}) scale(${this.rippleScale})`,
-        ],
-      },
-      {
-        pseudoElement: PRESS_PSEUDO,
-        duration: PRESS_GROW_MS,
-        easing: EASING.STANDARD,
-        fill: ANIMATION_FILL,
-      }
-    )
+  handleStayOpenOnFocusout(event) {
+    event.stopPropagation()
+    this.stayOpenOnFocusout = true
   }
-  async endPressAnimation() {
-    this.state = State.INACTIVE
-    const animation = this.growAnimation
-    let pressAnimationPlayState = Infinity
-    if (typeof animation?.currentTime === 'number') {
-      pressAnimationPlayState = animation.currentTime
-    } else if (animation?.currentTime) {
-      pressAnimationPlayState = animation.currentTime.to('ms').value
-    }
-    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
-      this.pressed = false
-      return
-    }
-    await new Promise(resolve => {
-      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)
+  handleCloseOnFocusout(event) {
+    event.stopPropagation()
+    this.stayOpenOnFocusout = false
+  }
+  close() {
+    this.open = false
+    const maybeSubmenu = this.slotItems
+    maybeSubmenu.forEach(item => {
+      item.close?.()
     })
-    if (this.growAnimation !== animation) {
-      // A new press animation was started. The old animation was canceled and
-      // should not finish the pressed state.
-      return
-    }
-    this.pressed = false
+  }
+  show() {
+    this.open = true
   }
   /**
-   * Returns `true` if
-   *  - the ripple element is enabled
-   *  - the pointer is primary for the input type
-   *  - the pointer is the pointer that started the interaction, or will start
-   * the interaction
-   *  - the pointer is a touch, or the pointer state has the primary button
-   * held, or the pointer is hovering
+   * Activates the next item in the menu. If at the end of the menu, the first
+   * item will be activated.
+   *
+   * @return The activated menu item or `null` if there are no items.
    */
-  shouldReactToEvent(event) {
-    if (this.disabled || !event.isPrimary) {
-      return false
-    }
-    if (
-      this.rippleStartEvent &&
-      this.rippleStartEvent.pointerId !== event.pointerId
-    ) {
-      return false
-    }
-    if (event.type === 'pointerenter' || event.type === 'pointerleave') {
-      return !this.isTouch(event)
-    }
-    const isPrimaryButton = event.buttons === 1
-    return this.isTouch(event) || isPrimaryButton
+  activateNextItem() {
+    return this.listController.activateNextItem() ?? null
   }
   /**
-   * Check if the event is within the bounds of the element.
+   * Activates the previous item in the menu. If at the start of the menu, the
+   * last item will be activated.
    *
-   * This is only needed for the "stuck" contextmenu longpress on Chrome.
+   * @return The activated menu item or `null` if there are no items.
    */
-  inBounds({ x, y }) {
-    const { top, left, bottom, right } = this.getBoundingClientRect()
-    return x >= left && x <= right && y >= top && y <= bottom
-  }
-  isTouch({ pointerType }) {
-    return pointerType === 'touch'
-  }
-  /** @private */
-  async handleEvent(event) {
-    switch (event.type) {
-      case 'click':
-        this.handleClick()
-        break
-      case 'contextmenu':
-        this.handleContextmenu()
-        break
-      case 'pointercancel':
-        this.handlePointercancel(event)
-        break
-      case 'pointerdown':
-        await this.handlePointerdown(event)
-        break
-      case 'pointerenter':
-        this.handlePointerenter(event)
-        break
-      case 'pointerleave':
-        this.handlePointerleave(event)
-        break
-      case 'pointerup':
-        this.handlePointerup(event)
-        break
-    }
-  }
-  onControlChange(prev, next) {
-    for (const event of EVENTS) {
-      prev?.removeEventListener(event, this)
-      next?.addEventListener(event, this)
-    }
+  activatePreviousItem() {
+    return this.listController.activatePreviousItem() ?? null
   }
 }
+;(() => {
+  // We want to manage tabindex ourselves.
+  setupHostAria(Menu, { focusable: false })
+})()
+__decorate([e$g('.menu')], Menu.prototype, 'surfaceEl', void 0)
+__decorate([e$g('slot')], Menu.prototype, 'slotEl', void 0)
+__decorate([n$b()], Menu.prototype, 'anchor', void 0)
+__decorate([n$b()], Menu.prototype, 'positioning', void 0)
+__decorate([n$b({ type: Boolean })], Menu.prototype, 'quick', void 0)
+__decorate(
+  [n$b({ type: Boolean, attribute: 'has-overflow' })],
+  Menu.prototype,
+  'hasOverflow',
+  void 0
+)
+__decorate(
+  [n$b({ type: Boolean, reflect: true })],
+  Menu.prototype,
+  'open',
+  void 0
+)
+__decorate(
+  [n$b({ type: Number, attribute: 'x-offset' })],
+  Menu.prototype,
+  'xOffset',
+  void 0
+)
+__decorate(
+  [n$b({ type: Number, attribute: 'y-offset' })],
+  Menu.prototype,
+  'yOffset',
+  void 0
+)
+__decorate(
+  [n$b({ type: Number, attribute: 'typeahead-delay' })],
+  Menu.prototype,
+  'typeaheadDelay',
+  void 0
+)
+__decorate(
+  [n$b({ attribute: 'anchor-corner' })],
+  Menu.prototype,
+  'anchorCorner',
+  void 0
+)
+__decorate(
+  [n$b({ attribute: 'menu-corner' })],
+  Menu.prototype,
+  'menuCorner',
+  void 0
+)
+__decorate(
+  [n$b({ type: Boolean, attribute: 'stay-open-on-outside-click' })],
+  Menu.prototype,
+  'stayOpenOnOutsideClick',
+  void 0
+)
+__decorate(
+  [n$b({ type: Boolean, attribute: 'stay-open-on-focusout' })],
+  Menu.prototype,
+  'stayOpenOnFocusout',
+  void 0
+)
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
-  Ripple.prototype,
-  'disabled',
+  [n$b({ type: Boolean, attribute: 'skip-restore-focus' })],
+  Menu.prototype,
+  'skipRestoreFocus',
+  void 0
+)
+__decorate(
+  [n$b({ attribute: 'default-focus' })],
+  Menu.prototype,
+  'defaultFocus',
   void 0
 )
-__decorate([r$3()], Ripple.prototype, 'hovered', void 0)
-__decorate([r$3()], Ripple.prototype, 'pressed', void 0)
-__decorate([e$5('.surface')], Ripple.prototype, 'mdRoot', void 0)
+__decorate([o$c({ flatten: true })], Menu.prototype, 'slotItems', void 0)
+__decorate([r$8()], Menu.prototype, 'typeaheadActive', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$7 = i$4`:host{--_hover-color: var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-opacity: var(--md-ripple-hover-opacity, 0.08);--_pressed-color: var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-opacity: var(--md-ripple-pressed-opacity, 0.12);display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--_hover-color);inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--_pressed-color) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.pressed::after{opacity:var(--_pressed-opacity);transition-duration:105ms}/*# sourceMappingURL=ripple-styles.css.map */
+const styles$7 = i$8`:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow .items{overflow:visible}.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
 `
 
 /**
@@ -8533,21 +9986,57 @@ const styles$7 = i$4`:host{--_hover-color: var(--md-ripple-hover-color, var(--md
  * SPDX-License-Identifier: Apache-2.0
  */
 /**
- * @summary Ripples, also known as state layers, are visual indicators used to
- * communicate the status of a component or interactive element.
+ * @summary Menus display a list of choices on a temporary surface.
  *
- * @description A state layer is a semi-transparent covering on an element that
- * indicates its state. State layers provide a systematic approach to
- * visualizing states by using opacity. A layer can be applied to an entire
- * element or in a circular shape and only one state layer can be applied at a
- * given time.
+ * @description
+ * Menus appear when users interact with a button, action, or other control.
+ *
+ * They can be opened from a variety of elements, most commonly icon buttons,
+ * buttons, and text fields.
+ *
+ * md-menu listens for the `close-menu` and `deselect-items` events.
+ *
+ * - `close-menu` closes the menu when dispatched from a child element.
+ * - `deselect-items` deselects all of its immediate menu-item children.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       id="anchor"
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
+ *   -->
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
  *
  * @final
  * @suppress {visibility}
  */
-let MdRipple = class MdRipple extends Ripple {}
-MdRipple.styles = [styles$7]
-MdRipple = __decorate([t$3('md-ripple')], MdRipple)
+let MdMenu = class MdMenu extends Menu {}
+MdMenu.styles = [styles$7]
+MdMenu = __decorate([t$9('md-menu')], MdMenu)
 
 /**
  * @license
@@ -8557,7 +10046,7 @@ MdRipple = __decorate([t$3('md-ripple')], MdRipple)
 /**
  * An item layout component.
  */
-class Item extends s$1 {
+class Item extends s$9 {
   constructor() {
     super(...arguments)
     /**
@@ -8570,7 +10059,7 @@ class Item extends s$1 {
     this.multiline = false
   }
   render() {
-    return x`
+    return x$1`
       <slot name="container"></slot>
       <slot class="non-text" name="start"></slot>
       <div class="text">
@@ -8605,12 +10094,12 @@ class Item extends s$1 {
   }
 }
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
+  [n$b({ type: Boolean, reflect: true })],
   Item.prototype,
   'multiline',
   void 0
 )
-__decorate([r$2('.text slot')], Item.prototype, 'textSlots', void 0)
+__decorate([r$7('.text slot')], Item.prototype, 'textSlots', void 0)
 function slotHasContent(slot) {
   for (const node of slot.assignedNodes({ flatten: true })) {
     // Assume there's content if there's an element slotted in
@@ -8631,7 +10120,7 @@ function slotHasContent(slot) {
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$6 = i$4`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */
+const styles$6 = i$8`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */
 `
 
 /**
@@ -8697,104 +10186,7 @@ const styles$6 = i$4`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-fa
  */
 let MdItem = class MdItem extends Item {}
 MdItem.styles = [styles$6]
-MdItem = __decorate([t$3('md-item')], MdItem)
-
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */ const e = Symbol.for(''),
-  o = t => {
-    if (t?.r === e) return t?._$litStatic$
-  },
-  s = (t, ...r) => ({
-    _$litStatic$: r.reduce(
-      (r, e, o) =>
-        r +
-        (t => {
-          if (void 0 !== t._$litStatic$) return t._$litStatic$
-          throw Error(
-            `Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`
-          )
-        })(e) +
-        t[o + 1],
-      t[0]
-    ),
-    r: e,
-  }),
-  a = new Map(),
-  l = t => (r, ...e) => {
-    const i = e.length
-    let s, l
-    const n = [],
-      u = []
-    let c,
-      $ = 0,
-      f = !1
-    for (; $ < i; ) {
-      for (c = r[$]; $ < i && void 0 !== ((l = e[$]), (s = o(l))); )
-        (c += s + r[++$]), (f = !0)
-      $ !== i && u.push(l), n.push(c), $++
-    }
-    if (($ === i && n.push(r[i]), f)) {
-      const t = n.join('$$lit$$')
-      void 0 === (r = a.get(t)) && ((n.raw = n), a.set(t, (r = n))), (e = u)
-    }
-    return t(r, ...e)
-  },
-  n = l(x)
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Sets up a `ReactiveElement` constructor to enable updates when delegating
- * aria attributes. Elements may bind `this.aria*` properties to `aria-*`
- * attributes in their render functions.
- *
- * This function will:
- * - Call `requestUpdate()` when an aria attribute changes.
- * - Add `role="presentation"` to the host.
- *
- * NOTE: The following features are not currently supported:
- * - Delegating IDREF attributes (ex: `aria-labelledby`, `aria-controls`)
- * - Delegating the `role` attribute
- *
- * @example
- * class XButton extends LitElement {
- *   static {
- *     requestUpdateOnAriaChange(XButton);
- *   }
- *
- *   protected override render() {
- *     return html`
- *       <button aria-label=${this.ariaLabel || nothing}>
- *         <slot></slot>
- *       </button>
- *     `;
- *   }
- * }
- *
- * @param ctor The `ReactiveElement` constructor to patch.
- */
-function requestUpdateOnAriaChange(ctor) {
-  for (const ariaProperty of ARIA_PROPERTIES) {
-    ctor.createProperty(ariaProperty, {
-      attribute: ariaPropertyToAttribute(ariaProperty),
-      reflect: true,
-    })
-  }
-  ctor.addInitializer(element => {
-    const controller = {
-      hostConnected() {
-        element.setAttribute('role', 'presentation')
-      },
-    }
-    element.addController(controller)
-  })
-}
+MdItem = __decorate([t$9('md-item')], MdItem)
 
 /**
  * @license
@@ -8917,7 +10309,7 @@ class MenuItemController {
 /**
  * @fires close-menu {CloseMenuEvent}
  */
-class MenuItemEl extends s$1 {
+class MenuItemEl extends s$9 {
   constructor() {
     super(...arguments)
     /**
@@ -8963,7 +10355,7 @@ class MenuItemEl extends s$1 {
     this.menuItemController.setTypeaheadText(text)
   }
   render() {
-    return this.renderListItem(x`
+    return this.renderListItem(x$1`
       <md-item>
         <div slot="container">
           ${this.renderRipple()}
@@ -8985,31 +10377,31 @@ class MenuItemEl extends s$1 {
     let tag
     switch (this.menuItemController.tagName) {
       case 'a':
-        tag = s`a`
+        tag = s$8`a`
         break
       case 'button':
-        tag = s`button`
+        tag = s$8`button`
         break
       default:
       case 'li':
-        tag = s`li`
+        tag = s$8`li`
         break
     }
     // TODO(b/265339866): announce "button"/"link" inside of a list item. Until
     // then all are "menuitem" roles for correct announcement.
-    const target = isAnchor && !!this.target ? this.target : T
-    return n`
+    const target = isAnchor && !!this.target ? this.target : T$1
+    return n$9`
       <${tag}
         id="item"
         tabindex=${this.disabled && !isAnchor ? -1 : 0}
         role=${this.menuItemController.role}
-        aria-label=${this.ariaLabel || T}
-        aria-selected=${this.ariaSelected || T}
-        aria-checked=${this.ariaChecked || T}
-        aria-expanded=${this.ariaExpanded || T}
-        aria-haspopup=${this.ariaHasPopup || T}
-        class="list-item ${e$1(this.getRenderClasses())}"
-        href=${this.href || T}
+        aria-label=${this.ariaLabel || T$1}
+        aria-selected=${this.ariaSelected || T$1}
+        aria-checked=${this.ariaChecked || T$1}
+        aria-expanded=${this.ariaExpanded || T$1}
+        aria-haspopup=${this.ariaHasPopup || T$1}
+        class="list-item ${e$c(this.getRenderClasses())}"
+        href=${this.href || T$1}
         target=${target}
         @click=${this.menuItemController.onClick}
         @keydown=${this.menuItemController.onKeydown}
@@ -9020,7 +10412,7 @@ class MenuItemEl extends s$1 {
    * Handles rendering of the ripple element.
    */
   renderRipple() {
-    return x`
+    return x$1`
       <md-ripple
           part="ripple"
           for="item"
@@ -9030,7 +10422,7 @@ class MenuItemEl extends s$1 {
    * Handles rendering of the focus ring.
    */
   renderFocusRing() {
-    return x`
+    return x$1`
       <md-focus-ring
           part="focus-ring"
           for="item"
@@ -9049,7 +10441,7 @@ class MenuItemEl extends s$1 {
    * Handles rendering the headline and supporting text.
    */
   renderBody() {
-    return x`
+    return x$1`
       <slot></slot>
       <slot name="overline" slot="overline"></slot>
       <slot name="headline" slot="headline"></slot>
@@ -9069,34 +10461,34 @@ class MenuItemEl extends s$1 {
 })()
 /** @nocollapse */
 MenuItemEl.shadowRootOptions = {
-  ...s$1.shadowRootOptions,
+  ...s$9.shadowRootOptions,
   delegatesFocus: true,
 }
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
+  [n$b({ type: Boolean, reflect: true })],
   MenuItemEl.prototype,
   'disabled',
   void 0
 )
-__decorate([n$3()], MenuItemEl.prototype, 'type', void 0)
-__decorate([n$3()], MenuItemEl.prototype, 'href', void 0)
-__decorate([n$3()], MenuItemEl.prototype, 'target', void 0)
+__decorate([n$b()], MenuItemEl.prototype, 'type', void 0)
+__decorate([n$b()], MenuItemEl.prototype, 'href', void 0)
+__decorate([n$b()], MenuItemEl.prototype, 'target', void 0)
 __decorate(
-  [n$3({ type: Boolean, attribute: 'keep-open' })],
+  [n$b({ type: Boolean, attribute: 'keep-open' })],
   MenuItemEl.prototype,
   'keepOpen',
   void 0
 )
-__decorate([n$3({ type: Boolean })], MenuItemEl.prototype, 'selected', void 0)
-__decorate([e$5('.list-item')], MenuItemEl.prototype, 'listItemRoot', void 0)
+__decorate([n$b({ type: Boolean })], MenuItemEl.prototype, 'selected', void 0)
+__decorate([e$g('.list-item')], MenuItemEl.prototype, 'listItemRoot', void 0)
 __decorate(
-  [o$3({ slot: 'headline' })],
+  [o$c({ slot: 'headline' })],
   MenuItemEl.prototype,
   'headlineElements',
   void 0
 )
 __decorate(
-  [n$3({ attribute: 'typeahead-text' })],
+  [n$b({ attribute: 'typeahead-text' })],
   MenuItemEl.prototype,
   'typeaheadText',
   null
@@ -9107,7 +10499,7 @@ __decorate(
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$5 = i$4`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */
+const styles$5 = i$8`:host{display:flex;--md-ripple-hover-color: var(--md-menu-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-menu-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-menu-item-pressed-state-layer-opacity, 0.12)}:host([disabled]){opacity:var(--md-menu-item-disabled-opacity, 0.3);pointer-events:none}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.list-item:not(.disabled){cursor:pointer}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;color:var(--md-menu-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-menu-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-menu-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-menu-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-menu-item-one-line-container-height, 56px);padding-top:var(--md-menu-item-top-space, 12px);padding-bottom:var(--md-menu-item-bottom-space, 12px);padding-inline-start:var(--md-menu-item-leading-space, 16px);padding-inline-end:var(--md-menu-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-menu-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-menu-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-menu-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-menu-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-menu-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-menu-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-menu-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}.list-item.selected{background-color:var(--md-menu-item-selected-container-color, var(--md-sys-color-secondary-container, #e8def8))}.selected:not(.disabled) ::slotted(*){color:var(--md-menu-item-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b))}@media(forced-colors: active){:host([disabled]),:host([disabled]) slot{color:GrayText;opacity:1}.list-item{position:relative}.list-item.selected::before{content:"";position:absolute;inset:0;box-sizing:border-box;border-radius:inherit;pointer-events:none;border:3px double CanvasText}}/*# sourceMappingURL=menu-item-styles.css.map */
 `
 
 /**
@@ -9132,19 +10524,19 @@ const styles$5 = i$4`:host{display:flex;--md-ripple-hover-color: var(--md-menu-i
  */
 let MdMenuItem = class MdMenuItem extends MenuItemEl {}
 MdMenuItem.styles = [styles$5]
-MdMenuItem = __decorate([t$3('md-menu-item')], MdMenuItem)
+MdMenuItem = __decorate([t$9('md-menu-item')], MdMenuItem)
 
-let LayerSettings = class LayerSettings extends s$8 {
+let LayerSettings = class LayerSettings extends s$4 {
   constructor() {
     super(...arguments)
     this.name = ''
     this.otherImages = []
     this.enable = true
-    this.menuRef = e$9()
-    this.anchorRef = e$9()
+    this.menuRef = e()
+    this.anchorRef = e()
     // avoid overflow: hidden on parents clipping menu
     this.floatingAnchor = makeHtml(`<div class="${style.floater}"></div>`)
-    this.stateService = new s$6(this, viewerContext, undefined, true)
+    this.stateService = new s$2(this, viewerContext, undefined, true)
   }
   connectedCallback() {
     super.connectedCallback()
@@ -9198,7 +10590,7 @@ let LayerSettings = class LayerSettings extends s$8 {
         })
   }
   render() {
-    return y$2`
+    return y`
       <div
         @click=${() => {
           this.showMenu()
@@ -9207,11 +10599,11 @@ let LayerSettings = class LayerSettings extends s$8 {
         class=${this.enable ? 'clickable' : ''}
       >
         <slot></slot>
-        <div ${n$6(this.anchorRef)} style="position:relative; z-index: 4000;">
-          <md-menu ${n$6(this.menuRef)} style="min-width: 280px;">
-            ${o$7(
+        <div ${n$1(this.anchorRef)} style="position:relative; z-index: 4000;">
+          <md-menu ${n$1(this.menuRef)} style="min-width: 280px;">
+            ${o$1(
               this.otherImages,
-              name => y$2`
+              name => y`
                   <md-menu-item
                     @click=${() => this.compareWith(name, 'checkerboard')}
                   >
@@ -9258,17 +10650,17 @@ let LayerSettings = class LayerSettings extends s$8 {
     `
   }
 }
-LayerSettings.styles = i$8`
+LayerSettings.styles = i$4`
     .clickable {
       cursor: pointer;
     }
   `
-__decorate([e$f()], LayerSettings.prototype, 'name', void 0)
-__decorate([e$f()], LayerSettings.prototype, 'otherImages', void 0)
-__decorate([e$f()], LayerSettings.prototype, 'enable', void 0)
-LayerSettings = __decorate([e$g('layer-settings')], LayerSettings)
+__decorate([e$6()], LayerSettings.prototype, 'name', void 0)
+__decorate([e$6()], LayerSettings.prototype, 'otherImages', void 0)
+__decorate([e$6()], LayerSettings.prototype, 'enable', void 0)
+LayerSettings = __decorate([e$7('layer-settings')], LayerSettings)
 
-let LayerIcon = class LayerIcon extends s$8 {
+let LayerIcon = class LayerIcon extends s$4 {
   constructor() {
     super(...arguments)
     this.layer = { type: 'image' }
@@ -9316,7 +10708,7 @@ let LayerIcon = class LayerIcon extends s$8 {
   render() {
     const { icon, alt } = this.getIcon()
     const settingsPossible = alt === 'settings'
-    return y$2`
+    return y`
       <div>
         <layer-settings
           .name=${this.name}
@@ -9329,7 +10721,7 @@ let LayerIcon = class LayerIcon extends s$8 {
     `
   }
 }
-LayerIcon.styles = i$8`
+LayerIcon.styles = i$4`
     .icon {
       height: 1.2em;
       width: 1.2em;
@@ -9339,10 +10731,10 @@ LayerIcon.styles = i$8`
       padding-right: 6px;
     }
   `
-__decorate([e$f()], LayerIcon.prototype, 'layer', void 0)
-__decorate([e$f()], LayerIcon.prototype, 'name', void 0)
-__decorate([t$7()], LayerIcon.prototype, 'settingsOpen', void 0)
-LayerIcon = __decorate([e$g('layer-icon')], LayerIcon)
+__decorate([e$6()], LayerIcon.prototype, 'layer', void 0)
+__decorate([e$6()], LayerIcon.prototype, 'name', void 0)
+__decorate([t$3()], LayerIcon.prototype, 'settingsOpen', void 0)
+LayerIcon = __decorate([e$7('layer-icon')], LayerIcon)
 
 function createLayerEntry(context, name, layer) {
   var layerEntry = document.createElement('div')
@@ -9458,6 +10850,28 @@ function createLayerEntry(context, name, layer) {
   })
 
   // if (context.layers.showSaveRoiButton) {
+
+  var dialog = makeHtml(
+    '\n    <md-dialog class="'.concat(
+      style.saveDialog,
+      '">\n      <div slot="headline">Choose save file format</div>\n      <form id="save-form" slot="content" method="dialog">\n        <label>\n          <md-radio name="pet" value="cats" aria-label="Cats" touch-target="wrapper" checked></md-radio>\n          <span aria-hidden="true">Cats</span>\n        </label>\n        <label>\n          <md-radio name="pet" value="dogs" aria-label="Dogs" touch-target="wrapper"></md-radio>\n          <span aria-hidden="true">Dogs</span>\n        </label>\n        <label>\n          <md-radio name="pet" value="birds" aria-label="Birds" touch-target="wrapper"></md-radio>\n          <span aria-hidden="true">Birds</span>\n        </label>\n      </form>\n      <div slot="actions">\n        <md-text-button form="save-form" value="cancel">Cancel</md-text-button>\n        <md-text-button form="save-form" autofocus value="ok">OK</md-text-button>\n      </div>\n    </md-dialog>\n  '
+    )
+  )
+  imageIcons.appendChild(dialog)
+  dialog.addEventListener('close', function() {
+    var okClicked = dialog.returnValue === 'ok'
+    if (okClicked) {
+      var format = document.querySelector('md-radio[name="pet"]').value
+      console.log('format', format)
+      context.service.send({
+        type: 'DOWNLOAD_IMAGE',
+        data: {
+          name: context.images.selectedName,
+          layerName: name,
+        },
+      })
+    }
+  })
   var downloadImage = document.createElement('div')
   downloadImage.innerHTML = '\n  <input type="checkbox" checked id='
     .concat(context.id, '-download-image" class="')
@@ -9482,17 +10896,8 @@ function createLayerEntry(context, name, layer) {
   downloadImage.addEventListener('click', function(event) {
     event.preventDefault()
     event.stopPropagation()
-    // context.service.send({
-    //   type: 'DOWNLOAD_IMAGE',
-    //   data: {
-    //     name: context.images.selectedName,
-    //     layerName: name,
-    //   },
-    // })
-    console.log('Download image')
+    dialog.show()
   })
-  // }
-
   var icon = makeHtml(
     '<layer-icon class="'.concat(style.layerIcon, '"></layer-icon>')
   )
@@ -25705,7 +27110,7 @@ function toggleDarkMode(context) {
 /**
  * TODO(b/265346501): add docs
  */
-class NavigationDrawer extends s$1 {
+class NavigationDrawer extends s$9 {
   constructor() {
     super(...arguments)
     this.opened = false
@@ -25716,12 +27121,12 @@ class NavigationDrawer extends s$1 {
     const ariaHidden = !this.opened ? 'true' : 'false'
     // Needed for closure conformance
     const { ariaLabel, ariaModal } = this
-    return x`
+    return x$1`
       <div
         aria-expanded="${ariaExpanded}"
         aria-hidden="${ariaHidden}"
-        aria-label=${ariaLabel || T}
-        aria-modal="${ariaModal || T}"
+        aria-label=${ariaLabel || T$1}
+        aria-modal="${ariaModal || T$1}"
         class="md3-navigation-drawer ${this.getRenderClasses()}"
         role="dialog">
         <md-elevation></md-elevation>
@@ -25732,7 +27137,7 @@ class NavigationDrawer extends s$1 {
     `
   }
   getRenderClasses() {
-    return e$1({
+    return e$c({
       'md3-navigation-drawer--opened': this.opened,
       'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',
     })
@@ -25755,19 +27160,19 @@ class NavigationDrawer extends s$1 {
   requestUpdateOnAriaChange(NavigationDrawer)
 })()
 __decorate(
-  [n$3({ type: Boolean })],
+  [n$b({ type: Boolean })],
   NavigationDrawer.prototype,
   'opened',
   void 0
 )
-__decorate([n$3()], NavigationDrawer.prototype, 'pivot', void 0)
+__decorate([n$b()], NavigationDrawer.prototype, 'pivot', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$4 = i$4`:host{--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-shape: var(--md-navigation-drawer-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level: var(--_standard-container-elevation);--md-elevation-shadow-color: var(--_divider-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
+const styles$4 = i$8`:host{--_container-color: var(--md-navigation-drawer-container-color, #fff);--_container-height: var(--md-navigation-drawer-container-height, 100%);--_container-shape: var(--md-navigation-drawer-container-shape, 0 16px 16px 0);--_container-width: var(--md-navigation-drawer-container-width, 360px);--_divider-color: var(--md-navigation-drawer-divider-color, #000);--_modal-container-elevation: var(--md-navigation-drawer-modal-container-elevation, 1);--_standard-container-elevation: var(--md-navigation-drawer-standard-container-elevation, 0);--md-elevation-level: var(--_standard-container-elevation);--md-elevation-shadow-color: var(--_divider-color)}:host{display:flex}.md3-navigation-drawer{inline-size:0;box-sizing:border-box;display:flex;justify-content:flex-end;overflow:hidden;overflow-y:auto;visibility:hidden;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) .25s}md-elevation{z-index:0}.md3-navigation-drawer--opened{visibility:visible;transition:inline-size .25s cubic-bezier(0.4, 0, 0.2, 1) 0s,visibility 0s cubic-bezier(0.4, 0, 0.2, 1) 0s}.md3-navigation-drawer--pivot-at-start{justify-content:flex-start}.md3-navigation-drawer__slot-content{display:flex;flex-direction:column;position:relative}/*# sourceMappingURL=navigation-drawer-styles.css.map */
 `
 
 /**
@@ -25775,7 +27180,7 @@ const styles$4 = i$4`:host{--_container-color: var(--md-navigation-drawer-contai
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$3 = i$4`.md3-navigation-drawer-modal{background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{inline-size:var(--_container-width)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}/*# sourceMappingURL=shared-styles.css.map */
+const styles$3 = i$8`.md3-navigation-drawer-modal{background-color:var(--_container-color);border-radius:var(--_container-shape);height:var(--_container-height)}.md3-navigation-drawer-modal.md3-navigation-drawer-modal--opened{inline-size:var(--_container-width)}.md3-navigation-drawer-modal .md3-navigation-drawer-modal__slot-content{min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}/*# sourceMappingURL=shared-styles.css.map */
 `
 
 /**
@@ -25790,119 +27195,25 @@ const styles$3 = i$4`.md3-navigation-drawer-modal{background-color:var(--_contai
 let MdNavigationDrawer = class MdNavigationDrawer extends NavigationDrawer {}
 MdNavigationDrawer.styles = [styles$3, styles$4]
 MdNavigationDrawer = __decorate(
-  [t$3('md-navigation-drawer')],
+  [t$9('md-navigation-drawer')],
   MdNavigationDrawer
 )
 
-let ServiceContext = class ServiceContext extends s$8 {
+let ServiceContext = class ServiceContext extends s$4 {
   constructor() {
     super(...arguments)
     // @ts-ignore
-    this.provider = new e$e(this, viewerContext, {
+    this.provider = new e$5(this, viewerContext, {
       service: appContext.service,
     })
   }
   render() {
-    return y$2`
+    return y`
       <slot></slot>
     `
   }
 }
-ServiceContext = __decorate([e$g('service-context')], ServiceContext)
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A unique symbol used for protected access to an instance's
- * `ElementInternals`.
- *
- * @example
- * ```ts
- * class MyElement extends LitElement {
- *   static formAssociated = true;
- *
- *   [internals] = this.attachInternals();
- * }
- *
- * function getForm(element: MyElement) {
- *   return element[internals].form;
- * }
- * ```
- */
-const internals = Symbol('internals')
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * Sets up an element's constructor to enable form submission. The element
- * instance should be form associated and have a `type` property.
- *
- * A click listener is added to each element instance. If the click is not
- * default prevented, it will submit the element's form, if any.
- *
- * @example
- * ```ts
- * class MyElement extends LitElement {
- *   static {
- *     setupFormSubmitter(MyElement);
- *   }
- *
- *   static formAssociated = true;
- *
- *   type: FormSubmitterType = 'submit';
- *
- *   [internals] = this.attachInternals();
- * }
- * ```
- *
- * @param ctor The form submitter element's constructor.
- */
-function setupFormSubmitter(ctor) {
-  ctor.addInitializer(instance => {
-    const submitter = instance
-    submitter.addEventListener('click', async event => {
-      const { type, [internals]: elementInternals } = submitter
-      const { form } = elementInternals
-      if (!form || type === 'button') {
-        return
-      }
-      // Wait a microtask for event bubbling to complete.
-      await new Promise(resolve => {
-        resolve()
-      })
-      if (event.defaultPrevented) {
-        return
-      }
-      if (type === 'reset') {
-        form.reset()
-        return
-      }
-      // form.requestSubmit(submitter) does not work with form associated custom
-      // elements. This patches the dispatched submit event to add the correct
-      // `submitter`.
-      // See https://github.com/WICG/webcomponents/issues/814
-      form.addEventListener(
-        'submit',
-        submitEvent => {
-          Object.defineProperty(submitEvent, 'submitter', {
-            configurable: true,
-            enumerable: true,
-            get: () => submitter,
-          })
-        },
-        { capture: true, once: true }
-      )
-      elementInternals.setFormValue(submitter.value)
-      form.requestSubmit()
-    })
-  })
-}
+ServiceContext = __decorate([e$7('service-context')], ServiceContext)
 
 /**
  * @license
@@ -25933,7 +27244,7 @@ function isRtl(el, shouldCheck = true) {
  */
 var _a
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
-class IconButton extends s$1 {
+class IconButton extends s$9 {
   constructor() {
     super(...arguments)
     /**
@@ -26000,31 +27311,31 @@ class IconButton extends s$1 {
     }
   }
   render() {
-    const tag = this.href ? s`div` : s`button`
+    const tag = this.href ? s$8`div` : s$8`button`
     // Needed for closure conformance
     const { ariaLabel, ariaHasPopup, ariaExpanded } = this
     const hasToggledAriaLabel = ariaLabel && this.ariaLabelSelected
-    const ariaPressedValue = !this.toggle ? T : this.selected
-    let ariaLabelValue = T
+    const ariaPressedValue = !this.toggle ? T$1 : this.selected
+    let ariaLabelValue = T$1
     if (!this.href) {
       ariaLabelValue =
         hasToggledAriaLabel && this.selected
           ? this.ariaLabelSelected
           : ariaLabel
     }
-    return n`<${tag}
-        class="icon-button ${e$1(this.getRenderClasses())}"
+    return n$9`<${tag}
+        class="icon-button ${e$c(this.getRenderClasses())}"
         id="button"
-        aria-label="${ariaLabelValue || T}"
-        aria-haspopup="${(!this.href && ariaHasPopup) || T}"
-        aria-expanded="${(!this.href && ariaExpanded) || T}"
+        aria-label="${ariaLabelValue || T$1}"
+        aria-haspopup="${(!this.href && ariaHasPopup) || T$1}"
+        aria-expanded="${(!this.href && ariaExpanded) || T$1}"
         aria-pressed="${ariaPressedValue}"
         ?disabled="${!this.href && this.disabled}"
         @click="${this.handleClick}">
         ${this.renderFocusRing()}
         ${this.renderRipple()}
-        ${!this.selected ? this.renderIcon() : T}
-        ${this.selected ? this.renderSelectedIcon() : T}
+        ${!this.selected ? this.renderIcon() : T$1}
+        ${this.selected ? this.renderSelectedIcon() : T$1}
         ${this.renderTouchTarget()}
         ${this.href && this.renderLink()}
   </${tag}>`
@@ -26032,12 +27343,12 @@ class IconButton extends s$1 {
   renderLink() {
     // Needed for closure conformance
     const { ariaLabel } = this
-    return x`
+    return x$1`
       <a class="link"
         id="link"
         href="${this.href}"
-        target="${this.target || T}"
-        aria-label="${ariaLabel || T}"
+        target="${this.target || T$1}"
+        aria-label="${ariaLabel || T$1}"
       ></a>
     `
   }
@@ -26048,23 +27359,23 @@ class IconButton extends s$1 {
     }
   }
   renderIcon() {
-    return x`<span class="icon"><slot></slot></span>`
+    return x$1`<span class="icon"><slot></slot></span>`
   }
   renderSelectedIcon() {
     // Use default slot as fallback to not require specifying multiple icons
-    return x`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`
+    return x$1`<span class="icon icon--selected"><slot name="selected"><slot></slot></slot></span>`
   }
   renderTouchTarget() {
-    return x`<span class="touch"></span>`
+    return x$1`<span class="touch"></span>`
   }
   renderFocusRing() {
-    return x`<md-focus-ring part="focus-ring" for=${
+    return x$1`<md-focus-ring part="focus-ring" for=${
       this.href ? 'link' : 'button'
     }></md-focus-ring>`
   }
   renderRipple() {
-    return x`<md-ripple
-      for=${this.href ? 'link' : T}
+    return x$1`<md-ripple
+      for=${this.href ? 'link' : T$1}
       ?disabled="${!this.href && this.disabled}"
     ></md-ripple>`
   }
@@ -26097,42 +27408,42 @@ IconButton.formAssociated = true
 /** @nocollapse */
 IconButton.shadowRootOptions = { mode: 'open', delegatesFocus: true }
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
+  [n$b({ type: Boolean, reflect: true })],
   IconButton.prototype,
   'disabled',
   void 0
 )
 __decorate(
-  [n$3({ type: Boolean, attribute: 'flip-icon-in-rtl' })],
+  [n$b({ type: Boolean, attribute: 'flip-icon-in-rtl' })],
   IconButton.prototype,
   'flipIconInRtl',
   void 0
 )
-__decorate([n$3()], IconButton.prototype, 'href', void 0)
-__decorate([n$3()], IconButton.prototype, 'target', void 0)
+__decorate([n$b()], IconButton.prototype, 'href', void 0)
+__decorate([n$b()], IconButton.prototype, 'target', void 0)
 __decorate(
-  [n$3({ attribute: 'aria-label-selected' })],
+  [n$b({ attribute: 'aria-label-selected' })],
   IconButton.prototype,
   'ariaLabelSelected',
   void 0
 )
-__decorate([n$3({ type: Boolean })], IconButton.prototype, 'toggle', void 0)
+__decorate([n$b({ type: Boolean })], IconButton.prototype, 'toggle', void 0)
 __decorate(
-  [n$3({ type: Boolean, reflect: true })],
+  [n$b({ type: Boolean, reflect: true })],
   IconButton.prototype,
   'selected',
   void 0
 )
-__decorate([n$3()], IconButton.prototype, 'type', void 0)
-__decorate([n$3()], IconButton.prototype, 'value', void 0)
-__decorate([r$3()], IconButton.prototype, 'flipIcon', void 0)
+__decorate([n$b()], IconButton.prototype, 'type', void 0)
+__decorate([n$b()], IconButton.prototype, 'value', void 0)
+__decorate([r$8()], IconButton.prototype, 'flipIcon', void 0)
 
 /**
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$2 = i$4`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host([disabled]){--_disabled-icon-opacity: 1}}/*# sourceMappingURL=shared-styles.css.map */
+const styles$2 = i$8`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host([disabled]){--_disabled-icon-opacity: 1}}/*# sourceMappingURL=shared-styles.css.map */
 `
 
 /**
@@ -26140,7 +27451,7 @@ const styles$2 = i$4`:host{display:inline-flex;outline:none;-webkit-tap-highligh
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles$1 = i$4`:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 0.38);--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-height: var(--md-icon-button-state-layer-height, 40px);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-width: var(--md-icon-button-state-layer-width, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: 0;--_container-shape-start-end: 0;--_container-shape-end-end: 0;--_container-shape-end-start: 0;--_container-height: 0;--_container-width: 0;height:var(--_state-layer-height);width:var(--_state-layer-width)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-height))/2) max(0px,(48px - var(--_state-layer-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:disabled{color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:disabled .icon{opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */
+const styles$1 = i$8`:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 0.38);--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-height: var(--md-icon-button-state-layer-height, 40px);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-width: var(--md-icon-button-state-layer-width, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: 0;--_container-shape-start-end: 0;--_container-shape-end-end: 0;--_container-shape-end-start: 0;--_container-height: 0;--_container-width: 0;height:var(--_state-layer-height);width:var(--_state-layer-width)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-height))/2) max(0px,(48px - var(--_state-layer-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:disabled{color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:disabled .icon{opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */
 `
 
 /**
@@ -26172,7 +27483,7 @@ let MdIconButton = class MdIconButton extends IconButton {
   }
 }
 MdIconButton.styles = [styles$2, styles$1]
-MdIconButton = __decorate([t$3('md-icon-button')], MdIconButton)
+MdIconButton = __decorate([t$9('md-icon-button')], MdIconButton)
 
 /**
  * @license
@@ -26182,9 +27493,9 @@ MdIconButton = __decorate([t$3('md-icon-button')], MdIconButton)
 /**
  * TODO(b/265336902): add docs
  */
-class Icon extends s$1 {
+class Icon extends s$9 {
   render() {
-    return x`<slot></slot>`
+    return x$1`<slot></slot>`
   }
   connectedCallback() {
     super.connectedCallback()
@@ -26206,7 +27517,7 @@ class Icon extends s$1 {
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const styles = i$4`:host{font-size:24px;width:24px;height:24px;color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */
+const styles = i$8`:host{font-size:24px;width:24px;height:24px;color:inherit;font-variation-settings:inherit;font-weight:400;font-family:var(--md-icon-font, Material Symbols Outlined);display:inline-flex;font-style:normal;line-height:1;overflow:hidden;letter-spacing:normal;text-transform:none;user-select:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}::slotted(svg){fill:currentColor}::slotted(*){height:100%;width:100%}/*# sourceMappingURL=icon-styles.css.map */
 `
 
 /**
@@ -26221,9 +27532,9 @@ const styles = i$4`:host{font-size:24px;width:24px;height:24px;color:inherit;fon
 let MdIcon = class MdIcon extends Icon {}
 /** @nocollapse */
 MdIcon.styles = [styles]
-MdIcon = __decorate([t$3('md-icon')], MdIcon)
+MdIcon = __decorate([t$9('md-icon')], MdIcon)
 
-let CollapseUi = class CollapseUi extends s$8 {
+let CollapseUi = class CollapseUi extends s$4 {
   constructor() {
     super(...arguments)
     this.service = connectState_1(
@@ -26233,7 +27544,7 @@ let CollapseUi = class CollapseUi extends s$8 {
     )
   }
   render() {
-    return y$2`
+    return y`
       <md-icon-button @click=${this.toggleUi}>
         <img src="${optimizedSVGDataUri$6}" alt="toggle" class="icon" />
       </md-icon-button>
@@ -26243,12 +27554,12 @@ let CollapseUi = class CollapseUi extends s$8 {
     this.service.value.send('TOGGLE_UI_COLLAPSED')
   }
 }
-CollapseUi.styles = i$8`
+CollapseUi.styles = i$4`
     .icon {
       width: 100%;
     }
   `
-CollapseUi = __decorate([e$g('collapse-ui')], CollapseUi)
+CollapseUi = __decorate([e$7('collapse-ui')], CollapseUi)
 
 function updateDrawer(context) {
   context.drawer.opened = !context.uiCollapsed
diff --git a/src/UI/reference-ui/src/ItkVtkViewer.module.css b/src/UI/reference-ui/src/ItkVtkViewer.module.css
index ed5ba0a2..4eefa904 100644
--- a/src/UI/reference-ui/src/ItkVtkViewer.module.css
+++ b/src/UI/reference-ui/src/ItkVtkViewer.module.css
@@ -849,3 +849,8 @@ select:focus {
 .inputLabel {
   line-height: 1.7;
 }
+
+.saveDialog label {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/UI/reference-ui/src/Layers/createLayerInterface.js b/src/UI/reference-ui/src/Layers/createLayerInterface.js
index 8073dc09..ec4a8c13 100644
--- a/src/UI/reference-ui/src/Layers/createLayerInterface.js
+++ b/src/UI/reference-ui/src/Layers/createLayerInterface.js
@@ -1,3 +1,6 @@
+import '@material/web/dialog/dialog.js'
+import '@material/web/button/text-button.js'
+import '@material/web/radio/radio.js'
 import {
   invisibleIconDataUri,
   boundingBoxIconDataUri,
@@ -100,6 +103,49 @@ function createLayerEntry(context, name, layer) {
   })
 
   // if (context.layers.showSaveRoiButton) {
+
+  const dialog = makeHtml(`
+    <md-dialog class="${style.saveDialog}">
+      <div slot="headline">Choose save file format</div>
+      <form id="save-form" slot="content" method="dialog">
+        <label>
+          <md-radio name="pet" value="cats" aria-label="Cats" touch-target="wrapper" checked></md-radio>
+          <span aria-hidden="true">Cats</span>
+        </label>
+        <label>
+          <md-radio name="pet" value="dogs" aria-label="Dogs" touch-target="wrapper"></md-radio>
+          <span aria-hidden="true">Dogs</span>
+        </label>
+        <label>
+          <md-radio name="pet" value="birds" aria-label="Birds" touch-target="wrapper"></md-radio>
+          <span aria-hidden="true">Birds</span>
+        </label>
+      </form>
+      <div slot="actions">
+        <md-text-button form="save-form" value="cancel">Cancel</md-text-button>
+        <md-text-button form="save-form" autofocus value="ok">OK</md-text-button>
+      </div>
+    </md-dialog>
+  `)
+
+  imageIcons.appendChild(dialog)
+
+  dialog.addEventListener('close', () => {
+    const okClicked = dialog.returnValue === 'ok'
+
+    if (okClicked) {
+      const format = document.querySelector('md-radio[name="pet"]').value
+      console.log('format', format)
+      context.service.send({
+        type: 'DOWNLOAD_IMAGE',
+        data: {
+          name: context.images.selectedName,
+          layerName: name,
+        },
+      })
+    }
+  })
+
   const downloadImage = document.createElement('div')
   downloadImage.innerHTML = `
   <input type="checkbox" checked id=${context.id}-download-image" class="${style.toggleInput}" />
@@ -118,16 +164,8 @@ function createLayerEntry(context, name, layer) {
   downloadImage.addEventListener('click', event => {
     event.preventDefault()
     event.stopPropagation()
-    // context.service.send({
-    //   type: 'DOWNLOAD_IMAGE',
-    //   data: {
-    //     name: context.images.selectedName,
-    //     layerName: name,
-    //   },
-    // })
-    console.log('Download image')
+    dialog.show()
   })
-  // }
 
   const icon = makeHtml(`<layer-icon class="${style.layerIcon}"></layer-icon>`)
   icon.layer = layer