@idds/styles 1.5.27 → 1.5.28

package/dist/index.css

@@ -5510,37 +5510,16 @@ 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 */
 }
-.ina-dropdown__menu--visible {
-  opacity: 1;
-  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 +5527,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 +5640,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 */
@@ -8709,7 +8695,9 @@ dialog.bottom-sheet-dropdown {
   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;
+  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);
@@ -8772,27 +8760,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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-primary-primary);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -9349,7 +9343,9 @@ dialog.bottom-sheet-dropdown {
 }
 /* Focus state - Add drop shadow */
 .ina-radio-input__field:focus-visible:not(:disabled) {
-  filter: drop-shadow(0 0 3px #737373);
+  outline: none;
+  filter: drop-shadow(0 0 0 var(--ina-primary-primary, #141414))
+    drop-shadow(0 0 0 #fff);
 }
 /* Active state - Add drop shadow */
 .ina-radio-input__field:active:not(:disabled) {
@@ -9375,7 +9371,8 @@ dialog.bottom-sheet-dropdown {
 .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);
+  filter: drop-shadow(0 0 0 var(--ina-primary-primary, #141414))
+    drop-shadow(0 0 0 #fff);
 }
 /* Disabled states */
 .ina-radio-input__field:disabled {
@@ -9458,9 +9455,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 {
@@ -9570,12 +9568,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 +9628,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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-positive-50, #141414);
 }
 .ina-select-dropdown__trigger--disabled {
   background-color: transparent;
@@ -9652,6 +9686,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 +9721,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 +10019,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 +10166,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     */
 /* =========================== */
@@ -12639,23 +12688,27 @@ dialog.bottom-sheet-dropdown {
 }
 .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);
+  box-shadow:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px var(--ina-negative-50);
 }
 .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);
+  box-shadow:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px var(--ina-warning-50);
 }
 .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:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px var(--ina-positive-50);
 }
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
@@ -12675,7 +12728,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:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px #f3f3f3;
   outline: none;
   background-color: var(--ina-background-primary);
 }
@@ -12879,23 +12934,27 @@ dialog.bottom-sheet-dropdown {
 }
 .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;
+  box-shadow:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px var(--ina-negative-50) !important;
 }
 .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;
+  box-shadow:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px var(--ina-warning-50) !important;
 }
 .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:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px var(--ina-positive-50) !important;
 }
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
@@ -12915,7 +12974,9 @@ 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:
+    inset 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    inset 0 0 0 3px #f3f3f3;
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -13263,293 +13324,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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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:
+    inset 0 0 0 1px #fff,
+    inset 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 +13420,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 +13807,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 +13863,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) {