slim-select 3.6.0 → 4.0.0

package/src/slim-select/slimselect.scss

@@ -14,8 +14,10 @@
   // Heights
   --ss-main-height: 40px;
   --ss-content-height: 300px;
-  --ss-search-height: 40px;
-  --ss-option-height: auto;
+  --ss-modal-height: 85vh;
+  --ss-modal-width: min(90vw, 400px);
+  --ss-search-height: var(--ss-main-height);
+  --ss-option-height: var(--ss-main-height);
 
   // Spacing
   --ss-spacing-l: 9px;
@@ -25,6 +27,7 @@
   // Misc
   --ss-animation-timing: 0.2s;
   --ss-border-radius: 4px;
+  --ss-modal-z-index: 1000001;
 }
 
 // Animation keyframes
@@ -58,19 +61,27 @@
 .ss-main {
   display: flex;
   flex-direction: row;
+  align-items: center;
   position: relative;
   user-select: none;
   color: var(--ss-font-color);
   min-height: var(--ss-main-height);
   width: 100%;
-  padding: var(--ss-spacing-s);
+  padding: 0 var(--ss-spacing-s);
   cursor: pointer;
   border: 1px solid var(--ss-border-color);
   border-radius: var(--ss-border-radius);
   background-color: var(--ss-bg-color);
   outline: 0;
   box-sizing: border-box;
-  transition: background-color var(--ss-animation-timing);
+  transition:
+    background-color var(--ss-animation-timing),
+    border-radius var(--ss-animation-timing);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: background-color var(--ss-animation-timing);
+  }
+
   overflow: hidden;
 
   &:focus {
@@ -104,33 +115,52 @@
   }
 
   .ss-values {
-    display: inline-flex;
+    display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    align-content: center;
+    align-self: stretch;
     gap: var(--ss-spacing-m);
-    flex: 1 1 100%;
-    min-width: 0; // Allow container to shrink
-    max-width: 100%; // Ensure container doesn't exceed parent
-    overflow: hidden; // Prevent overflow
+    flex: 1 1 0%;
+    min-width: 0; // Allow container to shrink below content width
+    max-width: 100%;
+    padding: var(--ss-spacing-s) 0;
+    box-sizing: border-box;
+    overflow: hidden;
 
     // When multiString is enabled, values container holds a single text line
     &:has(.ss-multi-string) {
       flex-wrap: nowrap;
       gap: 0;
-      align-items: center;
     }
 
-    .ss-placeholder {
-      display: block; // Use block for proper ellipsis
+    // Single-line value text fills space before the arrow/deselect siblings
+    &:has(.ss-single),
+    &:has(.ss-placeholder) {
+      flex-wrap: nowrap;
+    }
+
+    // Shared layout for single value, placeholder, and multiString text
+    .ss-single,
+    .ss-placeholder,
+    .ss-multi-string {
+      display: block;
+      flex: 1 1 0%;
+      min-width: 0;
       width: 100%;
-      min-width: 0; // Allow placeholder to shrink
-      padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s)
-        var(--ss-spacing-m);
-      margin: auto 0px auto 0px;
-      line-height: 1em;
-      color: var(--ss-placeholder-color);
+      max-width: 100%;
+      margin: 0;
+      padding: 0 var(--ss-spacing-m) 0
+        calc(var(--ss-spacing-l) - var(--ss-spacing-s));
+      line-height: 1.2;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      box-sizing: border-box;
+    }
+
+    .ss-placeholder {
+      color: var(--ss-placeholder-color);
     }
 
     // Max is used to display max number of values
@@ -147,35 +177,6 @@
       border-radius: var(--ss-border-radius);
     }
 
