@idds/styles 1.5.27 → 1.5.29

package/dist/index.css

@@ -3092,7 +3092,9 @@ dialog.bottom-sheet-dropdown {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+  transition:
+    background-color 150ms ease-in-out,
+    border-color 150ms ease-in-out;
 }
 @media (min-width: 768px) {
   .ina-checkbox__box {
@@ -3179,17 +3181,26 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-neutral-400);
 }
 /* Focus state menggunakan peer selector untuk accessibility */
+/* Focus state menggunakan peer selector untuk accessibility */
 .ina-checkbox__input:focus + .ina-checkbox__box {
-  outline: 3px solid #f3f3f3;
-  outline-offset: -1px;
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 /* Focus state untuk indeterminate checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--indeterminate {
-  outline: 3px solid #f3f3f3;
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 /* Focus state untuk checked checkbox */
 .ina-checkbox__input:focus + .ina-checkbox__box--checked {
-  outline: 3px solid #f3f3f3;
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 /* Invalid state yang tidak disabled */
 .ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
@@ -3745,11 +3756,12 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-background-secondary);
 }
 .ina-date-picker__trigger:focus {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-stroke-primary);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
   outline: none;
   background-color: var(--ina-background-primary);
-  border-color: var(--ina-content-primary);
+  border-color: var(--ina-stroke-tertiary, #141414);
 }
 .ina-date-picker__trigger--disabled {
   background-color: var(--ina-background-secondary);
@@ -3822,7 +3834,8 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-background-primary);
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-xl);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
     0 10px 10px -5px rgba(0, 0, 0, 0.04);
   padding: var(--ina-spacing-4);
   animation: date-picker-panel-fade-in 0.15s ease-out;
@@ -5492,13 +5505,61 @@ dialog.bottom-sheet-dropdown {
   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.5;
+  opacity: 0.6;
   cursor: not-allowed;
+  pointer-events: none;
 }
 /* Menu container */
 .ina-dropdown__menu {
@@ -5510,37 +5571,26 @@ dialog.bottom-sheet-dropdown {
   z-index: 1000;
   opacity: 0;
   transform: translateY(-0.5rem);
-  transition: opacity var(--ina-transition-duration-200) ease-out,
+  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);
 }
