@idds/styles 1.0.36 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "Shared CSS styles and colors for INA Digital Design System",
   "type": "module",
   "main": "./src/index.css",

package/src/components/date-picker.css

@@ -159,7 +159,6 @@
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   /* Allow vertical scrolling if content exceeds max-height */
-  overflow-y: auto;
   overflow-x: visible;
 }
 
@@ -591,7 +590,6 @@
     max-width: 100% !important;
     padding: var(--ina-spacing-3) !important;
     max-height: 420px !important; /* Consistent max-height */
-    overflow-y: auto;
   }
 
   .ina-date-picker__panel-content {

package/src/components/tab-vertical.css

@@ -90,13 +90,13 @@
   .ina-tab-vertical__tab--variant-outline:hover:not(
     .ina-tab-vertical__tab--disabled
   ) {
-  color: var(--ina-primary-500);
+  color: var(--ina-primary-300);
 }
 
 .ina-tab-vertical--use-brand-color
   .ina-tab-vertical__tab--variant-outline.ina-tab-vertical__tab--selected {
-  color: var(--ina-primary-500);
-  border-left-color: var(--ina-primary-500);
+  color: var(--ina-primary-300);
+  border-left-color: var(--ina-primary-300);
 }
 
 /* Variant: Button Brand */
@@ -112,8 +112,8 @@
 }
 
 .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
-  background-color: var(--ina-primary-500);
-  color: var(--ina-white) !important;
+  background-color: var(--ina-primary-25);
+  color: var(--ina-primary-300) !important;
   font-weight: 600;
 }
 
@@ -158,12 +158,12 @@
   .ina-tab-vertical__tab--variant-button-white:hover:not(
     .ina-tab-vertical__tab--disabled
   ) {
-  color: var(--ina-primary-500);
+  color: var(--ina-primary-300);
 }
 
 .ina-tab-vertical--use-brand-color
   .ina-tab-vertical__tab--variant-button-white.ina-tab-vertical__tab--selected {
-  color: var(--ina-primary-500);
+  color: var(--ina-primary-300);
 }
 
 /* Disabled State */
@@ -191,7 +191,7 @@
 
 /* Focus State */
 .ina-tab-vertical__tab:focus {
-  outline: 2px solid var(--ina-primary-500);
+  outline: 2px solid var(--ina-primary-300);
   outline-offset: 2px;
 }
 
@@ -246,8 +246,8 @@
 
 [data-theme='dark']
   .ina-tab-vertical__tab--variant-button-brand.ina-tab-vertical__tab--selected {
-  background-color: var(--ina-primary-500);
-  color: var(--ina-white) !important;
+  background-color: var(--ina-primary-25);
+  color: var(--ina-primary-300) !important;
 }
 
 [data-theme='dark'] .ina-tab-vertical--variant-button-white {

package/src/components/tooltip.css

@@ -23,8 +23,6 @@
   /* Prevent clipping by any parent container */
   transform: translateZ(0);
   will-change: transform;
-  /* Create new stacking context to ensure z-index works */
-  isolation: isolate;
 }
 
 /* Basic Tooltip Bubble */
@@ -38,6 +36,7 @@
   padding: var(--ina-spacing-3);
   border-radius: var(--ina-radius-lg);
   white-space: nowrap;
+  min-width: fit-content;
   max-width: 320px;
   box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
     0 4px 6px -2px rgba(10, 13, 18, 0.03);
@@ -46,6 +45,7 @@
 .ina-tooltip__bubble--basic {
   white-space: normal;
   word-wrap: break-word;
+  max-width: 320px;
 }
 
 /* Card Tooltip (Light, Dark, Media) */
@@ -60,21 +60,6 @@
   display: flex;
   flex-direction: column;
 }
-@media (max-width: 639px) {
-  .ina-tooltip__card {
-    width: 280px;
-  }
-}
-@media (max-width: 480px) {
-  .ina-tooltip__card {
-    width: 240px;
-  }
-}
-@media (max-width: 320px) {
-  .ina-tooltip__card {
-    width: 200px;
-  }
-}
 
 .ina-tooltip__card--light {
   background-color: var(--ina-background-primary, var(--ina-neutral-25));
@@ -213,40 +198,13 @@
   flex-shrink: 0;
 }
 
