@ethlete/components 1.0.0-next.72 → 1.0.0-next.74

package/src/lib/pagination/pagination.component.css

@@ -130,28 +130,7 @@
   }
 
   .et-pagination-jump {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: var(--et-surface-color-muted-solid, CanvasText);
-  }
-
-  .et-pagination-jump-input {
-    inline-size: 64px;
-    min-block-size: var(--et-pagination-item-size);
-    padding-inline: 8px;
-    font: inherit;
-    font-variant-numeric: tabular-nums;
-    color: var(--et-surface-color-solid, CanvasText);
-    background: transparent;
-    border: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / 0.3));
-    border-radius: var(--et-pagination-radius);
-  }
-
-  .et-pagination-jump-input:where(:focus-visible) {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
-    outline-offset: 2px;
+    inline-size: 128px;
   }
 
   /* Compact density: smaller cells with tighter padding, so the paginator sits closer to table-row

package/src/lib/progress-steps/progress-step.component.css

@@ -39,6 +39,7 @@
       inline-size: calc(100% + var(--et-progress-steps-gap, 8px));
       block-size: 2px;
       background: var(--et-surface-border-solid, currentColor);
+      transition: background-color 200ms ease;
     }
 
     /* Every resolved state fills its connector. The color comes from the step's own forced theme, so
@@ -66,6 +67,10 @@
          centers that whole box rather than the glyph inside it - the digit then sits visibly
          above center, since a line box's extra leading isn't split evenly around the glyph. */
       line-height: 1;
+      transition:
+        border-color 200ms ease,
+        background-color 200ms ease,
+        color 200ms ease;
 
       /* The icon's own SVG is `width/height: 100%` (fills its box) with no intrinsic size of its
          own, so left unset it stretches to whatever the flex layout gives it - explicitly sizing
@@ -107,6 +112,7 @@
 
     .et-progress-step-label {
       color: var(--et-surface-color-muted-solid, currentColor);
+      transition: color 200ms ease;
     }
 
     [etProgressStepDescription] {

package/src/lib/scheduler/scheduler-agenda-view.component.css

@@ -2,7 +2,16 @@
   .et-scheduler-agenda-view {
     display: flex;
     flex-direction: column;
+    position: relative;
+    min-block-size: 0;
+  }
+
+  .et-scheduler-agenda-view-scroller {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
     gap: 12px;
+    min-block-size: 0;
     overflow-y: auto;
   }
 

package/src/lib/scheduler/scheduler-time-grid-view.component.css

@@ -36,6 +36,11 @@
     display: contents;
   }
 
+  .et-scheduler-time-grid-body-wrap {
+    position: relative;
+    min-block-size: 0;
+  }
+
   .et-scheduler-time-grid-body {
     overflow-y: auto;
     max-block-size: var(--et-scheduler-time-grid-body-max-height);

package/src/lib/scrollable/headless/scrollable-buttons.component.css

@@ -92,7 +92,14 @@
       }
 
       &[direction='horizontal'] .et-scrollable-buttons {
-        margin-block: var(--_sticky-margin);
+        position: sticky;
+        inset-block-start: 0;
+        align-self: start;
+        block-size: min(100%, 100dvh);
+
+        & .et-scrollable-button {
+          position: absolute;
+        }
       }
 
       &[direction='vertical'] .et-scrollable-buttons {

package/src/lib/scrollable/headless/scrollable-footer.css

@@ -20,6 +20,18 @@
       align-items: center;
       gap: 10px;
       margin-block-start: 10px;
+
+      & .et-scrollable-button--start {
+        order: 0;
+      }
+
+      & .et-scrollable-navigation {
+        order: 1;
+      }
+
+      & .et-scrollable-button--end {
+        order: 2;
+      }
     }
   }
 }

package/src/lib/scrollable/headless/scrollable-masks.component.css

@@ -71,8 +71,15 @@
     }
 
     &[mask-variant='border'] {
+      --mask-size: 32px;
+
       & .et-scrollable-mask {
         background: none;
+
+        &::after {
+          content: '';
+          position: absolute;
+        }
       }
 
       &[direction='horizontal'],
@@ -83,12 +90,27 @@
           border-inline-start: 1px solid var(--et-surface-border-solid, #404040);
         }
 
+        & .et-scrollable-mask::after {
+          inset-block: 0;
+          inline-size: var(--mask-size);
+        }
+
         & .et-scrollable-mask--start {
           inset-inline: 0;
+
+          &::after {
+            inset-inline-start: 0;
+            background: linear-gradient(to right, var(--_mask-color) 0, transparent 100%);
+          }
         }
 
         & .et-scrollable-mask--end {
           inset-inline: auto 0;
+
+          &::after {
+            inset-inline-end: 1px;
+            background: linear-gradient(to left, var(--_mask-color) 0, transparent 100%);
+          }
         }
       }
 
@@ -99,12 +121,27 @@
           border-block-start: 1px solid var(--et-surface-border-solid, #404040);
         }
 
+        & .et-scrollable-mask::after {
+          inset-inline: 0;
+          block-size: var(--mask-size);
+        }
+
         & .et-scrollable-mask--start {
           inset-block-start: 0;
+
+          &::after {
+            inset-block-start: 0;
+            background: linear-gradient(to bottom, var(--_mask-color) 0, transparent 100%);
+          }
         }
 
         & .et-scrollable-mask--end {
           inset-block: auto 0;
+
+          &::after {
+            inset-block-end: 1px;
+            background: linear-gradient(to top, var(--_mask-color) 0, transparent 100%);
+          }
         }
       }
     }

package/src/lib/scrollbar/scrollbar.component.css

@@ -17,6 +17,12 @@
     initial-value: 999px;
   }
 
+  @property --et-scrollbar-inset {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
   @property --et-scrollbar-fade-duration {
     syntax: '<time>';
     inherits: true;
@@ -50,13 +56,13 @@
     }
 
     &:where([data-orientation='vertical']) {
-      inset-block: 0;
+      inset-block: var(--et-scrollbar-inset);
       inset-inline-end: 0;
       inline-size: var(--et-scrollbar-thickness);
     }
 
     &:where([data-orientation='horizontal']) {
-      inset-inline: 0;
+      inset-inline: var(--et-scrollbar-inset);
       inset-block-end: 0;
       block-size: var(--et-scrollbar-thickness);
     }