-/* Positioning variants */
-.ina-dropdown__menu--position-bottom {
-  top: 100%;
-  margin-top: var(--ina-spacing-1);
-}
-.ina-dropdown__menu--position-top {
-  bottom: 100%;
-  margin-bottom: var(--ina-spacing-1);
-  transform: translateY(0.5rem);
-}
-.ina-dropdown__menu--position-bottom.ina-dropdown__menu--visible {
-  transform: translateY(0);
-}
-.ina-dropdown__menu--position-top.ina-dropdown__menu--visible {
-  transform: translateY(0);
-}
-.ina-dropdown__menu--align-right {
-  left: 0;
-}
-.ina-dropdown__menu--align-left {
-  right: 0;
-}
+/* ... existing styles ... */
 /* Width variants */
 .ina-dropdown__menu--width-auto {
   width: auto;
@@ -5548,15 +5598,19 @@ dialog.bottom-sheet-dropdown {
 }
 .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%;
@@ -5657,17 +5711,20 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-dropdown__menu--animation-slide-up {
   transform: translateY(1rem);
-  transition: opacity var(--ina-transition-duration-200) ease-out,
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
     transform var(--ina-transition-duration-200) ease-out;
 }
 .ina-dropdown__menu--animation-slide-down {
   transform: translateY(-1rem);
-  transition: opacity var(--ina-transition-duration-200) ease-out,
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
     transform var(--ina-transition-duration-200) ease-out;
 }
 .ina-dropdown__menu--animation-scale {
   transform: scale(0.95);
-  transition: opacity var(--ina-transition-duration-200) ease-out,
+  transition:
+    opacity var(--ina-transition-duration-200) ease-out,
     transform var(--ina-transition-duration-200) ease-out;
 }
 /* All visible states */
@@ -8622,6 +8679,16 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper--size-lg {
   height: 48px;
 }
+.ina-phone-input__country-flag-img {
+  width: 26px;
+  height: 20px;
+  display: block;
+  -o-object-fit: contain;
+     object-fit: contain;
+  box-shadow:
+    0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 2px var(--ina-neutral-25) !important;
+}
 /* Responsive adjustments */
 @media (max-width: 767px) {
   .ina-phone-input__wrapper--size-sm {
@@ -8635,6 +8702,10 @@ dialog.bottom-sheet-dropdown {
   }
 }
 @media (max-width: 639px) {
+  .ina-phone-input__country-flag-img {
+    width: 20px;
+    height: 15px;
+  }
   .ina-phone-input__wrapper {
     padding: var(--ina-spacing-2) var(--ina-spacing-3);
   }
@@ -8703,14 +8774,6 @@ dialog.bottom-sheet-dropdown {
   font-size: var(--ina-font-sm);
   height: 100%;
 }
-.ina-phone-input__country-flag-img {
-  width: 20px;
-  height: 15px;
-  display: block;
-  -o-object-fit: contain;
-     object-fit: contain;
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 2px var(--ina-neutral-25) !important;
-}
 .ina-phone-input__country-code {
   font-weight: var(--ina-font-medium);
   white-space: nowrap;
@@ -8772,27 +8835,33 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-error:focus-within {
   border-color: var(--ina-negative-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-negative-50) !important;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-50) !important;
 }
 .ina-phone-input__wrapper--status-warning {
   border-color: var(--ina-warning-500);
 }
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50) !important;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-50) !important;
 }
 .ina-phone-input__wrapper--status-success {
   border-color: var(--ina-positive-600);
 }
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-positive-50) !important;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-50) !important;
 }
 /* Focus styles */
 .ina-phone-input__wrapper:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -8828,33 +8897,36 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__country-dropdown {
   position: absolute;
   top: 100%;
-  left: 0;
-  margin-top: var(--ina-spacing-1);
+  left: calc(-1 * var(--ina-spacing-3, 12px));
+  margin-top: var(--ina-spacing-3, 12px);
   background: 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: 100;
   width: 300px; /* Or min-content depending on design */
-  max-height: 240px;
+  max-height: 348px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  padding: var(--ina-spacing-2);
 }
 .ina-phone-input__country-search {
-  padding: var(--ina-spacing-2);
-  border-bottom: 1px solid var(--ina-stroke-primary);
+  padding: var(--ina-spacing-1) 0 var(--ina-spacing-2) 0;
 }
 .ina-phone-input__country-search-input {
   width: 100%;
   padding: var(--ina-spacing-1) var(--ina-spacing-2);
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-md);
-  font-size: var(--ina-font-sm);
+  font-size: var(--ina-font-xs);
 }
 .ina-phone-input__country-search-input:focus {
   outline: none;
   border-color: var(--ina-content-primary);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary);
 }
 .ina-phone-input__country-list {
   overflow-y: auto;
@@ -8873,15 +8945,17 @@ dialog.bottom-sheet-dropdown {
   gap: var(--ina-spacing-2);
 }
 .ina-phone-input__country-option:hover {
-  background-color: var(--ina-neutral-50);
+  background-color: var(--ina-background-secondary, #f5f5f5);
+  border-radius: var(--ina-radius-base, 4px);
 }
 .ina-phone-input__country-option--selected {
-  background-color: var(--ina-neutral-50); /* Or primary-50 */
-  font-weight: var(--ina-font-medium);
+  background-color: var(--ina-background-secondary, #f5f5f5);
+  border-radius: var(--ina-radius-base, 4px);
 }
 .ina-phone-input__country-name {
   flex: 1;
   font-size: var(--ina-font-sm);
+  font-weight: 400;
   color: var(--ina-content-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -9345,15 +9419,20 @@ dialog.bottom-sheet-dropdown {
 }
 /* Hover state - Add drop shadow */
 .ina-radio-input__field:hover:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+  box-shadow: 0 0 3px #737373;
 }
-/* Focus state - Add drop shadow */
-.ina-radio-input__field:focus-visible:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+/* Focus state - Add box shadow */
+.ina-radio-input__field:focus-within:not(:disabled),
+.ina-radio-input__field:focus-visible:not(:disabled),
+.ina-radio-input__field:focus:not(:disabled) {
+  outline: none;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
 }
 /* Active state - Add drop shadow */
 .ina-radio-input__field:active:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+  box-shadow: 0 0 3px #737373;
 }
 /* Selected state */
 .ina-radio-input__field:checked {
@@ -9371,11 +9450,16 @@ dialog.bottom-sheet-dropdown {
   border-radius: 50%;
   background-color: var(--ina-stroke-tertiary, #141414);
 }
-/* Checked + Hover/Focus/Active - Keep drop shadow */
+/* 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);
+}
+/* Checked + Hover/Active - Keep drop shadow */
 .ina-radio-input__field:checked:hover:not(:disabled),
-.ina-radio-input__field:checked:focus-visible:not(:disabled),
 .ina-radio-input__field:checked:active:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+  box-shadow: 0 0 3px #737373;
 }
 /* Disabled states */
 .ina-radio-input__field:disabled {
@@ -9420,30 +9504,31 @@ dialog.bottom-sheet-dropdown {
   cursor: not-allowed;
 }
 /* Size variants */
-/* .ina-radio-input--size-sm .ina-radio-input__main-label {
-  font-size: var(--ina-font-xs);
-}
-
+/* Size variants */
+.ina-radio-input--size-sm .ina-radio-input__main-label,
 .ina-radio-input--size-sm .ina-radio-input__option-label {
   font-size: var(--ina-font-xs);
 }
-
 .ina-radio-input--size-sm .ina-radio-input__field {
   width: 16px;
   height: 16px;
-} */
-/* .ina-radio-input--size-lg .ina-radio-input__main-label {
-  font-size: var(--ina-font-base);
 }
-
+.ina-radio-input--size-sm .ina-radio-input__field:checked::after {
+  width: 8px;
+  height: 8px;
+}
+.ina-radio-input--size-lg .ina-radio-input__main-label,
 .ina-radio-input--size-lg .ina-radio-input__option-label {
   font-size: var(--ina-font-base);
 }
-
 .ina-radio-input--size-lg .ina-radio-input__field {
   width: 24px;
   height: 24px;
-} */
+}
+.ina-radio-input--size-lg .ina-radio-input__field:checked::after {
+  width: 14px;
+  height: 14px;
+}
 /* Orientation variants */
 .ina-radio-input--orientation-horizontal .ina-radio-input__group {
   flex-direction: row;
@@ -9458,9 +9543,10 @@ dialog.bottom-sheet-dropdown {
   margin-left: var(--ina-spacing-1);
 }
 /* Focus indicators */
+/* Focus indicators */
 .ina-radio-input__field:focus-visible {
-  outline: 2px solid var(--ina-stroke-tertiary, #141414);
-  outline-offset: 2px;
+  outline: none;
+  outline-offset: 0;
 }
 /* Error state */
 .ina-radio-input--error .ina-radio-input__main-label {
@@ -9490,16 +9576,44 @@ dialog.bottom-sheet-dropdown {
 }
 /* Responsive adjustments */
 @media (max-width: 640px) {
-  .ina-radio-input__main-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
+  /* Scale down LG to MD size equivalent */
+  .ina-radio-input--size-lg .ina-radio-input__field {
+    width: 20px;
+    height: 20px;
+  }
+
+  .ina-radio-input--size-lg .ina-radio-input__field:checked::after {
+    width: 11px;
+    height: 11px;
+  }
+
+  .ina-radio-input--size-lg .ina-radio-input__main-label,
+  .ina-radio-input--size-lg .ina-radio-input__option-label {
+    font-size: var(--ina-font-sm);
+  }
+
+  /* Scale down MD (and default/generic) to SM size equivalent */
+  .ina-radio-input--size-md .ina-radio-input__field,
+  .ina-radio-input:not([class*='ina-radio-input--size-lg'])
+    .ina-radio-input__field {
+    width: 16px;
+    height: 16px;
   }
 
+  .ina-radio-input--size-md .ina-radio-input__field:checked::after {
+    width: 8px;
+    height: 8px;
+  }
+
+  .ina-radio-input--size-md .ina-radio-input__main-label,
+  .ina-radio-input--size-md .ina-radio-input__option-label,
+  .ina-radio-input__main-label,
   .ina-radio-input__option-label {
-    font-size: var(--ina-font-xs); /* Turun dari sm ke xs */
+    font-size: var(--ina-font-xs);
   }
 
   .ina-radio-input__help-text {
-    font-size: var(--ina-font-xs); /* Tetap xs */
+    font-size: var(--ina-font-xs);
   }
 
   .ina-radio-input--orientation-horizontal .ina-radio-input__group {
@@ -9570,12 +9684,35 @@ dialog.bottom-sheet-dropdown {
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-lg);
   padding: var(--ina-spacing-2) var(--ina-spacing-4);
-  background-color: transparent;
+  background-color: var(--ina-background-primary);
   color: var(--ina-content-primary);
   cursor: pointer;
   font-size: inherit;
   outline: none;
   transition: all var(--ina-transition-base);
+  position: relative;
+}
+/* NEW: Trigger Input for Search */
+.ina-select-dropdown__trigger-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+  color: inherit;
+  outline: none;
+  min-width: 0; /* Allow shrinking */
+  cursor: text;
+}
+.ina-select-dropdown__trigger-input::-moz-placeholder {
+  color: var(--ina-content-tertiary);
+}
+.ina-select-dropdown__trigger-input::placeholder {
+  color: var(--ina-content-tertiary);
+}
+.ina-select-dropdown__trigger-input:disabled {
+  cursor: not-allowed;
 }
 /* Size variants */
 .ina-select-dropdown__trigger--size-sm {
@@ -9607,37 +9744,50 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger:hover {
   background-color: var(--ina-background-secondary);
 }
+/* Focus state for trigger when it acts as container */
+.ina-select-dropdown__trigger: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);
+}
 /* Status variants */
 .ina-select-dropdown__trigger--status-neutral {
   border-color: var(--ina-stroke-primary);
 }
-.ina-select-dropdown__trigger--status-neutral:focus-visible {
-  border-color: var(--ina-content-primary);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-background-secondary);
+.ina-select-dropdown__trigger--status-neutral:focus-within {
+  border-color: var(--ina-stroke-tertiary);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-primary-primary, #141414);
 }
 .ina-select-dropdown__trigger--status-error {
   border-color: var(--ina-negative-500);
 }
-.ina-select-dropdown__trigger--status-error:focus-visible {
+.ina-select-dropdown__trigger--status-error:focus-within {
   border-color: var(--ina-negative-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-negative-50);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-50, #141414);
 }
 .ina-select-dropdown__trigger--status-warning {
   border-color: var(--ina-warning-500);
 }
-.ina-select-dropdown__trigger--status-warning:focus-visible {
+.ina-select-dropdown__trigger--status-warning:focus-within {
   border-color: var(--ina-warning-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-50, #141414);
 }
 .ina-select-dropdown__trigger--status-success {
   border-color: var(--ina-positive-500);
 }
-.ina-select-dropdown__trigger--status-success:focus-visible {
+.ina-select-dropdown__trigger--status-success:focus-within {
   border-color: var(--ina-positive-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-positive-50);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-50, #141414);
 }
 .ina-select-dropdown__trigger--disabled {
   background-color: transparent;
@@ -9652,6 +9802,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger-prefix {
   flex-shrink: 0;
   margin-right: var(--ina-spacing-2);
+  display: flex;
+  align-items: center;
 }
 .ina-select-dropdown__trigger-text {
   flex: 1;
@@ -9685,13 +9837,16 @@ dialog.bottom-sheet-dropdown {
   z-index: 10004; /* Higher than YearPicker panel */
   top: 100%;
   left: 0;
+  width: 100%; /* Match trigger width by default */
+  min-width: 100%;
   margin-top: var(--ina-spacing-1);
   background-color: var(
     --ina-background-primary
   ) !important; /* Ensure solid background */
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-lg);
-  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
     0 10px 10px -5px rgba(0, 0, 0, 0.04);
   display: flex;
   flex-direction: column;
@@ -9980,7 +10135,8 @@ dialog.bottom-sheet-dropdown {
   border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-md);
   cursor: pointer;
-  transition: background-color var(--ina-transition-base),
+  transition:
+    background-color var(--ina-transition-base),
     border-color var(--ina-transition-base),
     box-shadow var(--ina-transition-base);
 }
@@ -10126,6 +10282,15 @@ dialog.bottom-sheet-dropdown {
     transition: none;
   }
 }
+/* Selection Title */
+.ina-select-dropdown__selection-title {
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ina-content-tertiary);
+  line-height: 1.33; /* 16px / 12px */
+  pointer-events: none;
+}
 /* =========================== */
 /* SELECT OPTION COMPONENT     */
 /* =========================== */
@@ -12638,24 +12803,28 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-negative-500);
 }
 .ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
-  border-color: var(--ina-negative-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-negative-50);
+  border-color: var(--ina-negative-600);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-500);
 }
 .ina-text-area__wrapper--status-warning {
   border-color: var(--ina-warning-500);
 }
 .ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
-  border-color: var(--ina-warning-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50);
+  border-color: var(--ina-warning-600);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-text-area__wrapper--status-success {
   border-color: var(--ina-positive-600);
 }
 .ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-positive-50);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-500);
 }
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
@@ -12675,7 +12844,9 @@ dialog.bottom-sheet-dropdown {
 }
 /* Focus styles - Sesuai design Figma */
 .ina-text-area__wrapper:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
   outline: none;
   background-color: var(--ina-background-primary);
 }
@@ -12878,24 +13049,28 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-negative-500);
 }
 .ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
