@trimble-oss/moduswebcomponents/cjs/base-component-Dx-Crsr_.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

'use strict';

// This file is auto-generated by scripts/embed-component-css.js
// DO NOT EDIT MANUALLY
const componentCSS = "/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\n[data-theme=modus-classic-light] modus-wc-accordion modus-wc-collapse:first-child .modus-wc-collapse,\n[data-theme=modus-classic-dark] modus-wc-accordion modus-wc-collapse:first-child .modus-wc-collapse {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n[data-theme=modus-classic-light] modus-wc-accordion modus-wc-collapse:not(:first-child):not(:last-child) .modus-wc-collapse,\n[data-theme=modus-classic-dark] modus-wc-accordion modus-wc-collapse:not(:first-child):not(:last-child) .modus-wc-collapse {\n  border-radius: 0;\n}\n[data-theme=modus-classic-light] modus-wc-accordion modus-wc-collapse:last-child .modus-wc-collapse,\n[data-theme=modus-classic-dark] modus-wc-accordion modus-wc-collapse:last-child .modus-wc-collapse {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n[data-theme=modus-classic-light] modus-wc-accordion .modus-wc-collapse {\n  border: var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-2);\n}\n\n[data-theme=modus-classic-dark] modus-wc-accordion .modus-wc-collapse {\n  border: var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-8);\n}\n/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\nmodus-wc-alert .modus-wc-alert {\n  align-content: center;\n  align-items: center;\n  backdrop-filter: blur(var(--modus-wc-spacing-lg));\n  background-color: var(--modus-wc-color-base-page);\n  border-color: var(--modus-wc-color-base-200);\n  border-width: var(--alert-border-width);\n  border-left-width: var(--alert-border-left-width);\n  border-radius: var(--alert-border-radius);\n  color: var(--modus-wc-color-base-content);\n  display: flex;\n  text-align: start;\n}\nmodus-wc-alert .modus-wc-alert .modus-wc-alert-content {\n  flex: auto;\n}\nmodus-wc-alert .modus-wc-alert .title {\n  font-size: var(--modus-wc-font-size-md);\n  font-weight: var(--modus-wc-font-weight-bold);\n}\nmodus-wc-alert .modus-wc-alert .description {\n  font-size: var(--modus-wc-font-size-md);\n}\nmodus-wc-alert .modus-wc-alert.modus-wc-alert-info {\n  background-color: var(--modus-wc-color-blue-pale);\n  border-color: var(--modus-wc-color-info-blue);\n  color: var(--modus-wc-color-gray-10);\n}\nmodus-wc-alert .modus-wc-alert.modus-wc-alert-error {\n  background-color: rgba(251, 212, 215, 0.8);\n  border-color: var(--modus-wc-color-red-dark);\n  color: var(--modus-wc-color-gray-10);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  modus-wc-alert .modus-wc-alert.modus-wc-alert-error {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-red-pale) 80%, transparent);\n  }\n}\nmodus-wc-alert .modus-wc-alert.modus-wc-alert-success {\n  background-color: rgba(224, 236, 207, 0.8);\n  border-color: var(--modus-wc-color-green-dark);\n  color: var(--modus-wc-color-gray-10);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  modus-wc-alert .modus-wc-alert.modus-wc-alert-success {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-success-pale) 80%, transparent);\n  }\n}\nmodus-wc-alert .modus-wc-alert.modus-wc-alert-warning {\n  background-color: rgba(255, 245, 228, 0.6);\n  border-color: var(--modus-wc-color-yellow-dark);\n  color: var(--modus-wc-color-black);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-yellow-pale) 60%, transparent);\n  }\n}\n\n[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert .modus-wc-alert-icon {\n  color: var(--modus-wc-color-gray-5);\n}\n[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-info .modus-wc-alert-icon {\n  color: var(--modus-wc-color-info-blue);\n}\n[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-error .modus-wc-alert-icon {\n  color: var(--modus-wc-color-red-dark);\n}\n[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-success .modus-wc-alert-icon {\n  color: var(--modus-wc-color-green-dark);\n}\n[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning .modus-wc-alert-icon {\n  color: var(--modus-wc-color-yellow-dark);\n}\n\n[data-theme=modus-classic-light] modus-wc-alert .modus-wc-alert,\n[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert {\n  border-left-width: 12px;\n  border-radius: var(--modus-wc-border-radius-md);\n  gap: var(--modus-wc-spacing-sm);\n  min-height: 56px;\n  padding-bottom: var(--modus-wc-spacing-sm);\n  padding-top: var(--modus-wc-spacing-sm);\n}\n\n[data-theme=connect-dark] modus-wc-alert .modus-wc-alert,\n[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert,\n[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert {\n  background-color: var(--modus-wc-color-gray-10);\n  border-color: var(--modus-wc-color-gray-9);\n  color: var(--modus-wc-color-gray-light);\n}\n[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,\n[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,\n[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info {\n  background-color: rgba(1, 154, 235, 0.3);\n  border-color: var(--modus-wc-color-highlight-blue);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,\n  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info,\n  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-info {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 30%, transparent);\n  }\n}\n[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,\n[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,\n[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error {\n  background-color: rgba(218, 33, 44, 0.5);\n  border-color: var(--modus-wc-color-red-light);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,\n  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error,\n  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-error {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-red) 50%, transparent);\n  }\n}\n[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,\n[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,\n[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success {\n  background-color: rgba(30, 138, 68, 0.5);\n  border-color: var(--modus-wc-color-green-light);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,\n  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success,\n  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-success {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-green) 50%, transparent);\n  }\n}\n[data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,\n[data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,\n[data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {\n  background-color: rgba(251, 173, 38, 0.5);\n  border-color: var(--modus-wc-color-yellow-light);\n}\n@supports (background-color: color-mix(in sRGB, red 50%, blue)) {\n  [data-theme=connect-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,\n  [data-theme=modus-classic-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning,\n  [data-theme=modus-modern-dark] modus-wc-alert .modus-wc-alert.modus-wc-alert-warning {\n    background-color: color-mix(in sRGB, var(--modus-wc-color-yellow) 50%, transparent);\n  }\n}\nmodus-wc-app-menu.modus-wc-app-menu {\n  box-sizing: border-box;\n  display: block;\n  min-width: 0;\n  text-align: start;\n  width: fit-content;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel {\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n  gap: var(--modus-wc-spacing-lg);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel [slot=body] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--modus-wc-spacing-lg);\n  overflow-y: auto;\n  padding: var(--modus-wc-spacing-lg);\n  padding-inline-end: 0;\n  scrollbar-gutter: stable;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-header {\n  align-content: center;\n  align-items: center;\n  align-self: stretch;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--modus-wc-spacing-sm);\n  min-height: var(--modus-wc-size-sm);\n  padding: 0 var(--modus-wc-spacing-lg);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-header .modus-wc-app-menu-header-title {\n  align-content: flex-start;\n  align-items: flex-start;\n  display: flex;\n  flex: 1 0 0;\n  flex-wrap: wrap;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-header .modus-wc-app-menu-header-end-content {\n  align-items: center;\n  display: flex;\n  gap: var(--modus-wc-spacing-sm);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-menu {\n  padding: var(--modus-wc-spacing-sm) var(--modus-wc-spacing-lg);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items {\n  padding: 0 var(--modus-wc-spacing-xs);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items li.modus-wc-menu-item-active,\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button:active {\n  background-color: transparent;\n  color: inherit;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items {\n  /* Keyboard focus lives on `.modus-wc-app-menu-item-row` (the row owns the tab\n     stop and key handling). The inner menu-item paints its hover\n     background on top of any outline placed on the row, so we paint\n     the focus outline on the inner menu-item element instead. The\n     second selector overrides the global menu-item hover rule\n     (`outline: none`) so the ring stays visible while hovering. */\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row:focus-visible {\n  outline: none;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row:focus-visible modus-wc-menu-item .modus-wc-menu-item,\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row:focus-visible modus-wc-menu-item .modus-wc-menu-item:hover {\n  outline: 2px solid var(--modus-wc-color-primary);\n  outline-offset: -2px;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row {\n  align-items: center;\n  display: flex;\n  margin-inline: calc(-1 * var(--modus-wc-spacing-xs));\n  max-width: 256px;\n  position: relative;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row .modus-wc-app-menu-drag-icon {\n  color: var(--modus-wc-color-base-content);\n  position: absolute;\n  transform: translateX(-10%);\n  z-index: 1;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row > modus-wc-menu-item {\n  flex: 1;\n  min-width: 0;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item {\n  cursor: grab;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item .modus-wc-app-menu-drag-icon {\n  cursor: grab;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item {\n  /* Row is draggable; inner menu button would otherwise use pointer/default and shrink the grab hit visually. */\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button,\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content,\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content * {\n  cursor: grab;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button:active,\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button:active .modus-wc-menu-item-content,\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-app-menu-item-row.modus-wc-app-menu-draggable-item modus-wc-menu-item .modus-wc-menu-item button:active .modus-wc-menu-item-content * {\n  cursor: grabbing;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items {\n  /* No explicit width here: the menu item naturally fills its row,\n     which is constrained by the surrounding `modus-wc-panel` width\n     and its body padding. */\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button {\n  min-width: 0;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-content {\n  gap: var(--modus-wc-spacing-lg);\n  min-width: 0;\n  width: 100%;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  padding-inline-start: 0;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels > div:not(.modus-wc-menu-item-sublabel) {\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels > modus-wc-tooltip {\n  display: block;\n  flex: 1;\n  max-width: 100%;\n  min-width: 0;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels > modus-wc-tooltip > div {\n  max-width: 100%;\n  min-width: 0;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-labels > modus-wc-tooltip > div > div:first-child {\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-content [slot=start-icon] {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  padding-inline-end: 0;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-items .modus-wc-menu-item button .modus-wc-menu-item-content [slot=start-icon] .modus-wc-app-menu-app-logo {\n  height: var(--modus-wc-input-height-sm);\n  width: var(--modus-wc-input-height-sm);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid {\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  gap: var(--modus-wc-spacing-sm);\n  margin-inline: auto;\n  width: fit-content;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-row {\n  align-self: stretch;\n  display: grid;\n  gap: 0 var(--modus-wc-spacing-sm);\n  /* minmax(0, 1fr) prevents a long label from making its column wider\n     than the others, so all three items share equal space per row. */\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  justify-items: stretch;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item {\n  align-items: center;\n  border-radius: var(--modus-wc-border-radius-sm);\n  display: flex;\n  flex-direction: column;\n  padding: var(--modus-wc-spacing-lg) var(--modus-wc-spacing-xs);\n  position: relative;\n  width: var(--modus-wc-spacing-20);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item > modus-wc-icon {\n  align-items: center;\n  display: inline-flex;\n  inset-inline-end: 0;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  width: var(--modus-wc-size-xs);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item:hover {\n  background-color: var(--modus-wc-color-base-100);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item {\n  /* Focus outline that persists alongside the hover background. */\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item:focus-visible {\n  outline: 2px solid var(--modus-wc-color-primary);\n  outline-offset: -2px;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-emblem {\n  aspect-ratio: 1/1;\n  flex: 1 0 0;\n  min-height: var(--modus-wc-size-xs);\n  min-width: var(--modus-wc-size-xs);\n  width: var(--modus-wc-line-height-h0);\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grid-item-label {\n  align-self: stretch;\n  -webkit-box-orient: vertical;\n  color: var(--modus-wc-color-base-content);\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  line-height: var(--modus-wc-font-size-2xl);\n  overflow: hidden;\n  text-align: center;\n  text-overflow: ellipsis;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-draggable-item {\n  cursor: grab;\n  transition: box-shadow 0.2s ease;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-draggable-item:active {\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  cursor: grabbing;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-grabbed-item {\n  background-color: var(--modus-wc-color-base-200);\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n  outline: 2px solid var(--modus-wc-color-primary);\n  outline-offset: -2px;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-drag-source {\n  opacity: 0.3;\n}\nmodus-wc-app-menu.modus-wc-app-menu .modus-wc-panel .modus-wc-app-menu-drop-target {\n  border-radius: var(--modus-wc-border-radius-sm);\n  outline: 2px solid var(--modus-wc-color-primary);\n  outline-offset: -2px;\n}\n/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\nmodus-wc-autocomplete.modus-wc-autocomplete {\n  display: inline-block;\n  position: relative;\n  width: 100%;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete-xs {\n  height: var(--modus-wc-size-xs);\n  min-height: var(--modus-wc-size-xs);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete-sm {\n  height: var(--modus-wc-size-sm);\n  min-height: var(--modus-wc-size-sm);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete-md {\n  height: var(--modus-wc-size-md);\n  min-height: var(--modus-wc-size-md);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete-lg {\n  height: var(--modus-wc-size-lg);\n  min-height: var(--modus-wc-size-lg);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete-xl {\n  height: var(--modus-wc-size-xl);\n  min-height: var(--modus-wc-size-xl);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete modus-wc-loader {\n  display: flex;\n  justify-content: center;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select {\n  align-items: flex-start;\n  background-color: transparent;\n  display: flex;\n  height: auto;\n  min-height: fit-content;\n  padding: var(--modus-wc-spacing-xs);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--error {\n  border-color: var(--modus-wc-color-error) !important;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--info {\n  border-color: var(--modus-wc-color-info) !important;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--success {\n  border-color: var(--modus-wc-color-success) !important;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--warning {\n  border-color: var(--modus-wc-color-warning) !important;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-search-icon {\n  align-self: center;\n  flex-shrink: 0;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-input-sm .modus-wc-autocomplete-search-icon {\n  height: var(--modus-wc-line-height-sm);\n  width: var(--modus-wc-line-height-sm);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-input-md .modus-wc-autocomplete-search-icon {\n  height: var(--modus-wc-line-height-md);\n  width: var(--modus-wc-line-height-md);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select.modus-wc-input-lg .modus-wc-autocomplete-search-icon {\n  height: var(--modus-wc-line-height-lg);\n  width: var(--modus-wc-line-height-lg);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select:focus, modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select:focus-within {\n  box-shadow: none !important;\n  outline: none !important;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content {\n  align-content: flex-start;\n  align-items: center;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  min-height: fit-content;\n  min-width: 0;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-text-input:focus-within {\n  border: none !important;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-button-container {\n  align-items: center;\n  align-self: center;\n  display: none;\n  flex-shrink: 0;\n  justify-content: center;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-button-container:not(:empty) {\n  display: flex;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-button-container modus-wc-button {\n  align-self: center;\n  display: flex;\n  margin: 0;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-chip {\n  align-self: center;\n  flex-shrink: 0;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-text-input {\n  align-self: center;\n  flex: 1 1 var(--modus-autocomplete-min-input-width, 60px);\n  max-width: 100%;\n  min-width: var(--modus-autocomplete-min-input-width, 60px);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-text-input input {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content modus-wc-text-input:only-child {\n  flex: 1 1 100%;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-autocomplete-more-indicator {\n  align-items: center;\n  align-self: center;\n  display: flex;\n  flex-shrink: 0;\n  height: 32px;\n  justify-content: center;\n  padding: 0 8px;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-autocomplete-more-indicator .modus-wc-autocomplete-more-text {\n  background-color: var(--modus-wc-color-base-100);\n  border-radius: var(--modus-wc-border-radius-sm);\n  color: var(--modus-wc-color-base-content);\n  font-size: var(--modus-wc-font-size-sm);\n  font-weight: var(--modus-wc-font-weight-medium);\n  padding: 4px 8px;\n  text-align: center;\n  white-space: nowrap;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu {\n  border-radius: 0 0 var(--modus-wc-border-radius-md) var(--modus-wc-border-radius-md);\n  display: block;\n  left: 0;\n  margin-top: var(--modus-wc-spacing-2xs);\n  max-height: 320px;\n  overflow: auto;\n  position: absolute;\n  top: 100%;\n  z-index: 99;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .menu-hidden {\n  display: none;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .menu-visible {\n  display: block;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results {\n  padding: var(--modus-wc-spacing-md);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .icon-label {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .icon-label .modus-wc-autocomplete-search-icon {\n  color: var(--modus-wc-color-base-content-low-contrast);\n  height: 1.5rem;\n  width: 1.5rem;\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .icon-label .label {\n  font-size: var(--modus-wc-font-size-md);\n  font-weight: var(--modus-wc-font-weight-bold);\n  margin-inline-start: var(--modus-wc-spacing-xs);\n}\nmodus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .sub-label {\n  color: var(--modus-wc-color-base-content-low-contrast);\n  font-size: var(--modus-wc-font-size-sm);\n  text-align: center;\n}\n\n[data-theme=modus-modern-light] modus-wc-autocomplete .modus-wc-input-label,\n[data-theme=modus-modern-dark] modus-wc-autocomplete .modus-wc-input-label,\n[data-theme=modus-classic-light] modus-wc-autocomplete .modus-wc-input-label,\n[data-theme=modus-classic-dark] modus-wc-autocomplete .modus-wc-input-label {\n  padding-bottom: var(--modus-wc-spacing-sm);\n}\n\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered,\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered {\n  border: var(--modus-wc-border-width-xs) solid var(--modus-wc-color-gray-6);\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered:focus-within,\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--bordered:focus-within {\n  border-color: var(--modus-wc-color-highlight-blue);\n  border-width: var(--modus-wc-border-width-sm);\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete ul.modus-wc-menu,\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete ul.modus-wc-menu {\n  box-shadow: 0 0 4px 0 rgba(54, 53, 69, 0.3);\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-text-input-readonly,\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-text-input-readonly {\n  background-color: var(--modus-wc-color-gray-10);\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled,\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n  user-select: none;\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly .modus-wc-text-input-readonly,\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly .modus-wc-text-input-readonly {\n  border: none;\n}\n\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select {\n  background-color: var(--modus-wc-color-white);\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--disabled,\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly,\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-text-input-readonly {\n  background-color: var(--modus-wc-color-gray-0);\n  border: none;\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select--readonly:focus-within {\n  border: var(--modus-wc-border-width-sm) solid var(--modus-wc-color-highlight-blue);\n}\n[data-theme=modus-classic-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu {\n  background-color: var(--modus-wc-color-white);\n}\n\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select {\n  background-color: var(--modus-wc-color-gray-10);\n}\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-no-results .sub-label {\n  color: var(--modus-wc-color-white);\n}\n[data-theme=modus-classic-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu {\n  background-color: var(--modus-wc-color-gray-10);\n}\n\n[data-theme=modus-modern-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu {\n  background-color: var(--modus-wc-color-base-page);\n}\n[data-theme=modus-modern-light] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-text-input:focus-within {\n  outline: unset;\n}\n\n[data-theme=modus-modern-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-menu {\n  background-color: var(--modus-wc-color-base-page);\n}\n[data-theme=modus-modern-dark] modus-wc-autocomplete.modus-wc-autocomplete .modus-wc-autocomplete-multi-select .modus-wc-autocomplete-content .modus-wc-text-input:focus-within {\n  outline: unset;\n}\n/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\nmodus-wc-avatar {\n  display: inline-flex;\n}\n\nmodus-wc-avatar .modus-wc-avatar .initials {\n  align-items: center;\n  background-color: var(--modus-wc-color-neutral);\n  color: var(--modus-wc-color-neutral-content);\n  display: flex;\n  font-weight: 600;\n  height: 100%;\n  justify-content: center;\n  text-transform: uppercase;\n  width: 100%;\n}\nmodus-wc-avatar .modus-wc-avatar .no-image {\n  align-items: center;\n  background-color: var(--modus-wc-color-base-200);\n  color: var(--modus-wc-color-base-content);\n  display: flex;\n  justify-content: center;\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-8 {\n  height: var(--modus-wc-size-xs);\n  width: var(--modus-wc-size-xs);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-8 .initials {\n  font-size: var(--modus-wc-font-size-sm);\n  line-height: var(--modus-wc-font-size-2xl);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-8 .modus-wc-icon {\n  font-size: var(--modus-wc-font-size-md);\n  line-height: 1;\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-12 {\n  height: var(--modus-wc-size-sm);\n  width: var(--modus-wc-size-sm);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-12 .initials {\n  font-size: var(--modus-wc-font-size-lg);\n  line-height: var(--modus-wc-line-height-md);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-12 .modus-wc-icon {\n  font-size: var(--modus-wc-font-size-lg);\n  line-height: 1;\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-16 {\n  height: var(--modus-wc-size-md);\n  width: var(--modus-wc-size-md);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-16 .initials {\n  font-size: var(--modus-wc-font-size-xl);\n  line-height: var(--modus-wc-line-height-lg);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-16 .modus-wc-icon {\n  font-size: var(--modus-wc-font-size-xl);\n  line-height: 1;\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-20 {\n  height: var(--modus-wc-size-lg);\n  width: var(--modus-wc-size-lg);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-20 .initials {\n  font-size: var(--modus-wc-font-size-xl);\n  line-height: var(--modus-wc-line-height-lg);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-20 .modus-wc-icon {\n  font-size: var(--modus-wc-font-size-3xl);\n  line-height: 1;\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-24 {\n  height: var(--modus-wc-size-xl);\n  width: var(--modus-wc-size-xl);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-24 .initials {\n  font-size: var(--modus-wc-font-size-2xl);\n  line-height: var(--modus-wc-line-height-lg);\n}\nmodus-wc-avatar .modus-wc-avatar .modus-wc-w-24 .modus-wc-icon {\n  font-size: var(--modus-wc-line-height-h1);\n  line-height: 1;\n}\n/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\nmodus-wc-badge .modus-wc-badge {\n  display: flex;\n  font-weight: var(--modus-wc-font-weight-semibold);\n  height: fit-content;\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-sm {\n  font-size: var(--modus-wc-font-size-xs);\n  max-height: var(--modus-wc-size-xs);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-md {\n  font-size: var(--modus-wc-font-size-sm);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-high-contrast {\n  background-color: var(--modus-wc-color-black);\n  border-color: var(--modus-wc-color-base-content);\n  color: var(--modus-wc-color-white);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-counter {\n  border-radius: 1rem;\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text {\n  background-color: transparent;\n  border: none;\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary {\n  color: var(--modus-wc-color-trimble-blue);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-secondary {\n  color: var(--modus-wc-color-secondary);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-neutral {\n  color: var(--modus-wc-color-gray-1);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast {\n  color: var(--modus-wc-color-base-content);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success {\n  color: var(--modus-wc-color-green-dark);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-warning {\n  color: var(--modus-wc-color-warning);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-error {\n  color: var(--modus-wc-color-error);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined {\n  background-color: transparent;\n  border-radius: 1rem;\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-primary {\n  border-color: var(--modus-wc-color-primary);\n  color: var(--modus-wc-color-primary);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-secondary {\n  border-color: var(--modus-wc-color-secondary);\n  color: var(--modus-wc-color-secondary);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-neutral {\n  border-color: var(--modus-wc-color-gray-1);\n  color: var(--modus-wc-color-gray-1);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-high-contrast {\n  border-color: var(--modus-wc-color-base-content);\n  color: var(--modus-wc-color-base-content);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-success {\n  border-color: var(--modus-wc-color-success);\n  color: var(--modus-wc-color-success);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-warning {\n  border-color: var(--modus-wc-color-warning);\n  color: var(--modus-wc-color-warning);\n}\nmodus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-error {\n  border-color: var(--modus-wc-color-error);\n  color: var(--modus-wc-color-error);\n}\n\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge,\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge {\n  border: unset;\n  font-weight: var(--modus-wc-font-weight-bold);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary,\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary {\n  color: var(--modus-wc-color-gray-6);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined) {\n  background-color: var(--modus-wc-color-gray-6);\n  color: var(--modus-wc-color-white);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter),\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter) {\n  border-radius: var(--modus-wc-border-radius-md);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined) {\n  background-color: var(--modus-wc-color-green-dark);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm,\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm {\n  border-radius: var(--modus-wc-border-radius-sm);\n  font-size: var(--modus-wc-font-size-xs);\n  height: 14px;\n  padding: var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-xs);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-md,\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-md {\n  font-size: var(--modus-wc-font-size-sm);\n  height: 20px;\n  padding: var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg,\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg {\n  font-size: var(--modus-wc-font-size-md);\n  height: 28px;\n  padding: var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md);\n}\n[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined,\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined {\n  background-color: transparent;\n  border: 1px solid;\n  border-radius: 1rem;\n}\n\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-primary {\n  background-color: var(--modus-wc-color-highlight-blue);\n  color: var(--modus-wc-color-gray-10);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-success {\n  background-color: var(--modus-wc-color-success);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-secondary {\n  background-color: var(--modus-wc-color-gray-6);\n  color: var(--modus-wc-color-white);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-neutral {\n  background-color: var(--modus-wc-color-gray-1);\n  color: var(--modus-wc-color-trimble-gray);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-high-contrast {\n  background-color: var(--modus-wc-color-gray-light);\n  color: var(--modus-wc-color-gray-10);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary {\n  color: var(--modus-wc-color-highlight-blue);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast {\n  color: var(--modus-wc-color-gray-light);\n}\n[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success {\n  color: var(--modus-wc-color-success);\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet {\n  border-radius: var(--rounded-box) var(--rounded-box) 0 0;\n  bottom: 0;\n  box-shadow: 0 -20px 50px -8px color-mix(in sRGB, var(--modus-wc-color-base-content) 22%, transparent), 0 -6px 16px color-mix(in sRGB, var(--modus-wc-color-base-content) 12%, transparent);\n  left: 50%;\n  max-width: 100vw;\n  min-width: 25vw;\n  position: fixed;\n  transform: translateX(-50%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0s linear 0.3s;\n  z-index: 999;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet[aria-hidden=true] {\n  box-shadow: none;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet[aria-hidden=false] {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0s linear 0s;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet:focus, modus-wc-bottom-sheet.modus-wc-bottom-sheet:focus-visible {\n  outline: none;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet.modus-wc-bottom-sheet-minimized .modus-wc-panel .modus-wc-bottom-sheet-header,\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet.modus-wc-bottom-sheet-minimized .modus-wc-panel .modus-wc-bottom-sheet-content,\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet.modus-wc-bottom-sheet-minimized .modus-wc-panel .modus-wc-bottom-sheet-footer {\n  display: none;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel {\n  border-radius: var(--rounded-box) var(--rounded-box) 0 0;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-handle {\n  cursor: grab;\n  min-height: var(--modus-wc-font-size-2xl);\n  touch-action: none;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-handle:active {\n  cursor: grabbing;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header {\n  padding: var(--modus-wc-spacing-md);\n  width: 100%;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header-top {\n  align-items: center;\n  display: flex;\n  gap: var(--modus-wc-spacing-lg);\n  justify-content: space-between;\n  width: 100%;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header-start {\n  align-items: center;\n  display: flex;\n  flex: 1 1 0;\n  gap: var(--modus-wc-spacing-xs);\n  min-width: 0;\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header-title {\n  line-height: var(--modus-wc-font-size-2xl);\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-content {\n  padding: 0 var(--modus-wc-spacing-md) var(--modus-wc-spacing-md) var(--modus-wc-spacing-md);\n}\nmodus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-footer {\n  padding: var(--modus-wc-spacing-md);\n}\n/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\nmodus-wc-breadcrumbs .modus-wc-breadcrumbs ol {\n  list-style: none;\n}\nmodus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button {\n  background: none;\n  border: 0;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\nmodus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-xs {\n  font-size: var(--modus-wc-font-size-xs);\n}\nmodus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-sm {\n  font-size: var(--modus-wc-font-size-sm);\n}\nmodus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-md {\n  font-size: var(--modus-wc-font-size-md);\n}\nmodus-wc-breadcrumbs .modus-wc-breadcrumbs.modus-wc-text-lg {\n  font-size: var(--modus-wc-font-size-lg);\n}\n\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button,\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button {\n  text-decoration: none;\n}\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover,\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover {\n  text-decoration: underline;\n}\n\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button {\n  color: var(--modus-wc-color-blue-light);\n}\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active {\n  color: var(--modus-wc-color-trimble-gray);\n}\n[data-theme=modus-classic-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs span {\n  color: var(--modus-wc-color-trimble-gray);\n}\n\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button {\n  color: var(--modus-wc-color-highlight-blue);\n}\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active {\n  color: var(--modus-wc-color-white);\n}\n[data-theme=modus-classic-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs span {\n  color: var(--modus-wc-color-white);\n}\n\n[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,\n[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button,\n[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a,\n[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button {\n  color: var(--modus-wc-color-base-content);\n  opacity: 0.5;\n  text-decoration: none;\n}\n[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,\n[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active,\n[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:active,\n[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:active {\n  color: var(--modus-wc-color-white);\n}\n[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,\n[data-theme=connect-light] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover,\n[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs a:hover,\n[data-theme=connect-dark] modus-wc-breadcrumbs .modus-wc-breadcrumbs .modus-wc-breadcrumb-button:hover {\n  text-decoration: none;\n}\n/**\n* This component uses Tailwind CSS and DaisyUI.\n* Only add styles here that should not be applied by Tailwind, Daisy, or the theme.\n*/\nmodus-wc-button .modus-wc-btn-xs {\n  height: var(--modus-wc-size-xs);\n  min-height: var(--modus-wc-size-xs);\n}\nmodus-wc-button .modus-wc-btn-sm {\n  height: var(--modus-wc-size-sm);\n  min-height: var(--modus-wc-size-sm);\n}\nmodus-wc-button .modus-wc-btn-md {\n  height: var(--modus-wc-size-md);\n  min-height: var(--modus-wc-size-md);\n}\nmodus-wc-button .modus-wc-btn-lg {\n  height: var(--modus-wc-size-lg);\n  min-height: var(--modus-wc-size-lg);\n}\nmodus-wc-button .modus-wc-btn-xl {\n  height: var(--modus-wc-size-xl);\n  min-height: var(--modus-wc-size-xl);\n}\nmodus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:not(.modus-wc-btn-disabled) {\n  background-color: var(--modus-wc-color-base-100);\n  border-color: var(--modus-wc-color-base-100);\n}\nmodus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:not(.modus-wc-btn-disabled):hover, modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:not(.modus-wc-btn-disabled).modus-wc-btn-active, modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:not(.modus-wc-btn-disabled)[aria-pressed=true] {\n  background-color: var(--modus-wc-color-base-200);\n  border-color: var(--modus-wc-color-base-200);\n}\n\nmodus-wc-button .modus-wc-btn-outline.modus-wc-btn-primary[aria-pressed=true] {\n  background-color: var(--modus-wc-color-primary);\n  border: 1px solid transparent;\n  color: var(--modus-wc-color-primary-content);\n}\nmodus-wc-button .modus-wc-btn-outline.modus-wc-btn-primary:hover {\n  background-color: var(--modus-wc-color-primary-pale);\n  color: var(--mod