@idds/styles 1.3.15 → 1.4.1

package/dist/index.css

@@ -2362,7 +2362,7 @@ dialog.bottom-sheet-dropdown {
 /* Responsive font sizes */
 @media (max-width: 768px) {
   .ina-button-group {
-    max-width: 100vw;
+    max-width: 100%;
   }
 
   .ina-button-group__button {
@@ -6237,8 +6237,8 @@ dialog.bottom-sheet-dropdown {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
 }
 .ina-file-upload__file-icon-placeholder {
@@ -6290,8 +6290,8 @@ dialog.bottom-sheet-dropdown {
 .ina-file-upload__file-actions {
   display: flex;
   align-items: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   gap: 8px;
   flex-shrink: 0;
 }
@@ -6307,9 +6307,8 @@ dialog.bottom-sheet-dropdown {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
-  font-size: 16px;
+  width: 24px;
+  height: 24px;
 }
 .ina-file-upload__file-retry:hover,
 .ina-file-upload__file-remove:hover {
@@ -6380,6 +6379,15 @@ dialog.bottom-sheet-dropdown {
 .ina-file-upload__status--warning {
   color: var(--ina-warning-500, var(--Warning-500));
 }
+.ina-file-upload__file-icon-wrapper--success {
+  background-color: var(--ina-positive-600, var(--ina-green-600));
+}
+.ina-file-upload__file-icon-wrapper--error {
+  background-color: var(--ina-negative-500, var(--ina-red-600));
+}
+.ina-file-upload__file-icon-wrapper--warning {
+  background-color: var(--ina-warning-500, var(--ina-orange-500));
+}
 /**
  * InputSearch Component Styles
  * Menggunakan BEM naming convention dengan prefix "ina-"
@@ -7538,7 +7546,7 @@ dialog.bottom-sheet-dropdown {
 /* Header Row */
 .ina-multiple-choice-grid__header {
   display: grid;
-  grid-template-columns: 200px repeat(auto-fit, minmax(120px, 1fr));
+  grid-template-columns: 200px repeat(auto-fit, minmax(120px, auto));
   background-color: var(--ina-background-secondary);
   border-bottom: 1px solid var(--ina-stroke-primary);
   width: 100%;
@@ -7552,20 +7560,13 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-content-primary);
   text-align: center;
   border-right: 1px solid var(--ina-stroke-primary);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
+  display: flex;
   align-items: center;
   justify-content: center;
   min-height: 48px;
-  max-height: 80px;
-  overflow: hidden;
-  word-wrap: break-word;
-  word-break: break-word;
-  hyphens: auto;
+  white-space: nowrap;
+  overflow: visible;
   line-height: 1.4;
-  text-overflow: ellipsis;
 }
 .ina-multiple-choice-grid__header-cell:last-child {
   border-right: none;
@@ -7577,7 +7578,7 @@ dialog.bottom-sheet-dropdown {
 /* Data Rows */
 .ina-multiple-choice-grid__row {
   display: grid;
-  grid-template-columns: 200px repeat(auto-fit, minmax(120px, 1fr));
+  grid-template-columns: 200px repeat(auto-fit, minmax(120px, auto));
   border-bottom: 1px solid var(--ina-stroke-primary);
   transition: background-color var(--ina-transition-fast);
   width: 100%;
@@ -7600,21 +7601,14 @@ dialog.bottom-sheet-dropdown {
   font-weight: var(--ina-font-medium);
   color: var(--ina-content-primary);
   border-right: 1px solid var(--ina-stroke-primary);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
+  display: flex;
   align-items: center;
   background-color: var(--ina-background-primary);
   min-height: 48px;
-  max-height: 80px;
-  overflow: hidden;
-  word-wrap: break-word;
-  word-break: break-word;
-  hyphens: auto;
+  white-space: nowrap;
+  overflow: visible;
   line-height: 1.4;
   text-align: left;
-  text-overflow: ellipsis;
 }
 /* Radio Button Cells */
 .ina-multiple-choice-grid__cell {
@@ -7784,7 +7778,7 @@ dialog.bottom-sheet-dropdown {
 
   .ina-multiple-choice-grid__header,
   .ina-multiple-choice-grid__row {
-    grid-template-columns: 150px repeat(auto-fit, minmax(100px, 1fr));
+    grid-template-columns: 150px repeat(auto-fit, minmax(100px, auto));
     min-width: -moz-max-content;
     min-width: max-content;
   }
@@ -7799,7 +7793,7 @@ dialog.bottom-sheet-dropdown {
 
   .ina-multiple-choice-grid__header-cell,
   .ina-multiple-choice-grid__row-label {
-    max-height: 60px;
+    white-space: nowrap;
   }
 }
 @media (max-width: 480px) {
@@ -7811,7 +7805,7 @@ dialog.bottom-sheet-dropdown {
 
   .ina-multiple-choice-grid__header,
   .ina-multiple-choice-grid__row {
-    grid-template-columns: 120px repeat(auto-fit, minmax(80px, 1fr));
+    grid-template-columns: 120px repeat(auto-fit, minmax(80px, auto));
     min-width: -moz-max-content;
     min-width: max-content;
   }
@@ -7825,7 +7819,7 @@ dialog.bottom-sheet-dropdown {
 
   .ina-multiple-choice-grid__header-cell,
   .ina-multiple-choice-grid__row-label {
-    max-height: 50px;
+    white-space: nowrap;
   }
 }
 /* Dark Mode Support */
@@ -7888,8 +7882,9 @@ dialog.bottom-sheet-dropdown {
   flex-direction: column;
   border-radius: var(--ina-rounded-lg, 8px);
   background-color: var(--ina-background-primary);
-  width: -moz-max-content;
-  width: max-content;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
 }
 /* Title */
 .ina-one-time-password__title {
@@ -7909,8 +7904,11 @@ dialog.bottom-sheet-dropdown {
 .ina-one-time-password__container {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 16px;
+  min-width: -moz-max-content;
+  min-width: max-content;
 }
 /* Individual input field */
 .ina-one-time-password__input {
@@ -7976,7 +7974,8 @@ dialog.bottom-sheet-dropdown {
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .ina-one-time-password {
-    padding: 24px 16px;
+    padding: 12px 8px;
+    max-width: 100%;
   }
 
   .ina-one-time-password__input {
@@ -7988,6 +7987,8 @@ dialog.bottom-sheet-dropdown {
 
   .ina-one-time-password__container {
     gap: 12px;
+    min-width: -moz-max-content;
+    min-width: max-content;
   }
 }
 /**
@@ -9879,19 +9880,6 @@ dialog.bottom-sheet-dropdown {
     height: 44px;
   }
 }
-@media (max-width: 639px) {
-  .ina-select-dropdown__trigger--size-sm {
-    height: 32px;
-  }
-
-  .ina-select-dropdown__trigger--size-md {
-    height: 36px;
-  }
-
-  .ina-select-dropdown__trigger--size-lg {
-    height: 40px;
-  }
-}
 .ina-select-dropdown__trigger:hover {
   background-color: var(--ina-background-secondary);
 }
@@ -10273,8 +10261,7 @@ dialog.bottom-sheet-dropdown {
     box-shadow var(--ina-transition-base);
 }
 .ina-select-dropdown__load-more-button:hover {
-  background-color: var(--ina-content-primary);
-  border-color: var(--ina-white);
+  background-color: var(--ina-background-tertiary);
 }
 .ina-select-dropdown__load-more-button:focus-visible {
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
@@ -10355,7 +10342,7 @@ dialog.bottom-sheet-dropdown {
 /* Dark mode support - Updated to use new CSS variable system */
 /* CSS sekarang menggunakan variabel yang sudah di-override di css-variables.css */
 /* Responsive adjustments */
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .ina-select-dropdown__option {
     min-height: 48px;
     padding: var(--ina-spacing-3);
@@ -10364,6 +10351,21 @@ dialog.bottom-sheet-dropdown {
   .ina-select-dropdown__preview-content {
     gap: var(--ina-spacing-2);
   }
+
+  .ina-select-dropdown__trigger--size-sm {
+    height: 32px;
+  }
+
+  .ina-select-dropdown__trigger--size-md {
+    height: 36px;
+  }
+
+  .ina-select-dropdown__trigger--size-lg {
+    height: 40px;
+  }
+  .ina-select-dropdown__load-more-button {
+    font-size: var(--ina-font-xs);
+  }
 }
 /* Accessibility improvements */
 .ina-select-dropdown__trigger:focus-visible {
@@ -10612,12 +10614,11 @@ dialog.bottom-sheet-dropdown {
 .ina-single-file-upload__container:hover:not(
     .ina-single-file-upload__container--disabled
   ) {
-  border-color: var(--ina-guide-500, #0968f6);
+  border-color: var(--ina-content-primary, #000);
 }
 .ina-single-file-upload__container--active {
-  border: 1px solid var(--ina-guide-500, #0968f6);
-  box-shadow: 0 0 6px 0 rgba(9, 104, 246, 0.1),
-    0 0 4px 6px rgba(9, 104, 246, 0.04);
+  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;
 }
 .ina-single-file-upload__container--disabled {
   background: var(--ina-background-secondary);
@@ -10695,7 +10696,9 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-single-file-upload__container--disabled .ina-single-file-upload__title,
 .ina-single-file-upload__container--disabled
-  .ina-single-file-upload__description {
+  .ina-single-file-upload__description,
+.ina-single-file-upload__container--disabled
+  .ina-single-file-upload__icon-wrapper--default {
   color: var(--ina-content-tertiary);
 }
 /* Progress State */
@@ -10715,7 +10718,7 @@ dialog.bottom-sheet-dropdown {
 }
 .ina-single-file-upload__progress-fill {
   height: 100%;
-  background: var(--ina-guide-500, #0968f6);
+  background: var(--ina-primary-300, #d4d4d4);
   transition: width 0.3s ease;
 }
 .ina-single-file-upload__progress-text {
@@ -10746,7 +10749,7 @@ dialog.bottom-sheet-dropdown {
   color: var(--ina-negative-600, var(--ina-red-600));
 }
 .ina-single-file-upload__delete-button:focus-visible {
-  outline: 2px solid var(--ina-guide-500, #0968f6);
+  outline: 2px solid var(--ina-content-primary, #000);
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -11568,6 +11571,7 @@ dialog.bottom-sheet-dropdown {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  max-width: 100%;
   min-height: 54px;
 }
 .ina-stepper--vertical .ina-stepper__separator {
@@ -11580,42 +11584,44 @@ dialog.bottom-sheet-dropdown {
   align-items: flex-start;
   height: 100%;
 }
-/* Responsive: Horizontal stepper becomes vertical on mobile */
+/* Responsive: Horizontal stepper with horizontal scroll on mobile */
 .ina-stepper--horizontal-responsive {
   flex-direction: row;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* Enable smooth scrolling on mobile */
+  -webkit-overflow-scrolling: touch;
+  /* Hide scrollbar for a cleaner look, but keep functionality */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ina-stroke-primary, #e5e7eb) transparent;
+}
+.ina-stepper--horizontal-responsive::-webkit-scrollbar {
+  height: 4px;
+}
+.ina-stepper--horizontal-responsive::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ina-stepper--horizontal-responsive::-webkit-scrollbar-thumb {
+  background-color: var(--ina-stroke-primary, #e5e7eb);
+  border-radius: 2px;
+}
+.ina-stepper--horizontal-responsive::-webkit-scrollbar-thumb:hover {
+  background-color: var(--ina-content-tertiary, #9ca3af);
 }
 @media (max-width: 767px) {
   .ina-stepper--horizontal-responsive {
-    flex-direction: column;
-    align-items: flex-start;
-    height: 100%;
-  }
-
-  .ina-stepper--horizontal-responsive .ina-stepper__item {
+    /* Ensure horizontal scroll works on mobile */
+    flex-wrap: nowrap;
     width: 100%;
-    align-items: flex-start;
+    min-width: 100%;
   }
 
-  .ina-stepper--horizontal-responsive .ina-stepper__separator {
-    width: 2px;
-    min-height: 72px;
-    margin: 0;
-    flex-grow: 0;
-    align-self: flex-start;
-    /* Align to center of icon-wrapper: icon-wrapper is 24px, center is at 12px from left */
-    /* Separator width is 2px, so margin-left: 12px - 1px = 11px */
-    position: relative;
-    left: 12px;
-    bottom: 0;
-  }
-  .ina-stepper--horizontal-responsive .ina-stepper__label {
-    position: absolute;
-    left: 2rem;
-    top: 0.125rem;
-  }
-
-  .ina-stepper--horizontal-responsive .ina-stepper__item:last-child {
-    margin-bottom: 0;
+  .ina-stepper--horizontal-responsive .ina-stepper__item {
+    /* Prevent items from shrinking, maintain their natural width */
+    flex-shrink: 0;
+    min-width: -moz-fit-content;
+    min-width: fit-content;
   }
 }
 /* Step Item */