-  border-color: var(--ina-negative-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-negative-50) !important;
+  border-color: var(--ina-negative-600);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-negative-500);
 }
 .ina-text-field__wrapper--status-warning {
   border-color: var(--ina-warning-500);
 }
 .ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
-  border-color: var(--ina-warning-500);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50) !important;
+  border-color: var(--ina-warning-600);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-text-field__wrapper--status-success {
   border-color: var(--ina-positive-600);
 }
 .ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 3px var(--ina-positive-50) !important;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-positive-500);
 }
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
@@ -12915,10 +13090,12 @@ dialog.bottom-sheet-dropdown {
 }
 /* Focus styles - Sesuai design Figma */
 .ina-text-field__wrapper:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
   outline: none;
   background-color: var(--ina-background-primary);
-  border-color: var(--ina-content-primary);
+  border-color: var(--ina-stroke-tertiary, #141414);
 }
 /* hover styles - Sesuai design Figma */
 .ina-text-field__wrapper:hover {
@@ -13263,293 +13440,64 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-stroke-secondary);
 }
 .ina-time-picker--open .ina-time-picker__wrapper {
-  box-shadow: 0 1px 2px #1f1f1f1a, 0 0 0 3px var(--ina-stroke-primary);
+  box-shadow:
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-stroke-primary);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
 }
