odt-ui-rails 2.2.4 → 2.2.5

data/app/assets/stylesheets/odt_ui/styles.css

@@ -137,91 +137,120 @@
 .odt-btn--filled {
   box-shadow: var(--shadow-card);
 }
-.odt-btn--filled-primary {
+.odt-btn--filled-primary,
+.odt-btn--capsule-primary {
   background-color: var(--color-primary-500);
   color: var(--color-btn-primary-fg, #ffffff);
 }
-.odt-btn--filled-primary:hover:not(:disabled) {
+.odt-btn--filled-primary:hover:not(:disabled),
+.odt-btn--capsule-primary:hover:not(:disabled) {
   background-color: var(--color-primary-600);
 }
-.odt-btn--filled-primary:active:not(:disabled) {
+.odt-btn--filled-primary:active:not(:disabled),
+.odt-btn--capsule-primary:active:not(:disabled) {
   background-color: var(--color-primary-700);
 }
 
-.odt-btn--filled-secondary {
+.odt-btn--filled-secondary,
+.odt-btn--capsule-secondary {
   background-color: var(--color-secondary-500);
   color: var(--color-btn-secondary-fg, hsl(224 25% 6%));
 }
-.odt-btn--filled-secondary:hover:not(:disabled) {
+.odt-btn--filled-secondary:hover:not(:disabled),
+.odt-btn--capsule-secondary:hover:not(:disabled) {
   background-color: var(--color-secondary-400);
 }
-.odt-btn--filled-secondary:active:not(:disabled) {
+.odt-btn--filled-secondary:active:not(:disabled),
+.odt-btn--capsule-secondary:active:not(:disabled) {
   background-color: var(--color-secondary-600);
 }
 
-.odt-btn--filled-surface {
+.odt-btn--filled-surface,
+.odt-btn--capsule-surface {
   background-color: var(--color-surface);
   color: var(--color-btn-surface-fg, var(--color-fg-strong));
 }
-.odt-btn--filled-surface:hover:not(:disabled) {
+.odt-btn--filled-surface:hover:not(:disabled),
+.odt-btn--capsule-surface:hover:not(:disabled) {
   background-color: var(--color-surface-muted);
 }
-.odt-btn--filled-surface:active:not(:disabled) {
+.odt-btn--filled-surface:active:not(:disabled),
+.odt-btn--capsule-surface:active:not(:disabled) {
   background-color: var(--color-surface-subtle);
 }
 
-.odt-btn--filled-muted {
+.odt-btn--filled-muted,
+.odt-btn--capsule-muted {
   background-color: var(--color-surface-muted);
   color: var(--color-btn-muted-fg, var(--color-fg));
 }
-.odt-btn--filled-muted:hover:not(:disabled) {
+.odt-btn--filled-muted:hover:not(:disabled),
+.odt-btn--capsule-muted:hover:not(:disabled) {
   background-color: var(--color-surface-subtle);
   color: var(--color-fg-strong);
 }
-.odt-btn--filled-muted:active:not(:disabled) {
+.odt-btn--filled-muted:active:not(:disabled),
+.odt-btn--capsule-muted:active:not(:disabled) {
   background-color: var(--color-surface);
 }
 
-.odt-btn--filled-inverse {
+.odt-btn--filled-inverse,
+.odt-btn--capsule-inverse {
   background-color: var(--color-fg-strong);
   color: var(--color-btn-inverse-fg, var(--color-surface));
 }
-.odt-btn--filled-inverse:hover:not(:disabled) { opacity: 0.9; }
-.odt-btn--filled-inverse:active:not(:disabled) { opacity: 0.8; }
+.odt-btn--filled-inverse:hover:not(:disabled),
+.odt-btn--capsule-inverse:hover:not(:disabled) { opacity: 0.9; }
+.odt-btn--filled-inverse:active:not(:disabled),
+.odt-btn--capsule-inverse:active:not(:disabled) { opacity: 0.8; }
 
-.odt-btn--filled-success {
+.odt-btn--filled-success,
+.odt-btn--capsule-success {
   background-color: var(--color-success);
   color: var(--color-btn-success-fg, #ffffff);
 }
-.odt-btn--filled-success:hover:not(:disabled) { opacity: 0.9; }
-.odt-btn--filled-success:active:not(:disabled) { opacity: 0.8; }
+.odt-btn--filled-success:hover:not(:disabled),
+.odt-btn--capsule-success:hover:not(:disabled) { opacity: 0.9; }
+.odt-btn--filled-success:active:not(:disabled),
+.odt-btn--capsule-success:active:not(:disabled) { opacity: 0.8; }
 
-.odt-btn--filled-warning {
+.odt-btn--filled-warning,
+.odt-btn--capsule-warning {
   background-color: var(--color-warning);
   color: var(--color-btn-warning-fg, var(--color-fg-strong));
 }
-.odt-btn--filled-warning:hover:not(:disabled) { opacity: 0.9; }
-.odt-btn--filled-warning:active:not(:disabled) { opacity: 0.8; }
+.odt-btn--filled-warning:hover:not(:disabled),
+.odt-btn--capsule-warning:hover:not(:disabled) { opacity: 0.9; }
+.odt-btn--filled-warning:active:not(:disabled),
+.odt-btn--capsule-warning:active:not(:disabled) { opacity: 0.8; }
 
-.odt-btn--filled-danger {
+.odt-btn--filled-danger,
+.odt-btn--capsule-danger {
   background-color: var(--color-danger);
   color: var(--color-btn-danger-fg, #ffffff);
 }
-.odt-btn--filled-danger:hover:not(:disabled) { opacity: 0.9; }
-.odt-btn--filled-danger:active:not(:disabled) { opacity: 0.8; }
+.odt-btn--filled-danger:hover:not(:disabled),
+.odt-btn--capsule-danger:hover:not(:disabled) { opacity: 0.9; }
+.odt-btn--filled-danger:active:not(:disabled),
+.odt-btn--capsule-danger:active:not(:disabled) { opacity: 0.8; }
 
-.odt-btn--filled-info {
+.odt-btn--filled-info,
+.odt-btn--capsule-info {
   background-color: var(--color-info);
   color: var(--color-btn-info-fg, #ffffff);
 }
-.odt-btn--filled-info:hover:not(:disabled) { opacity: 0.9; }
-.odt-btn--filled-info:active:not(:disabled) { opacity: 0.8; }
+.odt-btn--filled-info:hover:not(:disabled),
+.odt-btn--capsule-info:hover:not(:disabled) { opacity: 0.9; }
+.odt-btn--filled-info:active:not(:disabled),
+.odt-btn--capsule-info:active:not(:disabled) { opacity: 0.8; }
 
-.odt-btn--filled-neutral {
+.odt-btn--filled-neutral,
+.odt-btn--capsule-neutral {
   background-color: var(--color-neutral-800);
   color: #ffffff;
 }
-.odt-btn--filled-neutral:hover:not(:disabled) {
+.odt-btn--filled-neutral:hover:not(:disabled),
+.odt-btn--capsule-neutral:hover:not(:disabled) {
   background-color: var(--color-neutral-900);
 }
 
@@ -648,6 +677,11 @@
 .odt-color-muted     { color: var(--color-fg-muted); }
 .odt-color-subtle    { color: var(--color-fg-subtle); }
 .odt-color-disabled  { color: var(--color-fg-disabled); }
+.odt-color-inverse-strong { color: var(--color-fg-inverse-strong); }
+.odt-color-inverse        { color: var(--color-fg-inverse); }
+.odt-color-inverse-muted  { color: var(--color-fg-inverse-muted); }
+.odt-color-inverse-subtle { color: var(--color-fg-inverse-subtle); }
+.odt-color-inverse-disabled { color: var(--color-fg-inverse-disabled); }
 .odt-color-primary   { color: var(--color-fg-primary); }
 .odt-color-secondary { color: var(--color-fg-secondary); }
 .odt-color-success   { color: var(--color-fg-success); }
@@ -801,6 +835,14 @@
   border-color: var(--color-ring);
 }
 
+.odt-input--unstyled,
+.odt-textarea--unstyled {
+  background: transparent;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+}
+
 /* Form Sizes */
 .odt-input--sm, .odt-select--sm {
   height: 2rem;
@@ -1208,134 +1250,135 @@
   left: 0;
 }
 
+.odt-toaster {
+  position: fixed;
+  z-index: 9999;
+  box-sizing: border-box;
+  font-family: inherit;
+  width: 100%;
+  max-width: 24rem; /* 384px */
+  padding: var(--spacing-4, 1rem);
+  pointer-events: none;
+  min-height: 5rem;
+}
+
+/* Positions */
+.odt-toaster--top-right {
+  top: 0;
+  right: 0;
+}
+
+.odt-toaster--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.odt-toaster--top-left {
+  top: 0;
+  left: 0;
+}
+
 .odt-toaster--bottom-right {
   bottom: 0;
   right: 0;
-  flex-direction: column-reverse;
 }
 
 .odt-toaster--bottom-center {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  flex-direction: column-reverse;
 }
 
 .odt-toaster--bottom-left {
   bottom: 0;
   left: 0;
-  flex-direction: column-reverse;
 }
 
-/* Toast Item */
+/* Toast Item Card (Absolute within Toaster for 3D stacking) */
 .odt-toast {
-  position: relative;
-  width: 100%;
+  position: absolute;
+  left: var(--spacing-4, 1rem);
+  right: var(--spacing-4, 1rem);
   box-sizing: border-box;
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-3, 0.75rem);
-  padding: var(--spacing-3-5, 0.875rem) var(--spacing-4, 1rem);
+  padding: var(--spacing-4, 1rem) var(--spacing-4-5, 1.125rem);
   background-color: var(--color-surface-elevated, #ffffff);
   color: var(--color-fg);
   border-radius: var(--radius-2xl, 1rem);
-  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
-  border: 1px solid var(--color-line-muted, #f4f4f5);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
   pointer-events: auto;
   user-select: none;
   font-family: inherit;
   overflow: hidden;
-  animation: odt-toast-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.25s ease;
-}
-
-.odt-toast--exiting {
-  animation: odt-toast-exit 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-@keyframes odt-toast-enter {
-  0% {
-    opacity: 0;
-    transform: translateY(-12px) scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+              opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 0.25s ease;
+  will-change: transform, opacity;
 }
 
-@keyframes odt-toast-exit {
-  0% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.94);
-  }
+.odt-toaster--top-right .odt-toast,
+.odt-toaster--top-center .odt-toast,
+.odt-toaster--top-left .odt-toast {
+  top: var(--spacing-4, 1rem);
+  bottom: auto;
+  transform-origin: top center;
 }
 
 .odt-toaster--bottom-right .odt-toast,
 .odt-toaster--bottom-center .odt-toast,
 .odt-toaster--bottom-left .odt-toast {
-  animation-name: odt-toast-enter-bottom;
+  bottom: var(--spacing-4, 1rem);
+  top: auto;
+  transform-origin: bottom center;
+}
+
+.odt-toast--exiting {
+  opacity: 0 !important;
+  transform: scale(0.92) translateY(-12px) !important;
+  pointer-events: none !important;
+  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
 }
 
 .odt-toaster--bottom-right .odt-toast--exiting,
 .odt-toaster--bottom-center .odt-toast--exiting,
 .odt-toaster--bottom-left .odt-toast--exiting {
-  animation-name: odt-toast-exit-bottom;
+  transform: scale(0.92) translateY(12px) !important;
 }
 
-@keyframes odt-toast-enter-bottom {
-  0% {
-    opacity: 0;
-    transform: translateY(12px) scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+/* Surface Variants */
+.odt-toast--variant-frosted {
+  background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.70));
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
-@keyframes odt-toast-exit-bottom {
-  0% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(8px) scale(0.94);
-  }
+.odt-toast--variant-subtle {
+  background-color: var(--color-surface-subtle);
+}
+
+.odt-toast--variant-outlined {
+  background-color: var(--color-surface);
 }
 
-/* Toast Variants / Semantic Themes */
-.odt-toast--success {
+/* Rich Color Tints (Optional) */
+.odt-toast--rich-success {
   background-color: var(--color-surface-success, hsl(142 71% 96%));
-  border-color: var(--color-line-success, hsl(142 71% 85%));
 }
 
-.odt-toast--warning {
+.odt-toast--rich-warning {
   background-color: var(--color-surface-warning, hsl(38 92% 96%));
-  border-color: var(--color-line-warning, hsl(38 92% 85%));
 }
 
-.odt-toast--danger,
-.odt-toast--error {
+.odt-toast--rich-danger,
+.odt-toast--rich-error {
   background-color: var(--color-surface-danger, hsl(0 84% 97%));
-  border-color: var(--color-line-danger, hsl(0 84% 88%));
 }
 
-.odt-toast--info {
+.odt-toast--rich-info {
   background-color: var(--color-surface-info, hsl(217 91% 97%));
-  border-color: var(--color-info, hsl(217 91% 88%));
-}
-
-.odt-toast--frosted {
-  background-color: var(--frosted-surface-bg, rgba(255, 255, 255, 0.70));
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--frosted-surface-border, rgba(255, 255, 255, 0.80));
 }
 
 /* Toast Sub-elements */
@@ -1346,10 +1389,13 @@
   width: 1.375rem;
   height: 1.375rem;
   flex-shrink: 0;
-  font-size: 1.125rem;
   margin-top: 0.0625rem;
 }
 
+.odt-toast__icon svg {
+  display: block;
+}
+
 .odt-toast__icon--success { color: var(--color-success, #16a34a); }
 .odt-toast__icon--warning { color: var(--color-warning, #d97706); }
 .odt-toast__icon--danger,
@@ -1369,18 +1415,18 @@
 }
 
 .odt-toast__title {
-  font-size: var(--font-size-sm, 0.875rem);
+  font-size: var(--font-size-base, 0.9375rem);
   font-weight: var(--font-weight-semibold, 600);
   color: var(--color-fg-strong);
   line-height: 1.35;
   margin: 0;
 }
 
-.odt-toast__message,
-.odt-toast__description {
-  font-size: var(--font-size-xs, 0.75rem);
+.odt-toast__description,
+.odt-toast__message {
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--color-fg-muted);
-  line-height: 1.4;
+  line-height: 1.45;
   margin: 0;
 }
 
@@ -1398,9 +1444,8 @@
   cursor: pointer;
   flex-shrink: 0;
   margin-left: auto;
+  margin-top: -0.125rem;
   transition: background-color 0.15s ease, color 0.15s ease;
-  font-size: 1.125rem;
-  line-height: 1;
 }
 
 .odt-toast__close:hover {
@@ -1408,6 +1453,10 @@
   color: var(--color-fg-strong);
 }
 
+.odt-toast__close svg {
+  display: block;
+}
+
 /* ==========================================================================
  * 11. Modal Component (.odt-modal-overlay, .odt-modal)
  * ========================================================================== */
@@ -1592,4 +1641,335 @@
   transform: scale(0.94);
 }
 
+/* ==========================================================================
+ * 12. DropdownMenu Component (.odt-dropdown)
+ * ========================================================================== */
+.odt-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.odt-dropdown--full-width {
+  width: 100%;
+}
+
+.odt-dropdown__container {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-1-5, 0.375rem);
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.odt-dropdown__container--full-width {
+  width: 100%;
+}
+
+.odt-dropdown__label {
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--color-fg-strong);
+  line-height: 1.25rem;
+  user-select: none;
+  cursor: default;
+}
+
+.odt-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background-color: var(--color-surface, #ffffff);
+  color: var(--color-fg);
+  font-family: inherit;
+  font-weight: 500;
+  outline: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  gap: 0.5rem;
+  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
+}
+
+.odt-dropdown__trigger--outlined {
+  background-color: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-line, #e4e4e9);
+}
+.odt-dropdown__trigger--outlined:hover:not(:disabled):not(:focus):not(.odt-dropdown__trigger--open) {
+  border-color: var(--color-line-strong, #d4d4db);
+}
+.odt-dropdown__trigger--outlined:focus,
+.odt-dropdown__trigger--outlined.odt-dropdown__trigger--open {
+  border-color: var(--color-ring);
+}
+
+.odt-dropdown__trigger--filled {
+  background-color: var(--color-surface, #ffffff);
+  border: 1px solid transparent;
+}
+.odt-dropdown__trigger--filled:focus,
+.odt-dropdown__trigger--filled.odt-dropdown__trigger--open {
+  border-color: var(--color-ring);
+}
+
+.odt-dropdown__trigger--frosted {
+  background-color: hsl(from var(--color-surface) h s l / 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid transparent;
+  box-shadow: var(--shadow-card);
+}
+.odt-dropdown__trigger--frosted:focus,
+.odt-dropdown__trigger--frosted.odt-dropdown__trigger--open {
+  border-color: var(--color-ring);
+}
+
+.odt-dropdown__trigger--sm {
+  height: 2rem;
+  padding: 0 var(--spacing-3, 0.75rem);
+  font-size: var(--font-size-xs, 0.75rem);
+}
+.odt-dropdown__trigger--md {
+  height: 2.625rem;
+  padding: 0 var(--spacing-4, 1rem);
+  font-size: var(--font-size-sm, 0.875rem);
+}
+.odt-dropdown__trigger--lg {
+  height: 3.125rem;
+  padding: 0 var(--spacing-5, 1.25rem);
+  font-size: var(--font-size-base, 1rem);
+}
+
+.odt-dropdown__trigger-text {
+  flex: 1 1 auto;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.odt-dropdown__placeholder {
+  color: var(--color-fg-subtle);
+  font-weight: 400;
+}
+
+.odt-dropdown__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-fg-muted);
+  flex-shrink: 0;
+  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
+}
+
+.odt-dropdown__chevron--open {
+  transform: rotate(180deg);
+  color: var(--color-fg-strong);
+}
+
+.odt-dropdown__trigger--error {
+  border-color: var(--color-danger) !important;
+}
+
+.odt-dropdown__trigger:disabled {
+  background-color: var(--color-surface-subtle);
+  color: var(--color-fg-disabled);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.odt-dropdown__content {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0.3125rem;
+  background-color: var(--color-surface, #ffffff);
+  border: 1px solid var(--color-line-muted, rgba(226, 232, 240, 0.8));
+  border-radius: var(--radius-xl, 0.75rem);
+  color: var(--color-neutral-900);
+  outline: none;
+  min-width: 12rem;
+  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.08), 0 4px 10px -2px rgba(0, 0, 0, 0.03);
+  transform-origin: top center;
+  animation: odt-dropdown-enter 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.odt-dropdown__content.hidden {
+  display: none !important;
+}
+
+.odt-dropdown__content--align-start { left: 0; }
+.odt-dropdown__content--align-end { right: 0; }
+.odt-dropdown__content--align-center { left: 50%; transform: translateX(-50%); }
+
+.odt-dropdown__content--side-bottom { top: calc(100% + 6px); }
+.odt-dropdown__content--side-top { bottom: calc(100% + 6px); }
+
+.odt-dropdown__content--exiting {
+  animation: odt-dropdown-exit 110ms cubic-bezier(0.4, 0, 1, 1) forwards;
+  pointer-events: none;
+}
+
+@keyframes odt-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes odt-dropdown-exit {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.97) translateY(-4px);
+  }
+}
+
+.odt-dropdown__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.4375rem 0.625rem;
+  border-radius: var(--radius-lg, 0.5rem);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: -0.01em;
+  color: var(--color-neutral-700);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition: background-color 120ms ease, color 120ms ease, transform 100ms ease;
+  outline: none;
+  gap: 0.5rem;
+}
+
+.odt-dropdown__item:hover,
+.odt-dropdown__item:focus-visible,
+.odt-dropdown__item[data-highlighted="true"] {
+  background-color: var(--color-surface-subtle);
+  color: var(--color-neutral-950);
+}
+
+.odt-dropdown__item:active {
+  background-color: var(--color-neutral-200);
+  transform: scale(0.99);
+}
+
+.odt-dropdown__item--inset {
+  padding-left: 2.125rem;
+}
+
+.odt-dropdown__item:disabled,
+.odt-dropdown__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.odt-dropdown__item--destructive {
+  color: var(--color-danger);
+}
+
+.odt-dropdown__item--destructive:hover,
+.odt-dropdown__item--destructive:focus-visible,
+.odt-dropdown__item--destructive[data-highlighted="true"] {
+  background-color: var(--color-surface-danger);
+  color: var(--color-danger);
+}
+
+.odt-dropdown__item-content {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.odt-dropdown__item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-neutral-400);
+  transition: color 120ms ease;
+}
+
+.odt-dropdown__item:hover .odt-dropdown__item-icon,
+.odt-dropdown__item:focus-visible .odt-dropdown__item-icon {
+  color: var(--color-neutral-800);
+}
+
+.odt-dropdown__item--destructive .odt-dropdown__item-icon {
+  color: var(--color-danger);
+}
+
+.odt-dropdown__item-right-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--color-neutral-400);
+}
+
+.odt-dropdown__shortcut {
+  margin-left: auto;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  color: var(--color-neutral-400);
+  background: none;
+  border: none;
+  padding: 0;
+  line-height: 1rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+.odt-dropdown__label-heading {
+  padding: 0.375rem 0.625rem 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-neutral-400);
+  user-select: none;
+}
+
+.odt-dropdown__label-heading--inset {
+  padding-left: 2.125rem;
+}
+
+.odt-dropdown__separator {
+  height: 1px;
+  margin: 0.25rem 0.25rem;
+  background-color: var(--color-line-muted, rgba(226, 232, 240, 0.8));
+  border: none;
+}
+
+.odt-dropdown__group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+