@idds/styles 1.0.60 → 1.0.62

package/package.json

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

package/src/components/chip.css

@@ -52,14 +52,18 @@
    ============================================ */
 
 /* Filled - Default State */
-.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(.ina-chip__item--disabled) {
+.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(
+    .ina-chip__item--disabled
+  ) {
   background-color: var(--ina-primary-25);
   color: var(--ina-content-primary);
   border-color: var(--ina-primary-25);
 }
 
 /* Filled - Hover State */
-.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(.ina-chip__item--disabled):hover {
+.ina-chip__item--variant-filled:not(.ina-chip__item--selected):not(
+    .ina-chip__item--disabled
+  ):hover {
   background-color: var(--ina-primary-50);
   color: var(--ina-content-primary);
   border-color: var(--ina-primary-25);
@@ -86,14 +90,18 @@
    ============================================ */
 
 /* Outline - Default State */
-.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(.ina-chip__item--disabled) {
+.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(
+    .ina-chip__item--disabled
+  ) {
   background-color: var(--ina-neutral-25, #ffffff);
   color: var(--ina-content-primary);
   border-color: var(--ina-stroke-primary);
 }
 
 /* Outline - Hover State */
-.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(.ina-chip__item--disabled):hover {
+.ina-chip__item--variant-outline:not(.ina-chip__item--selected):not(
+    .ina-chip__item--disabled
+  ):hover {
   background-color: var(--ina-primary-50);
   color: var(--ina-content-primary);
   border-color: var(--ina-stroke-primary);
@@ -226,3 +234,12 @@
     transform: scale(1);
   }
 }
+.ina-chip__input {
+  min-width: 100%;
+  max-width: 100%;
+}
+@media (max-width: 640px) {
+  .ina-chip__input {
+    min-width: 500px;
+  }
+}

package/src/components/dropdown.css

@@ -75,19 +75,19 @@
 }
 
 .ina-dropdown__menu--width-sm {
-  width: 120px;
+  min-width: 120px;
 }
 
 .ina-dropdown__menu--width-md {
-  width: 160px;
+  min-width: 160px;
 }
 
 .ina-dropdown__menu--width-lg {
-  width: 200px;
+  min-width: 200px;
 }
 
 .ina-dropdown__menu--width-xl {
-  width: 240px;
+  min-width: 240px;
 }
 
 .ina-dropdown__menu--width-full {
@@ -116,6 +116,7 @@
   display: flex;
   align-items: center;
   gap: var(--ina-spacing-2);
+  margin-bottom: 0 !important;
 }
 
 .ina-dropdown__item:hover {

package/src/components/radio-input.css

@@ -127,8 +127,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
+  width: 11px;
+  height: 11px;
   border-radius: 50%;
   background-color: var(--ina-neutral-200, #e5e5e5);
 }
@@ -145,7 +145,6 @@
 
 .ina-radio-input__option-label--disabled {
   cursor: not-allowed;
-  color: #e0e0e0;
 }
 
 /* Size variants */
@@ -180,6 +179,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: var(--ina-spacing-4);
+  align-items: center;
 }
 
 /* Status variants */

package/src/components/single-file-upload.css

@@ -25,7 +25,9 @@
   box-sizing: border-box;
 }
 
-.ina-single-file-upload__container:hover:not(.ina-single-file-upload__container--disabled) {
+.ina-single-file-upload__container:hover:not(
+    .ina-single-file-upload__container--disabled
+  ) {
   border-color: var(--ina-guide-500, #0968f6);
 }
 
@@ -119,7 +121,8 @@
 }
 
 .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__container--disabled
+  .ina-single-file-upload__description {
   color: var(--ina-content-tertiary);
 }
 
@@ -163,7 +166,7 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--ina-content-primary);
+  color: var(--ina-negative-500);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -173,7 +176,7 @@
 }
 
 .ina-single-file-upload__delete-button:hover {
-  color: var(--ina-content-negative, var(--ina-red-600));
+  color: var(--ina-negative-600, var(--ina-red-600));
 }
 
 .ina-single-file-upload__delete-button:focus-visible {
@@ -181,4 +184,3 @@
   outline-offset: 2px;
   border-radius: 2px;
 }
-

package/src/components/tooltip.css

@@ -35,6 +35,8 @@
   opacity: 0;
   visibility: hidden;
   display: block;
+  /* Allow arrow to be visible outside content bounds */
+  overflow: visible;
 }
 
 /* Basic Tooltip Bubble */
@@ -215,39 +217,39 @@
 /* Positioning classes */
 /* Reduced margin to eliminate gap and prevent hover area break */
 .ina-tooltip--placement-top {
-  bottom: 100%;
+  bottom: 90%;
   left: 50%;
   transform: translateX(-50%);
   margin-bottom: 0;
 }
 
 .ina-tooltip--placement-top-start {
-  bottom: 100%;
+  bottom: 90%;
   left: 0;
   margin-bottom: 0;
 }
 
 .ina-tooltip--placement-top-end {
-  bottom: 100%;
+  bottom: 90%;
   right: 0;
   margin-bottom: 0;
 }
 
 .ina-tooltip--placement-bottom {
-  top: 100%;
+  top: 90%;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 0;
 }
 
 .ina-tooltip--placement-bottom-start {
-  top: 100%;
+  top: 90%;
   left: 0;
   margin-top: 0;
 }
 
 .ina-tooltip--placement-bottom-end {
-  top: 100%;
+  top: 90%;
   right: 0;
   margin-top: 0;
 }
@@ -305,7 +307,7 @@
 
 /* Top arrows (pointing down to trigger) - arrow at bottom of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-top::after {
-  top: 100%; /* At the bottom of tooltip content */
+  bottom: -10px; /* At the bottom of tooltip content, pointing down (5px border + 5px offset) */
   left: 50%;
   margin-left: -5px; /* Half of border-width to center */
   border-width: 5px;
@@ -314,7 +316,7 @@
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-start::after {
-  top: 100%;
+  bottom: -10px;
   left: 16px;
   margin-left: -5px;
   border-width: 5px;
@@ -322,7 +324,7 @@
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-top-end::after {
-  top: 100%;
+  bottom: -10px;
   right: 16px;
   margin-left: -5px;
   border-width: 5px;
@@ -331,7 +333,7 @@
 
 /* Bottom arrows (pointing up to trigger) - arrow at top of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom::after {
-  bottom: 100%; /* At the top of tooltip content */
+  top: -10px; /* At the top of tooltip content, pointing up (5px border + 5px offset) */
   left: 50%;
   margin-left: -5px;
   border-width: 5px;
@@ -339,7 +341,7 @@
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-start::after {
-  bottom: 100%;
+  top: -10px;
   left: 16px;
   margin-left: -5px;
   border-width: 5px;
@@ -347,7 +349,7 @@
 }
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-bottom-end::after {
-  bottom: 100%;
+  top: -10px;
   right: 16px;
   margin-left: -5px;
   border-width: 5px;
@@ -357,7 +359,7 @@
 /* Left arrows (pointing right to trigger) - arrow at right edge of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
   top: 50%;
-  right: -5px; /* Positioned at right edge, pointing right */
+  right: -10px; /* Positioned at right edge, pointing right (5px border + 5px offset) */
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -365,7 +367,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
   top: 16px;
-  right: -5px;
+  right: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -373,7 +375,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
   bottom: 16px;
-  right: -5px;
+  right: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -382,7 +384,7 @@
 /* Right arrows (pointing left to trigger) - arrow at left edge of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
   top: 50%;
-  left: -5px; /* Positioned at left edge, pointing left */
+  left: -10px; /* Positioned at left edge, pointing left (5px border + 5px offset) */
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -390,7 +392,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
   top: 16px;
-  left: -5px;
+  left: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -398,7 +400,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
   bottom: 16px;
-  left: -5px;
+  left: -10px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;