-/* Input */
-.ina-time-picker__input {
-  width: 100%;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  color: var(--ina-content-primary);
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-normal);
-  line-height: var(--ina-line-height-sm);
-  transition: all var(--ina-transition-base);
-}
-.ina-time-picker__input::-moz-placeholder {
-  color: var(--ina-content-tertiary);
-}
-.ina-time-picker__input::placeholder {
-  color: var(--ina-content-tertiary);
-}
-.ina-time-picker__input:focus {
-  outline: none;
-}
-/* Prefix and Suffix Icons */
-.ina-time-picker__prefix-icon,
-.ina-time-picker__suffix-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ina-text-secondary);
-  pointer-events: none;
-}
-.ina-time-picker__suffix-icon {
-  cursor: pointer;
-  pointer-events: all;
-}
-/* Clear Button */
-/* Clear Button */
-.ina-time-picker__clear-button {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--ina-content-dark-secondary);
-  transition: color var(--ina-transition-base);
-}
-.ina-time-picker__clear-button:hover:not(:disabled) {
-  color: var(--ina-content-secondary);
-}
-.ina-time-picker__clear-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-/* Size Variants */
-.ina-time-picker--size-sm .ina-time-picker__wrapper {
-  /* Desktop >= 768px */
-  height: 40px;
-}
-.ina-time-picker--size-sm .ina-time-picker__input {
-  font-size: var(--ina-font-xs);
-  padding: 0 var(--ina-spacing-1);
-}
-.ina-time-picker--size-sm .ina-time-picker__prefix-icon,
-.ina-time-picker--size-sm .ina-time-picker__suffix-icon {
-  margin: 0 var(--ina-spacing-1);
-}
-.ina-time-picker__label {
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  color: var(--ina-content-primary);
-  margin-bottom: var(--ina-spacing-2);
-  display: block;
-}
-.ina-time-picker__required {
-  color: var(--ina-negative-500);
-  margin-left: var(--ina-spacing-1);
-}
-.ina-time-picker--size-md .ina-time-picker__wrapper {
-  /* Desktop >= 768px */
-  height: 44px;
-}
-.ina-time-picker--size-md .ina-time-picker__input {
-  font-size: var(--ina-font-sm);
-  padding: 0 var(--ina-spacing-1);
-}
-.ina-time-picker--size-md .ina-time-picker__prefix-icon,
-.ina-time-picker--size-md .ina-time-picker__suffix-icon {
-  margin: 0 var(--ina-spacing-1);
-}
-.ina-time-picker--size-lg .ina-time-picker__wrapper {
-  /* Desktop >= 768px */
-  height: 48px;
-}
-.ina-time-picker--size-lg .ina-time-picker__input {
-  font-size: var(--ina-font-base);
-  padding: 0 var(--ina-spacing-2);
-}
-.ina-time-picker--size-lg .ina-time-picker__prefix-icon,
-.ina-time-picker--size-lg .ina-time-picker__suffix-icon {
-  margin: 0 var(--ina-spacing-2);
-}
+/* ... existing code ... */
 /* Status Variants */
 .ina-time-picker--status-error .ina-time-picker__wrapper {
   border-color: var(--ina-error-500);
 }
 .ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
