@idds/styles 1.6.27 → 1.6.29

package/dist/index.css

@@ -1296,8 +1296,8 @@ dfn {
   border-color: var(--ina-stroke-tertiary, #141414);
   background: var(--ina-background-primary, #fff);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 .ina-action-dropdown__label {
   flex: 1;
@@ -2142,8 +2142,8 @@ dfn {
   border-color: var(--ina-stroke-tertiary, #141414);
   background: var(--ina-background-primary, #ffffff);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 .ina-basic-dropdown__trigger-content {
   flex: 1;
@@ -2493,8 +2493,8 @@ dialog.bottom-sheet-dropdown {
     transparent
   );
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   outline-offset: 2px;
 }
 .ina-button--primary:disabled {
@@ -2515,8 +2515,8 @@ dialog.bottom-sheet-dropdown {
 .ina-button--secondary:focus:not(:disabled) {
   background-color: var(--ina-background-secondary, var(--ina-neutral-50));
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   outline-offset: 2px;
 }
 .ina-button--secondary:disabled {
@@ -2538,8 +2538,8 @@ dialog.bottom-sheet-dropdown {
 .ina-button--tertiary:focus:not(:disabled) {
   background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   outline-offset: 2px;
 }
 .ina-button--tertiary:disabled {
@@ -2564,8 +2564,8 @@ dialog.bottom-sheet-dropdown {
 .ina-button--link:focus:not(:disabled) {
   color: var(--ina-guide-400, var(--ina-blue-400));
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   outline-offset: 2px;
   text-decoration: underline;
 }
@@ -3576,22 +3576,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-content-primary, #1f1f1f);
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* 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-content-primary, #1f1f1f);
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* 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-content-primary, #1f1f1f);
+    inset 0 0 0 1px #fff,
+    inset 0 0 0 2px var(--ina-content-primary, #1f1f1f);
 }
 /* Invalid state yang tidak disabled */
 .ina-checkbox:not(.ina-checkbox--disabled) .ina-checkbox__box--invalid:hover {
@@ -3876,8 +3876,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-chip__input-wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -4152,6 +4152,10 @@ dialog.bottom-sheet-dropdown {
   display: inline-block;
   background-color: var(--ina-white, #ffffff);
 }
+.ina-date-picker__trigger-wrapper {
+  position: relative;
+  width: 100%;
+}
 /* Trigger Button - Same layout as TextField wrapper */
 .ina-date-picker__trigger {
   display: flex;
@@ -4210,8 +4214,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-date-picker__trigger:focus {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -4475,8 +4479,8 @@ dialog.bottom-sheet-dropdown {
 .ina-date-picker__nav-button:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   z-index: 2;
 }
 .ina-date-picker__nav-icon {
@@ -4532,8 +4536,8 @@ dialog.bottom-sheet-dropdown {
 .ina-date-picker__day:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   z-index: 2;
 }
 .ina-date-picker__day:hover {
@@ -4890,7 +4894,7 @@ dialog.bottom-sheet-dropdown {
 }
 
 [data-theme='dark'] .ina-date-picker__trigger:focus {
-  box-shadow: 0 0 0 2px var(--ina-primary-50);
+  box-shadow: inset 0 0 0 2px var(--ina-primary-50);
 }
 
 [data-theme='dark'] .ina-date-picker__panel {
@@ -6638,8 +6642,8 @@ dialog.bottom-sheet-dropdown {
 /* Focus state */
 .ina-input-search__wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-content-primary, #1f1f1f);
@@ -7284,8 +7288,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-month-picker__trigger:focus {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -7427,8 +7431,8 @@ dialog.bottom-sheet-dropdown {
 .ina-month-picker__month-option:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   z-index: 1;
 }
 .ina-month-picker__month-option--selected,
@@ -7933,8 +7937,8 @@ dialog.bottom-sheet-dropdown {
 .ina-one-time-password__input:focus {
   border-color: var(--ina-content-primary, #1f1f1f);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   background-color: var(--ina-background-primary, #ffffff);
 }
 /* Error/Invalid state */
@@ -7944,8 +7948,8 @@ dialog.bottom-sheet-dropdown {
 .ina-one-time-password__input--error:focus {
   border-color: var(--ina-negative-500, #f02d2d);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
 }
 /* Disabled state */
 .ina-one-time-password__input:disabled {
@@ -8097,8 +8101,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-pagination__page-input:focus {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -8299,8 +8303,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-pagination__page-size-select:focus {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -8531,8 +8535,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--neutral:focus-within {
   border-color: var(--ina-content-primary, #1f1f1f);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f) !important;
 }
 .ina-password-input__wrapper.ina-password-input__wrapper--error {
   border-color: var(--ina-negative-500);
@@ -8540,8 +8544,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d) !important;
 }
 .ina-password-input__wrapper.ina-password-input__wrapper--warning {
   border-color: var(--ina-warning-500);
@@ -8549,8 +8553,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-warning-500, #eebb04) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-warning-500, #eebb04) !important;
 }
 .ina-password-input__wrapper.ina-password-input__wrapper--success {
   border-color: var(--ina-positive-600);
@@ -8558,8 +8562,8 @@ dialog.bottom-sheet-dropdown {
 .ina-password-input__wrapper.ina-password-input__wrapper--success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e) !important;
 }
 /* Prefix icon */
 .ina-password-input__prefix-icon {
@@ -8748,8 +8752,8 @@ dialog.bottom-sheet-dropdown {
 /* Focus styles - Sesuai design Figma */
 .ina-password-input__wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-content-primary, #1f1f1f);
@@ -8963,7 +8967,7 @@ dialog.bottom-sheet-dropdown {
      object-fit: contain;
   box-shadow:
     0 1px 2px 0 rgba(31, 31, 31, 0.1),
-    0 0 0 2px var(--ina-neutral-25, #ffffff) !important;
+    inset 0 0 0 2px var(--ina-neutral-25, #ffffff) !important;
 }
 /* Responsive adjustments */
 @media (max-width: 767px) {
@@ -9145,8 +9149,8 @@ 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 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-50) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-50) !important;
 }
 .ina-phone-input__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -9154,8 +9158,8 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-500);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-warning-50) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-warning-50) !important;
 }
 .ina-phone-input__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -9163,14 +9167,14 @@ dialog.bottom-sheet-dropdown {
 .ina-phone-input__wrapper.ina-phone-input__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-positive-50) !important;
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-positive-50) !important;
 }
 /* Focus styles */
 .ina-phone-input__wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary);
   border-color: var(--ina-content-primary);
@@ -10064,8 +10068,8 @@ dialog.bottom-sheet-dropdown {
   border-color: var(--ina-stroke-tertiary, #141414);
   background: var(--ina-background-primary, #ffffff);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 /* Status variants */
 .ina-select-dropdown__trigger--status-neutral {
@@ -10074,8 +10078,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-neutral:focus-within {
   border-color: var(--ina-stroke-tertiary, #141414);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 .ina-select-dropdown__trigger--status-error {
   border-color: var(--ina-negative-500, #f02d2d);
@@ -10083,8 +10087,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-50, #fffafa);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-50, #fffafa);
 }
 .ina-select-dropdown__trigger--status-warning {
   border-color: var(--ina-warning-500, #eebb04);
@@ -10092,8 +10096,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-warning-50, #fffefa);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-warning-50, #fffefa);
 }
 .ina-select-dropdown__trigger--status-success {
   border-color: var(--ina-positive-500, #3cc14e);
@@ -10101,8 +10105,8 @@ dialog.bottom-sheet-dropdown {
 .ina-select-dropdown__trigger--status-success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-positive-50, #fafffa);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-positive-50, #fafffa);
 }
 .ina-select-dropdown__trigger--disabled {
   background-color: transparent;
@@ -10147,13 +10151,12 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-neutral-400, #a3a3a3);
 }
 /* Panel container */
-.ina-select-dropdown .ina-select-dropdown__panel {
+.ina-select-dropdown__panel {
   position: absolute;
   z-index: 10004; /* Higher than YearPicker panel */
   top: 100%;
   left: 0;
-  width: 100%; /* Match trigger width by default */
-  min-width: 100%;
+  /* width: 100% and min-width: 100% removed because width is set dynamically via JS inline style */
   margin-top: var(--ina-spacing-2, 0.5rem);
   background-color: var(
     --ina-background-primary,
@@ -10462,7 +10465,7 @@ dialog.bottom-sheet-dropdown {
   background-color: var(--ina-background-tertiary, #f5f5f5);
 }
 .ina-select-dropdown__load-more-button:focus-visible {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 .ina-select-dropdown__load-more-button:disabled {
   opacity: 0.6;
@@ -10824,7 +10827,7 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-single-file-upload__container--active {
   border: 1px solid var(--ina-content-primary, #000);
-  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), inset 0 0 0 3px #f3f3f3;
 }
 .ina-single-file-upload__container--disabled {
   background: var(--ina-background-secondary);
@@ -12703,7 +12706,7 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-table__search-input:focus {
   border-color: var(--ina-primary-500);
-  box-shadow: 0 0 0 1px var(--ina-primary-500);
+  box-shadow: inset 0 0 0 1px var(--ina-primary-500);
 }
 .ina-table__search-input:disabled {
   background-color: var(--ina-neutral-100);
@@ -12860,7 +12863,7 @@ dialog.bottom-sheet-dropdown {
 
   .ina-table__search-input:focus {
     border-color: var(--ina-primary-400);
-    box-shadow: 0 0 0 1px var(--ina-primary-400);
+    box-shadow: inset 0 0 0 1px var(--ina-primary-400);
   }
 
   .ina-table__search-input:disabled {
@@ -13128,8 +13131,8 @@ dialog.bottom-sheet-dropdown {
 /* Focus styles - Sesuai design Figma */
 .ina-text-area__wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff) !important;
 }
@@ -13150,8 +13153,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
   border-color: var(--ina-negative-600);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-500, #f02d2d);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-text-area__wrapper--status-warning {
   border-color: var(--ina-warning-500);
@@ -13159,8 +13162,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-600);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-warning-500, #eebb04);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-text-area__wrapper--status-success {
   border-color: var(--ina-positive-600);
@@ -13168,8 +13171,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-positive-500, #3cc14e);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
@@ -13406,8 +13409,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-500, #f02d2d);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-text-field__wrapper--status-warning {
   border-color: var(--ina-warning-500, #eebb04);
@@ -13415,8 +13418,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-warning-500, #eebb04);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-text-field__wrapper--status-success {
   border-color: var(--ina-positive-600, #288034);
@@ -13424,8 +13427,8 @@ dialog.bottom-sheet-dropdown {
 .ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-positive-500, #3cc14e);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
@@ -13446,8 +13449,8 @@ dialog.bottom-sheet-dropdown {
 /* Focus styles - Sesuai design Figma */
 .ina-text-field__wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -13694,8 +13697,8 @@ dialog.bottom-sheet-dropdown {
 }
 /* Accessible focus ring */
 .ina-theme-toggle__button:focus-visible {
-  box-shadow: 0 0 0 2px var(--ina-background-primary),
-    0 0 0 4px var(--ina-primary-500);
+  box-shadow: inset 0 0 0 2px var(--ina-background-primary),
+    inset 0 0 0 4px var(--ina-primary-500);
 }
 /* High contrast mode */
 @media (prefers-contrast: high) {
@@ -13807,8 +13810,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-time-picker--open .ina-time-picker__wrapper {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -13882,8 +13885,8 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker--status-error.ina-time-picker--open .ina-time-picker__wrapper {
   border-color: var(--ina-negative-600, #d50b0b);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-negative-500, #f02d2d);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-negative-500, #f02d2d);
 }
 .ina-time-picker--status-warning .ina-time-picker__wrapper {
   border-color: var(--ina-warning-500, #eebb04);
@@ -13892,8 +13895,8 @@ dialog.bottom-sheet-dropdown {
   .ina-time-picker__wrapper {
   border-color: var(--ina-warning-600, #855f00);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-warning-500, #eebb04);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-warning-500, #eebb04);
 }
 .ina-time-picker--status-success .ina-time-picker__wrapper {
   border-color: var(--ina-positive-600, #288034);
@@ -13902,8 +13905,8 @@ dialog.bottom-sheet-dropdown {
   .ina-time-picker__wrapper {
   border-color: var(--ina-positive-600, #288034);
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-positive-500, #3cc14e);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-positive-500, #3cc14e);
 }
 /* Disabled */
 .ina-time-picker--disabled .ina-time-picker__wrapper {
@@ -13989,8 +13992,8 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker__option:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   z-index: 1;
 }
 .ina-time-picker__option--disabled {
@@ -14042,15 +14045,15 @@ dialog.bottom-sheet-dropdown {
 .ina-time-picker__confirm-button:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   z-index: 1;
 }
 /* Focus styles - Sesuai design Figma */
 .ina-time-picker__wrapper:focus-within {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -14491,8 +14494,8 @@ dialog.bottom-sheet-dropdown {
   outline: none;
   outline-offset: 0;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 /* Active states */
 .ina-toggle:not(.ina-toggle--disabled):active .ina-toggle__thumb {
@@ -14538,8 +14541,8 @@ dialog.bottom-sheet-dropdown {
 [data-theme='dark'] .ina-toggle:focus-within .ina-toggle__track,
 [data-theme='dark'] .ina-toggle__input:focus + .ina-toggle__track {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
 }
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
@@ -14990,8 +14993,8 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-year-picker__trigger:focus {
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #fff),
-    0 0 0 3px var(--ina-content-primary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #fff),
+    inset 0 0 0 3px var(--ina-content-primary, #1f1f1f);
   outline: none;
   background-color: var(--ina-background-primary, #ffffff);
   border-color: var(--ina-stroke-tertiary, #141414);
@@ -15192,8 +15195,8 @@ dialog.bottom-sheet-dropdown {
 .ina-year-picker__year-option:focus-visible {
   outline: none;
   box-shadow:
-    0 0 0 2px var(--ina-background-primary, #ffffff),
-    0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
+    inset 0 0 0 2px var(--ina-background-primary, #ffffff),
+    inset 0 0 0 3px var(--ina-stroke-tertiary, #1f1f1f);
   z-index: 1;
 }
 .ina-year-picker__year-option.ina-year-picker__year-option--selected,