-    // Used for single select selected value
-    .ss-single {
-      display: block; // Use block for proper ellipsis
-      margin: auto 0px auto var(--ss-spacing-s);
-      min-width: 0; // Allow flex item to shrink below content size
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap; // Prevent text wrapping
-      flex: 1 1 auto; // Allow it to grow but also shrink
-      max-width: calc(100% - 20px); // Leave space for arrow and padding
-    }
-
-    // Used for multiple select when multiString is enabled
-    // Shows selected values as comma separated text truncated with an ellipsis
-    .ss-multi-string {
-      display: block; // Use block for proper ellipsis
-      width: 100%;
-      min-width: 0; // Allow flex item to shrink below content size
-      padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s)
-        var(--ss-spacing-m);
-      margin: auto 0px auto 0px;
-      line-height: 1em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap; // Prevent text wrapping
-      flex: 1 1 auto; // Allow it to grow but also shrink
-      max-width: calc(100% - 20px); // Leave space for arrow and padding
-    }
-
     // Used for the selected values
     .ss-value {
       display: flex;
@@ -190,6 +191,10 @@
       animation-timing-function: ease-out;
       animation-fill-mode: both;
 
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+
       &.ss-value-out {
         animation-name: ss-valueOut;
         animation-duration: var(--ss-animation-timing);
@@ -302,6 +307,7 @@
   box-sizing: border-box;
   border: solid 1px var(--ss-border-color);
   background-color: var(--ss-bg-color);
+  min-height: 0;
   transition:
     transform var(--ss-animation-timing),
     opacity var(--ss-animation-timing);
@@ -310,6 +316,10 @@
   overflow: hidden;
   z-index: 10000;
 
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
   &.ss-relative {
     position: relative;
     height: 100%;
@@ -341,6 +351,11 @@
     flex: 0 1 auto;
     display: flex;
     flex-direction: row;
+    align-items: center;
+    gap: var(--ss-spacing-s);
+    min-height: var(--ss-search-height);
+    padding: 0 var(--ss-spacing-s);
+    box-sizing: border-box;
     border-bottom: 1px solid var(--ss-border-color);
 
     input {
@@ -349,9 +364,10 @@
       line-height: inherit;
       flex: 1 1 auto;
       width: 100%;
-      min-width: 0px;
-      height: var(--ss-search-height);
-      padding: var(--ss-spacing-m) var(--ss-spacing-l);
+      min-width: 0;
+      min-height: 0;
+      height: 100%;
+      padding: 0 var(--ss-spacing-m);
       margin: 0;
       border: none;
       background-color: var(--ss-bg-color);
@@ -375,23 +391,27 @@
       align-items: center;
       cursor: pointer;
       flex: 0 0 auto;
-      height: auto;
-      margin: 0 0 0 var(--ss-spacing-m);
-      border: 1px solid var(--ss-border-color);
+      box-sizing: border-box;
+      width: 22px;
+      height: 22px;
+      margin: auto 0;
+      padding: 0;
+      border: none;
       border-radius: var(--ss-border-radius);
+      background-color: var(--ss-primary-color);
 
       svg {
         display: flex;
         align-items: center;
-        justify-content: flex-end;
-        flex: 0 1 auto;
-        width: 12px;
-        height: 12px;
-        margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m);
+        justify-content: center;
+        flex: 0 0 auto;
+        width: 10px;
+        height: 10px;
+        margin: 0;
 
         path {
           fill: none;
-          stroke: var(--ss-font-color);
+          stroke: var(--ss-bg-color);
           stroke-width: 18;
           stroke-linecap: round;
           stroke-linejoin: round;
@@ -408,8 +428,10 @@
   .ss-list {
     flex: 1 1 auto;
     height: auto;
+    min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
+    scrollbar-color: var(--ss-primary-color) var(--ss-bg-color);
 
     .ss-error {
       color: var(--ss-error-color);
@@ -423,8 +445,10 @@
 
     .ss-optgroup {
       .ss-option {
+        min-height: 0;
         transition:
           max-height var(--ss-animation-timing) ease,
+          min-height var(--ss-animation-timing) ease,
           opacity var(--ss-animation-timing) ease,
           padding-top var(--ss-animation-timing) ease,
           padding-bottom var(--ss-animation-timing) ease,
@@ -432,8 +456,13 @@
           margin-bottom var(--ss-animation-timing) ease;
       }
 
+      &:not(.ss-close):not(.ss-open) .ss-option {
+        min-height: var(--ss-option-height);
+      }
+
       &.ss-open {
         .ss-option {
+          min-height: var(--ss-option-height);
           max-height: 100px;
           opacity: 1;
           overflow: visible;
@@ -443,6 +472,7 @@
       // If optgroup has close, hide all options
       &.ss-close {
         .ss-option {
+          min-height: 0 !important;
           padding-top: 0 !important;
           padding-bottom: 0 !important;
           margin-top: 0 !important;
@@ -458,8 +488,8 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
-          var(--ss-spacing-l);
+        min-height: var(--ss-option-height);
+        padding: 0 var(--ss-spacing-l);
 
         .ss-optgroup-label-text {
           flex: 1 1 auto;
@@ -555,8 +585,7 @@
       }
 
       .ss-option {
-        padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s)
-          calc(var(--ss-spacing-l) * 3);
+        padding: 0 var(--ss-spacing-l) 0 calc(var(--ss-spacing-l) * 3);
       }
     }
 
@@ -564,12 +593,13 @@
       display: flex;
       align-items: center;
       min-height: var(--ss-option-height);
-      padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
-        var(--ss-spacing-l);
+      padding: 0 var(--ss-spacing-l);
       white-space: normal;
       color: var(--ss-font-color);
       cursor: pointer;
       user-select: none;
+      content-visibility: auto;
+      contain-intrinsic-size: auto var(--ss-option-height);
 
       &:hover:not(.ss-disabled) {
         color: var(--ss-bg-color);
@@ -604,8 +634,134 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m)
-        var(--ss-spacing-l);
+      min-height: var(--ss-search-height);
+      padding: 0 var(--ss-spacing-l);
+    }
+  }
+}
+
+// Modal overlay
+.ss-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ss-modal-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ss-spacing-l);
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 0;
+  transition: opacity var(--ss-animation-timing);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &.ss-open {
+    opacity: 1;
+  }
+
+  .ss-modal-dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--ss-modal-width);
+    max-height: var(--ss-modal-height);
+    overflow: visible;
+
+    .ss-modal-title {
+      flex: 0 0 auto;
+      width: 100%;
+      padding: 0 0 var(--ss-spacing-l);
+      box-sizing: border-box;
+      font-weight: bold;
+      font-size: 1.35em;
+      line-height: 1.3;
+      color: #ffffff;
+      text-align: left;
+      background: none;
+      border: none;
+    }
+
+    .ss-content {
+      &.ss-modal-content {
+        position: relative !important;
+        top: auto !important;
+        left: auto !important;
+        width: 100% !important;
+        max-width: 100%;
+        max-height: var(--ss-modal-height);
+        min-height: 0;
+        margin: 0 !important;
+        transform-origin: center center;
+        z-index: 1;
+        border-radius: var(--ss-border-radius);
+        overflow: visible;
+
+        .ss-modal-close {
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 2;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 28px;
+          height: 28px;
+          padding: 0;
+          margin: 0;
+          border: none;
+          border-radius: var(--ss-border-radius);
+          background-color: var(--ss-bg-color);
+          color: var(--ss-font-color);
+          cursor: pointer;
+          outline: 0;
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+          transform: translate(50%, -50%);
+
+          &:hover {
+            background-color: var(--ss-bg-color);
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
+          }
+
+          &:focus {
+            box-shadow: 0 0 5px var(--ss-focus-color);
+          }
+
+          svg {
+            width: 10px;
+            height: 10px;
+
+            path {
+              fill: none;
+              stroke: currentColor;
+              stroke-width: 20;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            }
+          }
+        }
+
+        .ss-list {
+          min-height: 0;
+          overflow-x: hidden;
+          overflow-y: auto;
+          border-radius: 0 0 var(--ss-border-radius) var(--ss-border-radius);
+          scrollbar-color: var(--ss-primary-color) var(--ss-bg-color);
+        }
+
+        .ss-search.ss-hide ~ .ss-list {
+          border-radius: var(--ss-border-radius);
+        }
+
+        &.ss-dir-above,
+        &.ss-dir-below {
+          flex-direction: column;
+          transform-origin: center center;
+        }
+      }
     }
   }
 }