-  box-shadow: 0 0 0 2px var(--ina-error-50);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-error-500);
 }
 .ina-time-picker--status-warning .ina-time-picker__wrapper {
   border-color: var(--ina-warning-500);
 }
 .ina-time-picker--status-warning.ina-time-picker--open
   .ina-time-picker__wrapper {
-  box-shadow: 0 0 0 2px var(--ina-warning-50);
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-warning-500);
 }
 .ina-time-picker--status-success .ina-time-picker__wrapper {
   border-color: var(--ina-success-500);
 }
 .ina-time-picker--status-success.ina-time-picker--open
   .ina-time-picker__wrapper {
-  box-shadow: 0 0 0 2px var(--ina-success-50);
-}
-/* Disabled State */
-.ina-time-picker--disabled .ina-time-picker__wrapper {
-  background-color: var(--ina-background-secondary);
-  border-color: var(--ina-stroke-primary);
-  cursor: not-allowed;
-}
-.ina-time-picker--disabled .ina-time-picker__input {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.ina-time-picker--disabled .ina-time-picker__suffix-icon {
-  cursor: not-allowed;
+  box-shadow:
+    0 0 0 1px #fff,
+    0 0 0 2px var(--ina-success-500);
 }
+/* ... existing code ... */
 /* Panel */
 .ina-time-picker__panel {
   position: absolute;
   top: 100%;
   left: 0;
-  right: 0;
+  width: 100%;
+  min-width: 100%; /* Match trigger width by default */
   z-index: 1000;
   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);
   margin-top: var(--ina-spacing-2);
-  min-width: 200px;
   overflow: hidden;
   animation: time-picker-fade-in 0.15s ease-out;
 }
