@idds/styles 1.5.32 → 1.5.33

package/dist/index.css

@@ -1256,220 +1256,421 @@ dfn {
   color: var(--ina-secondary);
 }
 /**
- * ActionDropdown Component Styles
+ * Dropdown Component Styles
  * Menggunakan BEM naming convention dengan prefix "ina-"
  */
 .ina-action-dropdown {
-  /* Root container dengan relative positioning */
+  /* Base dropdown container */
   position: relative;
   display: inline-block;
   text-align: left;
 }
+/* Trigger variants */
+/* Trigger variants */
 .ina-action-dropdown__trigger {
-  /* Default trigger button */
-  padding: var(--ina-spacing-1);
-  border-radius: var(--ina-radius-base);
-  outline: none;
   cursor: pointer;
-  background: none;
-  border: none;
-  transition: var(--ina-transition-fast);
+  transition: opacity var(--ina-transition-base);
+  width: 100%; /* Ensure full width availability */
+}
+/* Standardized Trigger Button (Select-like look) */
+.ina-action-dropdown__trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-radius-lg);
+  padding: var(--ina-spacing-2) var(--ina-spacing-4);
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+  cursor: pointer;
+  font-size: var(--ina-font-sm);
+  outline: none;
+  transition: all var(--ina-transition-base);
+  gap: var(--ina-spacing-2);
+  min-height: 40px; /* Match standard input height */
 }
 .ina-action-dropdown__trigger:hover {
-  background-color: var(--ina-neutral-100);
+  background-color: var(--ina-background-secondary);
 }