-/* Tooltip arrow */
-.ina-tooltip__arrow {
+/* Tooltip arrow using pseudo element ::after */
+.ina-tooltip__content::after {
+  content: '';
   position: absolute;
   width: 0;
   height: 0;
-}
-
-/* Arrow colors for variants - menggunakan warna yang sama dengan card */
-.ina-tooltip__arrow--variant-basic {
-  border-top-color: var(--ina-black, var(--ina-neutral-900));
-  border-bottom-color: var(--ina-black, var(--ina-neutral-900));
-  border-left-color: var(--ina-black, var(--ina-neutral-900));
-  border-right-color: var(--ina-black, var(--ina-neutral-900));
-}
-
-.ina-tooltip__arrow--variant-light {
-  border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
-}
-
-.ina-tooltip__arrow--variant-dark {
-  border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
-  border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
-  border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
-  border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
-}
-
-.ina-tooltip__arrow--variant-media {
-  border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
-  border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
+  pointer-events: none;
 }
 
 /* Positioning classes */
@@ -326,17 +284,19 @@
   margin-left: 8px;
 }
 
-/* Arrow positioning - Top arrows (pointing down) */
-.ina-tooltip__arrow--placement-top {
+/* Arrow positioning using ::after pseudo element */
+/* Top arrows (pointing down) */
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-top::after {
   left: 50%;
   transform: translateX(-50%);
   bottom: -6px;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid;
+  /* Color will inherit from parent bubble/card background */
 }
 
-.ina-tooltip__arrow--placement-top-start {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-top-start::after {
   left: 16px;
   bottom: -6px;
   border-left: 6px solid transparent;
@@ -344,7 +304,7 @@
   border-top: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-top-end {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-top-end::after {
   right: 16px;
   bottom: -6px;
   border-left: 6px solid transparent;
@@ -353,7 +313,7 @@
 }
 
 /* Bottom arrows (pointing up) */
-.ina-tooltip__arrow--placement-bottom {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
   left: 50%;
   transform: translateX(-50%);
   top: -6px;
@@ -362,7 +322,7 @@
   border-bottom: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-bottom-start {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
   left: 16px;
   top: -6px;
   border-left: 6px solid transparent;
@@ -370,7 +330,7 @@
   border-bottom: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-bottom-end {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
   right: 16px;
   top: -6px;
   border-left: 6px solid transparent;
@@ -379,7 +339,7 @@
 }
 
 /* Left arrows (pointing right) */
-.ina-tooltip__arrow--placement-left {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
   top: 50%;
   transform: translateY(-50%);
   right: -6px;
@@ -388,7 +348,7 @@
   border-left: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-left-start {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
   top: 16px;
   right: -6px;
   border-top: 6px solid transparent;
@@ -396,7 +356,7 @@
   border-left: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-left-end {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
   bottom: 16px;
   right: -6px;
   border-top: 6px solid transparent;
@@ -405,7 +365,7 @@
 }
 
 /* Right arrows (pointing left) */
-.ina-tooltip__arrow--placement-right {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
   top: 50%;
   transform: translateY(-50%);
   left: -6px;
@@ -414,7 +374,7 @@
   border-right: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-right-start {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
   top: 16px;
   left: -6px;
   border-top: 6px solid transparent;
@@ -422,13 +382,50 @@
   border-right: 6px solid;
 }
 
-.ina-tooltip__arrow--placement-right-end {
+.ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
   bottom: 16px;
   left: -6px;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   border-right: 6px solid;
 }
+.ina-tooltip__content {
+  max-width: 320px;
+  min-width: fit-content;
+}
+/* Arrow colors - match parent bubble/card background color */
+/* Arrow is ::after on .ina-tooltip__content, so we use variant class on content */
+/* For basic variant - arrow color matches bubble background */
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-basic::after {
+  border-top-color: var(--ina-black, var(--ina-neutral-900));
+  border-bottom-color: var(--ina-black, var(--ina-neutral-900));
+  border-left-color: var(--ina-black, var(--ina-neutral-900));
+  border-right-color: var(--ina-black, var(--ina-neutral-900));
+}
+
+/* For light variant - arrow color matches card background */
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-light::after {
+  border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
+
+/* For dark variant - arrow color matches card background */
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-dark::after {
+  border-top-color: var(--ina-neutral-900, var(--ina-neutral-900));
+  border-bottom-color: var(--ina-neutral-900, var(--ina-neutral-900));
+  border-left-color: var(--ina-neutral-900, var(--ina-neutral-900));
+  border-right-color: var(--ina-neutral-900, var(--ina-neutral-900));
+}
+
+/* For media variant - arrow color matches card background */
+.ina-tooltip__content--show-arrow.ina-tooltip--variant-media::after {
+  border-top-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-bottom-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-left-color: var(--ina-background-primary, var(--ina-neutral-25));
+  border-right-color: var(--ina-background-primary, var(--ina-neutral-25));
+}
 
 /* Visibility states */
 .ina-tooltip__content--visible {
@@ -457,7 +454,6 @@
     white-space: normal;
     padding: 6px 10px;
   }
-
   .ina-tooltip__card {
     width: 280px;
   }