-@keyframes time-picker-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-/* Panel Content */
-.ina-time-picker__content {
-  display: flex;
-  max-height: 200px;
-  overflow: hidden;
-}
-/* Columns */
-.ina-time-picker__column {
-  flex: 1;
-  border-right: 1px solid var(--ina-stroke-primary);
-  overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-.ina-time-picker__column::-webkit-scrollbar {
-  display: none;
-}
-.ina-time-picker__column:last-child {
-  border-right: none;
-}
-.ina-time-picker__column--hovered {
-  background-color: var(--ina-background-secondary);
-}
-/* Column Content */
-.ina-time-picker__column-content {
-  padding: var(--ina-spacing-2);
-}
-/* Options */
-.ina-time-picker__option {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 32px;
-  padding: var(--ina-spacing-1) var(--ina-spacing-2);
-  color: var(--ina-text-secondary);
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  cursor: pointer;
-  border-radius: var(--ina-radius-lg);
-  transition: all var(--ina-transition-fast);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-.ina-time-picker__option:hover {
-  background-color: var(--ina-background-tertiary);
-  color: var(--ina-content-primary);
-}
-.ina-time-picker__option--hovered {
-  background-color: var(--ina-background-tertiary);
-  color: var(--ina-content-primary);
-}
-.ina-time-picker__option--selected {
-  background-color: var(--ina-primary-primary);
-  color: var(--ina-white);
-}
-.ina-time-picker__option--selected:hover {
-  background-color: var(--ina-primary-600);
-  color: var(--ina-white);
-}
-.ina-time-picker__option--disabled.ina-time-picker__option--selected,
-.ina-time-picker__option--disabled.ina-time-picker__option--selected:hover {
-  background-color: var(--ina-background-secondary);
-  color: var(--ina-content-tertiary);
-}
-.ina-time-picker__option--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  color: var(--ina-content-tertiary);
-}
-.ina-time-picker__option--disabled:hover {
-  background-color: transparent;
-  color: var(--ina-content-tertiary);
-}
-/* Actions */
-.ina-time-picker__actions {
-  display: grid;
-  grid-template-columns: 1fr auto; /* keep confirm on the far right */
-  align-items: center;
-  gap: var(--ina-spacing-2);
-  padding: var(--ina-spacing-2) var(--ina-spacing-3);
-  border-top: 1px solid var(--ina-stroke-primary);
-  background-color: var(--ina-background-secondary);
-}
-/* When both buttons exist, place them in two columns */
-.ina-time-picker__action-button {
-  justify-self: start;
-}
-.ina-time-picker__confirm-button {
-  justify-self: end; /* always right aligned */
-}
-.ina-time-picker__action-button,
-.ina-time-picker__confirm-button {
-  padding: var(--ina-spacing-1) var(--ina-spacing-3);
-  border: none;
-  border-radius: var(--ina-radius-lg);
-  font-size: var(--ina-font-sm);
-  font-weight: var(--ina-font-medium);
-  cursor: pointer;
-  transition: all var(--ina-transition-fast);
-}
-.ina-time-picker__action-button {
-  background-color: transparent;
-  color: var(--ina-primary-600);
-}
-.ina-time-picker__action-button:hover {
-  background-color: var(--ina-primary-50);
-  color: var(--ina-primary-700);
-}
-.ina-time-picker__confirm-button {
-  background-color: var(--ina-primary-primary);
-  color: var(--ina-white);
-}
-.ina-time-picker__confirm-button:hover {
-  background-color: var(--ina-primary-600);
-}
+/* ... existing code ... */
 /* Focus styles - Sesuai design Figma */
 .ina-time-picker__wrapper:focus-within {
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  box-shadow:
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-primary-primary);
   outline: none;
   background-color: var(--ina-background-primary);
 }