-.ina-action-dropdown__trigger:focus {
-  outline: 2px solid var(--ina-guide-500);
-  outline-offset: 2px;
+/* Active/Open State for Trigger Button */
+.ina-action-dropdown__trigger--open,
+.ina-action-dropdown__trigger:focus-within {
+  border-color: var(--ina-stroke-tertiary, #141414);
+  background: var(--ina-background-primary, #fff);
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
-.ina-action-dropdown__trigger:focus-visible {
-  outline: 2px solid var(--ina-guide-500);
-  outline-offset: 2px;
+.ina-action-dropdown__label {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ina-action-dropdown__icon {
+  flex-shrink: 0;
+  color: var(--ina-content-tertiary);
+  transition: transform var(--ina-transition-base);
+}
+.ina-action-dropdown__trigger--open .ina-action-dropdown__icon {
+  transform: rotate(180deg);
+}
+.ina-action-dropdown__trigger--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
 }
+/* Menu container */
 .ina-action-dropdown__menu {
-  /* Positioned dropdown menu */
   position: absolute;
-  width: 10rem; /* 160px */
-  background-color: var(--ina-neutral-25); /* white */
+  background-color: var(--ina-background-primary);
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-lg);
   box-shadow: var(--ina-shadow-lg);
   z-index: 1000;
+  opacity: 0;
+  transform: translateY(-0.5rem);
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
+    transform var(--ina-transition-duration-200) ease-out;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  min-width: 100%; /* Default match trigger width */
+  width: -moz-max-content;
+  width: max-content; /* Allow content to dictate width, but at least 100% of trigger */
+  pointer-events: none;
+  visibility: hidden;
+  padding: var(--ina-spacing-0-5);
+  margin-top: var(--ina-spacing-1);
+}
+.ina-action-dropdown__menu--visible {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+  transform: translateY(0);
+}
+/* ... existing styles ... */
+/* Width variants */
+.ina-action-dropdown__menu--width-auto {
+  width: auto;
+  min-width: 160px;
+}
+.ina-action-dropdown__menu--width-sm {
+  min-width: 120px;
+  width: auto;
 }
-/* Vertical positioning */
-.ina-action-dropdown__menu--bottom {
-  top: calc(100% + 0.5rem); /* top-full mt-2 equivalent */
+.ina-action-dropdown__menu--width-md {
+  min-width: 160px;
+  width: auto;
 }
-.ina-action-dropdown__menu--top {
-  bottom: calc(100% + 0.5rem); /* bottom-full mb-2 equivalent */
+.ina-action-dropdown__menu--width-lg {
+  min-width: 200px;
+  width: auto;
 }
-/* Horizontal positioning */
-.ina-action-dropdown__menu--left {
-  right: 0; /* right-0 equivalent */
+.ina-action-dropdown__menu--width-xl {
+  min-width: 240px;
+  width: auto;
 }
-.ina-action-dropdown__menu--right {
-  left: 0; /* left-0 equivalent */
+.ina-action-dropdown__menu--width-full {
+  width: 100%;
 }
+/* Menu list */
 .ina-action-dropdown__list {
-  /* List container untuk menu items */
-  padding: var(--ina-spacing-1) 0; /* py-1 equivalent */
+  padding: var(--ina-spacing-1) 0;
   margin: 0;
   list-style: none;
+  background-color: inherit;
 }
+/* Menu items */
 .ina-action-dropdown__item {
-  /* Individual list item */
   width: 100%;
   text-align: left;
-  padding: var(--ina-spacing-2) var(--ina-spacing-4); /* px-4 py-2 equivalent */
+  padding: var(--ina-spacing-2) var(--ina-spacing-4);
   font-size: var(--ina-font-sm);
+  color: var(--ina-content-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
-          user-select: none; /* select-none equivalent */
-  cursor: pointer;
-  transition: var(--ina-transition-fast);
+          user-select: none;
+  transition: background-color var(--ina-transition-base);
+  display: flex;
+  align-items: center;
+  gap: var(--ina-spacing-2);
+  margin-bottom: 0 !important;
 }
 .ina-action-dropdown__item:hover {
-  background-color: var(--ina-neutral-100);
+  background-color: var(--ina-background-secondary);
 }
 .ina-action-dropdown__item:focus {
   outline: none;
-  background-color: var(--ina-neutral-200);
-}
-/* Animation untuk dropdown appearance */
-.ina-action-dropdown__menu {
-  animation: fadeIn 150ms ease-in-out;
+  background-color: var(--ina-primary-100);
+  color: var(--ina-primary-600);
 }
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
+.ina-action-dropdown__item:active {
+  background-color: var(--ina-background-tertiary);
 }
-/* Focus styles untuk accessibility */
-.ina-action-dropdown__trigger[aria-expanded='true'] {
-  background-color: var(--ina-neutral-100);
+/* Item variants */
+.ina-action-dropdown__item--danger {
+  color: var(--ina-negative-600);
 }
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .ina-action-dropdown__item {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
-  }
-
-  .ina-action-dropdown__menu {
-    width: 9rem; /* Sedikit lebih kecil di mobile */
-  }
+.ina-action-dropdown__item--danger:hover {
+  background-color: var(--ina-negative-100);
 }
-/* Dark mode support (future consideration) */
-/* @media (prefers-color-scheme: dark) {
-  .ina-action-dropdown__menu {
-    background-color: var(--ina-neutral-900);
-    border-color: var(--ina-neutral-700);
-  }
-
-  .ina-action-dropdown__item:hover {
-    background-color: var(--ina-neutral-800);
-  }
-
-  .ina-action-dropdown__trigger:hover {
-    background-color: var(--ina-neutral-800);
-  }
-} */
-/**
- * Alert Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-" dan variant modifiers
- */
-.ina-alert {
-  /* Base alert styling */
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ina-spacing-2);
-  border-radius: var(--ina-radius-lg);
-  padding: var(--ina-spacing-4);
-  border: 1px solid;
-  box-sizing: border-box;
+.ina-action-dropdown__item--warning {
+  color: var(--ina-warning-600);
 }
-.ina-alert__icon {
-  /* Container untuk icon/variant */
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.ina-action-dropdown__item--warning:hover {
+  background-color: var(--ina-warning-100);
 }
-.ina-alert__content {
-  /* Main content area */
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  gap: 0;
+.ina-action-dropdown__item--success {
+  color: var(--ina-positive-600);
 }
-.ina-alert__text-section {
-  /* Container untuk title dan description */
-  display: flex;
-  flex-direction: column;
-  gap: 0;
+.ina-action-dropdown__item--success:hover {
+  background-color: var(--ina-positive-100);
 }
-.ina-alert__title {
-  /* Alert title */
-  font-weight: var(--ina-font-semibold);
-  font-size: var(--ina-font-sm);
-  line-height: var(--ina-line-height-sm);
-  margin: 0;
+.ina-action-dropdown__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--ina-content-tertiary);
 }
-.ina-alert__description {
-  /* Alert description/subtitle */
-  font-size: var(--ina-font-xs);
-  line-height: var(--ina-line-height-xs);
-  margin: 0;
-  margin-top: var(--ina-spacing-1);
-  color: var(--ina-content-primary, var(--ina-neutral-800));
+.ina-action-dropdown__item--disabled:hover {
+  background-color: transparent;
 }
-.ina-alert__action {
-  /* Optional action node area */
-  margin-left: var(--ina-spacing-4);
+/* Item with icons */
+.ina-action-dropdown__item-icon {
   flex-shrink: 0;
+  width: 16px;
+  height: 16px;
 }
-.ina-alert__close-button {
-  /* Close button */
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ina-content-primary, var(--ina-neutral-800));
-
-  /* Focus styles */
-  outline: none;
+.ina-action-dropdown__item-content {
+  flex: 1;
+  min-width: 0;
 }
-.ina-alert__close-button:focus {
-  outline: 2px solid var(--ina-guide-500);
-  outline-offset: 2px;
-  border-radius: var(--ina-radius-sm);
+.ina-action-dropdown__item-description {
+  font-size: var(--ina-font-xs);
+  color: var(--ina-content-secondary);
+  margin-top: var(--ina-spacing-0-5);
 }
-.ina-alert__close-icon {
-  /* Icon di dalam close button */
-  transition: stroke-width 150ms ease;
+/* Separators */
+.ina-action-dropdown__separator {
+  height: 1px;
+  background-color: var(--ina-stroke-primary);
+  margin: var(--ina-spacing-1) var(--ina-spacing-4);
 }
-.ina-alert__close-button:hover .ina-alert__close-icon {
-  stroke-width: 2;
+/* Dividers */
+.ina-action-dropdown__divider {
+  height: var(--ina-spacing-4);
 }
-/* Variant modifiers */
-.ina-alert--neutral {
-  background-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-color: var(--ina-stroke-tertiary);
+/* Animation variants */
+.ina-action-dropdown__menu--animation-fade {
+  transform: translateY(0);
+  transition: opacity var(--ina-transition-duration-200) ease-out;
 }
-.ina-alert--neutral .ina-alert__icon,
-.ina-alert--neutral .ina-alert__title {
-  color: var(--ina-content-primary, var(--ina-neutral-800));
+.ina-action-dropdown__menu--animation-slide-up {
+  transform: translateY(1rem);
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
+    transform var(--ina-transition-duration-200) ease-out;
 }
-.ina-alert--info {
+.ina-action-dropdown__menu--animation-slide-down {
+  transform: translateY(-1rem);
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
+    transform var(--ina-transition-duration-200) ease-out;
+}
+.ina-action-dropdown__menu--animation-scale {
+  transform: scale(0.95);
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
+    transform var(--ina-transition-duration-200) ease-out;
+}
+/* All visible states */
+.ina-action-dropdown__menu--animation-fade.ina-action-dropdown__menu--visible,
+.ina-action-dropdown__menu--animation-slide-up.ina-action-dropdown__menu--visible,
+.ina-action-dropdown__menu--animation-slide-down.ina-action-dropdown__menu--visible,
+.ina-action-dropdown__menu--animation-scale.ina-action-dropdown__menu--visible {
+  transform: translateY(0) scale(1);
+}
+/* Backdrop click area */
+.ina-action-dropdown__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+}
+/* Grouped items */
+.ina-action-dropdown__group {
+  margin: var(--ina-spacing-2) 0;
+}
+.ina-action-dropdown__group:first-child {
+  margin-top: 0;
+}
+.ina-action-dropdown__group:last-child {
+  margin-bottom: 0;
+}
+.ina-action-dropdown__group-header {
+  padding: var(--ina-spacing-1) var(--ina-spacing-4) var(--ina-spacing-0-5);
+  font-size: var(--ina-font-xs);
+  font-weight: var(--ina-font-medium);
+  color: var(--ina-content-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+/* Loading states */
+.ina-action-dropdown__loading {
+  padding: var(--ina-spacing-2) var(--ina-spacing-4);
+  text-align: center;
+  color: var(--ina-content-secondary);
+  font-size: var(--ina-font-sm);
+}
+.ina-action-dropdown__spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--ina-primary-100);
+  border-radius: 50%;
+  border-top-color: var(--ina-primary-500);
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-action-dropdown__menu--width-lg,
+  .ina-action-dropdown__menu--width-xl {
+    width: calc(100vw - var(--ina-spacing-8));
+    max-width: 300px;
+  }
+}
+@media (max-width: 768px) {
+  .ina-action-dropdown__item {
+    padding: var(--ina-spacing-3) var(--ina-spacing-4);
+    font-size: var(--ina-font-base);
+  }
+}
+/* Scrollable content */
+.ina-action-dropdown__menu--scrollable {
+  max-height: 300px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ina-content-tertiary) var(--ina-background-tertiary);
+}
+.ina-action-dropdown__menu--scrollable::-webkit-scrollbar {
+  width: 6px;
+}
+.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-track {
+  background: var(--ina-background-tertiary);
+  border-radius: 3px;
+}
+.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--ina-content-tertiary);
+  border-radius: 3px;
+}
+.ina-action-dropdown__menu--scrollable::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ina-content-secondary);
+}
+/* Focus management */
+.ina-action-dropdown__menu:focus-within .ina-action-dropdown__item:focus {
+  background-color: var(--ina-primary-100);
+}
+/**
+ * Alert Component Styles
+ * Menggunakan BEM naming convention dengan prefix "ina-" dan variant modifiers
+ */
+.ina-alert {
+  /* Base alert styling */
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ina-spacing-2);
+  border-radius: var(--ina-radius-lg);
+  padding: var(--ina-spacing-4);
+  border: 1px solid;
+  box-sizing: border-box;
+}
+.ina-alert__icon {
+  /* Container untuk icon/variant */
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ina-alert__content {
+  /* Main content area */
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 0;
+}
+.ina-alert__text-section {
+  /* Container untuk title dan description */
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.ina-alert__title {
+  /* Alert title */
+  font-weight: var(--ina-font-semibold);
+  font-size: var(--ina-font-sm);
+  line-height: var(--ina-line-height-sm);
+  margin: 0;
+}
+.ina-alert__description {
+  /* Alert description/subtitle */
+  font-size: var(--ina-font-xs);
+  line-height: var(--ina-line-height-xs);
+  margin: 0;
+  margin-top: var(--ina-spacing-1);
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+}
+.ina-alert__action {
+  /* Optional action node area */
+  margin-left: var(--ina-spacing-4);
+  flex-shrink: 0;
+}
+.ina-alert__close-button {
+  /* Close button */
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+
+  /* Focus styles */
+  outline: none;
+}
+.ina-alert__close-button:focus {
+  outline: 2px solid var(--ina-guide-500);
+  outline-offset: 2px;
+  border-radius: var(--ina-radius-sm);
+}
+.ina-alert__close-icon {
+  /* Icon di dalam close button */
+  transition: stroke-width 150ms ease;
+}
+.ina-alert__close-button:hover .ina-alert__close-icon {
+  stroke-width: 2;
+}
+/* Variant modifiers */
+.ina-alert--neutral {
+  background-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-color: var(--ina-stroke-tertiary);
+}
+.ina-alert--neutral .ina-alert__icon,
+.ina-alert--neutral .ina-alert__title {
+  color: var(--ina-content-primary, var(--ina-neutral-800));
+}
+.ina-alert--info {
   background-color: var(--ina-guide-100, var(--ina-blue-100));
   border-color: var(--ina-guide-500, var(--ina-blue-500));
 }
@@ -1943,8 +2144,8 @@ dfn {
   border-color: var(--ina-stroke-tertiary, #141414);
   background: var(--ina-background-primary, #ffffff);
   box-shadow:
-    0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 .ina-basic-dropdown__trigger-content {
   flex: 1;
@@ -3312,22 +3513,22 @@ dialog.bottom-sheet-dropdown {
 .ina-checkbox__input:focus + .ina-checkbox__box {
   outline: none;
   box-shadow:
-    0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 /* Focus state untuk indeterminate checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
   outline: none;
   box-shadow:
-    0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 /* Focus state untuk checked checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--checked {
   outline: none;
   box-shadow:
-    0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 /* Invalid state yang tidak disabled */
 .ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
@@ -5420,581 +5621,221 @@ dialog.bottom-sheet-dropdown {
   gap: var(--ina-spacing-2);
 }
 .ina-drawer__footer--position-center {
-  display: flex;
-  justify-content: center;
-  gap: var(--ina-spacing-2);
-}
-.ina-drawer__footer--position-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-/* Animation states */
-.ina-drawer--closing {
-  animation: overlayFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-@keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-/* Position-specific closing animations with smooth easing */
-.ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
-  animation: panelSlideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-.ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel {
-  animation: panelSlideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-.ina-drawer--closing.ina-drawer--position-top .ina-drawer__panel {
-  animation: panelSlideOutTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-.ina-drawer--closing.ina-drawer--position-bottom .ina-drawer__panel {
-  animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-/* Mobile: left/right use bottom closing animation */
-@media (max-width: 640px) {
-  .ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
-    animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  }
-}
-@keyframes panelSlideOut {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-/* Position-specific slide-out animations with smooth easing */
-@keyframes panelSlideOutRight {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-@keyframes panelSlideOutLeft {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-@keyframes panelSlideOutTop {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-@keyframes panelSlideOutBottom {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-/* Position-specific animations - Fixed positioning */
-.ina-drawer--position-right .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateX(0);
-}
-.ina-drawer--position-left .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateX(0);
-}
-.ina-drawer--position-top .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateY(0);
-}
-.ina-drawer--position-bottom .ina-drawer__panel {
-  /* Panel should be visible by default, not hidden */
-  transform: translateY(0);
-}
-/* Mobile: left/right use bottom transform */
-@media (max-width: 640px) {
-  .ina-drawer--position-left .ina-drawer__panel,
-  .ina-drawer--position-right .ina-drawer__panel {
-    transform: translateY(0);
-  }
-}
-/* Variant styles */
-.ina-drawer--variant-glass .ina-drawer__panel {
-  background-color: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-}
-.ina-drawer--variant-floating .ina-drawer__panel {
-  margin: var(--ina-spacing-8);
-  border-radius: var(--ina-radius-xl);
-  box-shadow: var(--ina-shadow-2xl);
-}
-.ina-drawer--variant-minimal .ina-drawer__panel {
-  box-shadow: none;
-  border: 1px solid var(--ina-stroke-primary);
-}
-/* Size variants with max-width */
-.ina-drawer__panel--fullscreen {
-  width: 100vw !important;
-  height: 100vh !important;
-  max-width: 100vw !important;
-  max-height: 100vh !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-}
-/* Dark mode support */
-/* @media (prefers-color-scheme: dark) {
-  .ina-drawer__backdrop {
-    background-color: rgba(0, 0, 0, 0.7);
-  }
-
-  .ina-drawer__panel {
-    background-color: var(--ina-background-dark-primary);
-    border-color: var(--ina-stroke-primary-dark);
-  }
-
-  .ina-drawer__header {
-    border-color: var(--ina-stroke-primary-dark);
-  }
-
-  .ina-drawer__title {
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-drawer__close-button {
-    color: var(--ina-content-dark-secondary);
-  }
-
-  .ina-drawer__close-button:hover {
-    background-color: var(--ina-neutral-800);
-    color: var(--ina-content-dark-primary);
-  }
-
-  .ina-drawer__footer {
-    border-color: var(--ina-stroke-primary-dark);
-  }
-
-  .ina-drawer--variant-glass .ina-drawer__panel {
-    background-color: rgba(0, 0, 0, 0.95);
-    border-color: rgba(255, 255, 255, 0.1);
-  }
-
-  .ina-drawer--variant-minimal .ina-drawer__panel {
-    border-color: var(--ina-stroke-primary-dark);
-  }
-} */
-/* Accessibility improvements */
-.ina-drawer__close-button:focus-visible {
-  outline: 2px solid var(--ina-primary-500);
-  outline-offset: 2px;
-}
-/* High contrast mode */
-@media (prefers-contrast: high) {
-  .ina-drawer__panel {
-    border: 2px solid var(--ina-content-primary);
-  }
-
-  .ina-drawer__header,
-  .ina-drawer__footer {
-    border-width: 2px;
-  }
-}
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .ina-drawer,
-  .ina-drawer__backdrop,
-  .ina-drawer__panel,
-  .ina-drawer__close-button {
-    animation: none;
-    transition: none;
-  }
-
-  .ina-drawer__panel {
-    transform: none !important;
-  }
-}
-/* Print styles */
-@media print {
-  .ina-drawer {
-    display: none;
-  }
-}
-/**
- * Dropdown Component Styles
- * Menggunakan BEM naming convention dengan prefix "ina-"
- */
-.ina-dropdown {
-  /* Base dropdown container */
-  position: relative;
-  display: inline-block;
-  text-align: left;
-}
-/* Trigger variants */
-/* Trigger variants */
-.ina-dropdown__trigger {
-  cursor: pointer;
-  transition: opacity var(--ina-transition-base);
-  width: 100%; /* Ensure full width availability */
-}
-/* Standardized Trigger Button (Select-like look) */
-.ina-dropdown__trigger-button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  padding: var(--ina-spacing-2) var(--ina-spacing-4);
-  background-color: var(--ina-background-primary);
-  color: var(--ina-content-primary);
-  cursor: pointer;
-  font-size: var(--ina-font-sm);
-  outline: none;
-  transition: all var(--ina-transition-base);
-  gap: var(--ina-spacing-2);
-  min-height: 40px; /* Match standard input height */
-}
-.ina-dropdown__trigger-button:hover {
-  background-color: var(--ina-background-secondary);
-}
-/* Active/Open State for Trigger Button */
-.ina-dropdown__trigger-button--open,
-.ina-dropdown__trigger-button:focus-within {
-  border-color: var(--ina-stroke-tertiary, #141414);
-  background: var(--ina-background-primary, #fff);
-  box-shadow:
-    0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414);
-}
-.ina-dropdown__trigger-content {
-  flex: 1;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ina-dropdown__trigger-icon {
-  flex-shrink: 0;
-  color: var(--ina-content-tertiary);
-  transition: transform var(--ina-transition-base);
-}
-.ina-dropdown__trigger-button--open .ina-dropdown__trigger-icon {
-  transform: rotate(180deg);
-}
-.ina-dropdown__trigger--disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-/* Menu container */
-.ina-dropdown__menu {
-  position: absolute;
-  background-color: var(--ina-background-primary);
-  border: 1px solid var(--ina-stroke-primary);
-  border-radius: var(--ina-radius-lg);
-  box-shadow: var(--ina-shadow-lg);
-  z-index: 1000;
-  opacity: 0;
-  transform: translateY(-0.5rem);
-  transition:
-    opacity var(--ina-transition-duration-200) ease-out,
-    transform var(--ina-transition-duration-200) ease-out;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-  min-width: 100%; /* Default match trigger width */
-  width: -moz-max-content;
-  width: max-content; /* Allow content to dictate width, but at least 100% of trigger */
-  pointer-events: none;
-  visibility: hidden;
-  padding: var(--ina-spacing-0-5);
-  margin-top: var(--ina-spacing-1);
-}
-.ina-dropdown__menu--visible {
-  opacity: 1;
-  pointer-events: auto;
-  visibility: visible;
-  transform: translateY(0);
-}
-/* ... existing styles ... */
-/* Width variants */
-.ina-dropdown__menu--width-auto {
-  width: auto;
-  min-width: 160px;
-}
-.ina-dropdown__menu--width-sm {
-  min-width: 120px;
-  width: auto;
-}
-.ina-dropdown__menu--width-md {
-  min-width: 160px;
-  width: auto;
-}
-.ina-dropdown__menu--width-lg {
-  min-width: 200px;
-  width: auto;
-}
-.ina-dropdown__menu--width-xl {
-  min-width: 240px;
-  width: auto;
-}
-.ina-dropdown__menu--width-full {
-  width: 100%;
-}
-/* Menu list */
-.ina-dropdown__list {
-  padding: var(--ina-spacing-1) 0;
-  margin: 0;
-  list-style: none;
-  background-color: inherit;
-}
-/* Menu items */
-.ina-dropdown__item {
-  width: 100%;
-  text-align: left;
-  padding: var(--ina-spacing-2) var(--ina-spacing-4);
-  font-size: var(--ina-font-sm);
-  color: var(--ina-content-primary);
-  background: none;
-  border: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  transition: background-color var(--ina-transition-base);
-  display: flex;
-  align-items: center;
-  gap: var(--ina-spacing-2);
-  margin-bottom: 0 !important;
-}
-.ina-dropdown__item:hover {
-  background-color: var(--ina-background-secondary);
-}
-.ina-dropdown__item:focus {
-  outline: none;
-  background-color: var(--ina-primary-100);
-  color: var(--ina-primary-600);
-}
-.ina-dropdown__item:active {
-  background-color: var(--ina-background-tertiary);
-}
-/* Item variants */
-.ina-dropdown__item--danger {
-  color: var(--ina-negative-600);
-}
-.ina-dropdown__item--danger:hover {
-  background-color: var(--ina-negative-100);
-}
-.ina-dropdown__item--warning {
-  color: var(--ina-warning-600);
-}
-.ina-dropdown__item--warning:hover {
-  background-color: var(--ina-warning-100);
-}
-.ina-dropdown__item--success {
-  color: var(--ina-positive-600);
-}
-.ina-dropdown__item--success:hover {
-  background-color: var(--ina-positive-100);
-}
-.ina-dropdown__item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  color: var(--ina-content-tertiary);
-}
-.ina-dropdown__item--disabled:hover {
-  background-color: transparent;
-}
-/* Item with icons */
-.ina-dropdown__item-icon {
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+  display: flex;
+  justify-content: center;
+  gap: var(--ina-spacing-2);
 }
-.ina-dropdown__item-content {
-  flex: 1;
-  min-width: 0;
+.ina-drawer__footer--position-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-.ina-dropdown__item-description {
-  font-size: var(--ina-font-xs);
-  color: var(--ina-content-secondary);
-  margin-top: var(--ina-spacing-0-5);
+/* Animation states */
+.ina-drawer--closing {
+  animation: overlayFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
-/* Separators */
-.ina-dropdown__separator {
-  height: 1px;
-  background-color: var(--ina-stroke-primary);
-  margin: var(--ina-spacing-1) var(--ina-spacing-4);
+@keyframes overlayFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
-/* Dividers */
-.ina-dropdown__divider {
-  height: var(--ina-spacing-4);
+/* Position-specific closing animations with smooth easing */
+.ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
+  animation: panelSlideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
-/* Animation variants */
-.ina-dropdown__menu--animation-fade {
-  transform: translateY(0);
-  transition: opacity var(--ina-transition-duration-200) ease-out;
+.ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel {
+  animation: panelSlideOutLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
-.ina-dropdown__menu--animation-slide-up {
-  transform: translateY(1rem);
-  transition:
-    opacity var(--ina-transition-duration-200) ease-out,
-    transform var(--ina-transition-duration-200) ease-out;
+.ina-drawer--closing.ina-drawer--position-top .ina-drawer__panel {
+  animation: panelSlideOutTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
-.ina-dropdown__menu--animation-slide-down {
-  transform: translateY(-1rem);
-  transition:
-    opacity var(--ina-transition-duration-200) ease-out,
-    transform var(--ina-transition-duration-200) ease-out;
+.ina-drawer--closing.ina-drawer--position-bottom .ina-drawer__panel {
+  animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
-.ina-dropdown__menu--animation-scale {
-  transform: scale(0.95);
-  transition:
-    opacity var(--ina-transition-duration-200) ease-out,
-    transform var(--ina-transition-duration-200) ease-out;
+/* Mobile: left/right use bottom closing animation */
+@media (max-width: 640px) {
+  .ina-drawer--closing.ina-drawer--position-left .ina-drawer__panel,
+  .ina-drawer--closing.ina-drawer--position-right .ina-drawer__panel {
+    animation: panelSlideOutBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
 }
-/* All visible states */
-.ina-dropdown__menu--animation-fade.ina-dropdown__menu--visible,
-.ina-dropdown__menu--animation-slide-up.ina-dropdown__menu--visible,
-.ina-dropdown__menu--animation-slide-down.ina-dropdown__menu--visible,
-.ina-dropdown__menu--animation-scale.ina-dropdown__menu--visible {
-  transform: translateY(0) scale(1);
+@keyframes panelSlideOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
 }
-/* Backdrop click area */
-.ina-dropdown__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 999;
+/* Position-specific slide-out animations with smooth easing */
+@keyframes panelSlideOutRight {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
 }
-/* Grouped items */
-.ina-dropdown__group {
-  margin: var(--ina-spacing-2) 0;
+@keyframes panelSlideOutLeft {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
 }
-.ina-dropdown__group:first-child {
-  margin-top: 0;
+@keyframes panelSlideOutTop {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
 }
-.ina-dropdown__group:last-child {
-  margin-bottom: 0;
+@keyframes panelSlideOutBottom {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
 }
-.ina-dropdown__group-header {
-  padding: var(--ina-spacing-1) var(--ina-spacing-4) var(--ina-spacing-0-5);
-  font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+/* Position-specific animations - Fixed positioning */
+.ina-drawer--position-right .ina-drawer__panel {
+  /* Panel should be visible by default, not hidden */
+  transform: translateX(0);
 }
-/* Loading states */
-.ina-dropdown__loading {
-  padding: var(--ina-spacing-2) var(--ina-spacing-4);
-  text-align: center;
-  color: var(--ina-content-secondary);
-  font-size: var(--ina-font-sm);
+.ina-drawer--position-left .ina-drawer__panel {
+  /* Panel should be visible by default, not hidden */
+  transform: translateX(0);
 }
-.ina-dropdown__spinner {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--ina-primary-100);
-  border-radius: 50%;
-  border-top-color: var(--ina-primary-500);
-  animation: spin 1s linear infinite;
+.ina-drawer--position-top .ina-drawer__panel {
+  /* Panel should be visible by default, not hidden */
+  transform: translateY(0);
 }
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.ina-drawer--position-bottom .ina-drawer__panel {
+  /* Panel should be visible by default, not hidden */
+  transform: translateY(0);
 }
-/* Responsive adjustments */
+/* Mobile: left/right use bottom transform */
 @media (max-width: 640px) {
-  .ina-dropdown__menu--width-lg,
-  .ina-dropdown__menu--width-xl {
-    width: calc(100vw - var(--ina-spacing-8));
-    max-width: 300px;
-  }
-}
-@media (max-width: 768px) {
-  .ina-dropdown__item {
-    padding: var(--ina-spacing-3) var(--ina-spacing-4);
-    font-size: var(--ina-font-base);
+  .ina-drawer--position-left .ina-drawer__panel,
+  .ina-drawer--position-right .ina-drawer__panel {
+    transform: translateY(0);
   }
 }
-/* Scrollable content */
-.ina-dropdown__menu--scrollable {
-  max-height: 300px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ina-content-tertiary) var(--ina-background-tertiary);
-}
-.ina-dropdown__menu--scrollable::-webkit-scrollbar {
-  width: 6px;
+/* Variant styles */
+.ina-drawer--variant-glass .ina-drawer__panel {
+  background-color: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
 }
-.ina-dropdown__menu--scrollable::-webkit-scrollbar-track {
-  background: var(--ina-background-tertiary);
-  border-radius: 3px;
+.ina-drawer--variant-floating .ina-drawer__panel {
+  margin: var(--ina-spacing-8);
+  border-radius: var(--ina-radius-xl);
+  box-shadow: var(--ina-shadow-2xl);
 }
-.ina-dropdown__menu--scrollable::-webkit-scrollbar-thumb {
-  background-color: var(--ina-content-tertiary);
-  border-radius: 3px;
+.ina-drawer--variant-minimal .ina-drawer__panel {
+  box-shadow: none;
+  border: 1px solid var(--ina-stroke-primary);
 }
-.ina-dropdown__menu--scrollable::-webkit-scrollbar-thumb:hover {
-  background-color: var(--ina-content-secondary);
+/* Size variants with max-width */
+.ina-drawer__panel--fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
 }
 /* Dark mode support */
 /* @media (prefers-color-scheme: dark) {
-  .ina-dropdown__menu {
+  .ina-drawer__backdrop {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .ina-drawer__panel {
     background-color: var(--ina-background-dark-primary);
     border-color: var(--ina-stroke-primary-dark);
   }
 
-  .ina-dropdown__item {
+  .ina-drawer__header {
+    border-color: var(--ina-stroke-primary-dark);
+  }
+
+  .ina-drawer__title {
     color: var(--ina-content-dark-primary);
   }
 
-  .ina-dropdown__item:hover {
+  .ina-drawer__close-button {
+    color: var(--ina-content-dark-secondary);
+  }
+
+  .ina-drawer__close-button:hover {
     background-color: var(--ina-neutral-800);
+    color: var(--ina-content-dark-primary);
   }
 
-  .ina-dropdown__item:focus {
-    background-color: var(--ina-primary-900);
-    color: var(--ina-primary-400);
+  .ina-drawer__footer {
+    border-color: var(--ina-stroke-primary-dark);
   }
 
-  .ina-dropdown__item--disabled {
-    color: var(--ina-content-dark-disabled);
+  .ina-drawer--variant-glass .ina-drawer__panel {
+    background-color: rgba(0, 0, 0, 0.95);
+    border-color: rgba(255, 255, 255, 0.1);
   }
 
-  .ina-dropdown__separator {
-    background-color: var(--ina-stroke-primary-dark);
+  .ina-drawer--variant-minimal .ina-drawer__panel {
+    border-color: var(--ina-stroke-primary-dark);
+  }
+} */
+/* Accessibility improvements */
+.ina-drawer__close-button:focus-visible {
+  outline: 2px solid var(--ina-primary-500);
+  outline-offset: 2px;
+}
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .ina-drawer__panel {
+    border: 2px solid var(--ina-content-primary);
   }
 
-  .ina-dropdown__group-header {
-    color: var(--ina-content-dark-secondary);
+  .ina-drawer__header,
+  .ina-drawer__footer {
+    border-width: 2px;
+  }
+}
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ina-drawer,
+  .ina-drawer__backdrop,
+  .ina-drawer__panel,
+  .ina-drawer__close-button {
+    animation: none;
+    transition: none;
   }
 
-  .ina-dropdown__loading {
-    color: var(--ina-content-dark-secondary);
+  .ina-drawer__panel {
+    transform: none !important;
+  }
+}
+/* Print styles */
+@media print {
+  .ina-drawer {
+    display: none;
   }
-} */
-/* Focus management */
-.ina-dropdown__menu:focus-within .ina-dropdown__item:focus {
-  background-color: var(--ina-primary-100);
 }
 /**
  * FieldInputTable Component Styles
@@ -9623,8 +9464,8 @@ dialog.bottom-sheet-dropdown {
 /* Checked + Focus - Keep focus ring */
 .ina-radio-input__field:checked:focus-visible:not(:disabled) {
   box-shadow:
-    0 0 0 1px #fff,
-    0 0 0 2px var(--ina-primary-primary, #141414);
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 /* Disabled states */
 .ina-radio-input__field:disabled {