@@ -13588,7 +13536,7 @@ dialog.bottom-sheet-dropdown {
     max-width: none;
     position: absolute;
     left: 0;
-    right: 0;
+    right: auto; /* Allow unset right since width is 100% */
   }
 
   .ina-time-picker__content {
@@ -13975,20 +13923,24 @@ dialog.bottom-sheet-dropdown {
 }
 /* Hover states */
 .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
+  box-shadow:
+    0 0 6px 0 rgba(31, 31, 31, 0.1),
     0 0 4px 6px rgba(31, 31, 31, 0.04);
 }
 .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__thumb {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
+  box-shadow:
+    0 0 6px 0 rgba(31, 31, 31, 0.1),
     0 0 4px 6px rgba(31, 31, 31, 0.04);
 }
 /* Focus states */
+/* Focus states */
 .ina-toggle:focus-within .ina-toggle__track,
 .ina-toggle__input:focus + .ina-toggle__track {
-  outline: 2px solid var(--ina-guide-600);
-  outline-offset: 2px;
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
+  outline: none;
+  outline-offset: 0;
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 /* Active states */
 .ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb {
@@ -14027,12 +13979,15 @@ dialog.bottom-sheet-dropdown {
 [data-theme='dark']
   .ina-toggle:not(.ina-toggle--disabled):hover
   .ina-toggle__thumb {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
+  box-shadow:
+    0 0 6px 0 rgba(31, 31, 31, 0.1),
     0 0 4px 6px rgba(31, 31, 31, 0.04);
 }
+[data-theme='dark'] .ina-toggle:focus-within .ina-toggle__track,
 [data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {
-  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
-    0 0 4px 6px rgba(31, 31, 31, 0.04);
+  box-shadow:
+    0 0 0 2px #fff,
+    0 0 0 3px var(--ina-primary-primary, #141414);
 }
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {