@jobber/components 8.14.0 → 8.15.0

package/dist/styles.css

@@ -4005,12 +4005,33 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   right: 0;
   bottom: 0;
   left: 0;
+
+  /*
+   * Use a high (modal) z-index so the sheet and its dimmed backdrop render on top
+   * of the app's nav bars, headers, and other fixed UI instead of behind them.
+   * Every sheet renders its own backdrop at this same elevation (see the
+   * `forceRender` in BottomSheet.tsx), so the frontmost sheet — portaled last —
+   * wins by DOM order: it both catches the dismissing outside press and lays its
+   * dim over the sheets beneath it.
+   */
   z-index: 1001;
   z-index: var(--elevation-modal);
   background-color: rgba(0, 0, 0, 0.32);
   background-color: var(--color-overlay);
+
+  /*
+   * Only the frontmost sheet shows the dim overlay. When a sheet has a nested
+   * sheet open above it, Base UI marks its popup with `data-nested-drawer-open`;
+   * we make that sheet's backdrop transparent so the dim is supplied solely by
+   * the frontmost sheet's backdrop. This keeps the dimming from compounding as
+   * sheets stack.
+   */
 }
 
+.Qf3IFhKJwQ0-:has(~ ._868PDAA3U2M-[data-nested-drawer-open]) {
+    background-color: transparent;
+  }
+
 ._868PDAA3U2M- {
   display: -ms-flexbox;
   display: flex;
@@ -4046,15 +4067,40 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       flex: 1 1 auto;
 }
 
+.V--tRnN-P0I- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+/* The ScrollArea.Viewport — the scrollable element. */
+
 ._1I0eaFciaWo- {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
   min-height: 0;
   padding-bottom: env(safe-area-inset-bottom);
-  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
+/* Re-enable the browser's native scrollbar — BaseUI hides it by default for its
+   own custom scrollbar, which we are not using. */
+
+.V--tRnN-P0I- ._1I0eaFciaWo- {
+  scrollbar-width: auto;
+}
+
+.V--tRnN-P0I- ._1I0eaFciaWo-::-webkit-scrollbar {
+  display: revert;
+}
+
+/* Bottom fade — shown only while there is content below the current scroll. */
+
 .BYEzqcZUGls- {
   position: absolute;
   right: 0;
@@ -4064,6 +4110,21 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1));
   background: linear-gradient(to bottom, transparent, var(--color-surface));
   pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms ease;
+  transition: opacity var(--timing-base) ease;
+}
+
+.V--tRnN-P0I-[data-overflow-y-end] .BYEzqcZUGls- {
+  opacity: 1;
+}
+
+/* Honor reduced-motion: drop the bottom fade transition. */
+
+@media (prefers-reduced-motion: reduce) {
+  .BYEzqcZUGls- {
+    transition: none;
+  }
 }
 
 .yL7--3ni8BM- {
@@ -5574,7 +5635,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       justify-content: center;
 }
 
-.QsRc49DHSgA- {
+.bog6pntD050- {
   z-index: 1002;
   z-index: var(--elevation-tooltip);
   width: calc(64px * 3.75);
@@ -5594,22 +5655,22 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 * so please be careful if you change this class name, or the css rules within.
 */
 
-.QsRc49DHSgA-._7Fd5XGsPpUA- {
+.bog6pntD050-.CLGExWp0HOc- {
   display: none;
   visibility: hidden;
 }
 
-.QsRc49DHSgA-:focus,
-.QsRc49DHSgA-:focus-visible {
+.bog6pntD050-:focus,
+.bog6pntD050-:focus-visible {
   outline: none;
 }
 
-.QsRc49DHSgA-:focus-visible {
+.bog6pntD050-:focus-visible {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
-.yV8-0Hs43J0- {
+.Tuw6ng4mYhg- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -5623,16 +5684,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: var(--color-surface);
 }
 
-.g3Gdt8jXvFk- {
+.uC0PW9BRcl4- {
   padding-bottom: 8px;
   padding-bottom: var(--space-small);
 }
 
-.c4B0WFX6K0o- {
+._74R4ICUNw-M- {
   position: relative;
 }
 
-.AH9-zRHXfpo- {
+.icUzhma-GJs- {
   width: 100%;
   padding: 16px;
   padding: var(--space-base);
@@ -5650,17 +5711,17 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: var(--color-surface);
 }
 
-.AH9-zRHXfpo-::-webkit-input-placeholder {
+.icUzhma-GJs-::-webkit-input-placeholder {
   color: var(--field--placeholder-color);
   opacity: 1;
 }
 
-.AH9-zRHXfpo-:-ms-input-placeholder {
+.icUzhma-GJs-:-ms-input-placeholder {
   color: var(--field--placeholder-color);
   opacity: 1;
 }
 
-.AH9-zRHXfpo-::-ms-input-placeholder {
+.icUzhma-GJs-::-ms-input-placeholder {
   color: var(--field--placeholder-color);
   opacity: 1;
 }
@@ -5680,23 +5741,23 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   opacity: 1;
 }
 
-.AH9-zRHXfpo-::placeholder {
+.icUzhma-GJs-::placeholder {
   color: var(--field--placeholder-color);
   opacity: 1;
 }
 
-.AH9-zRHXfpo-::-webkit-search-decoration,
-.AH9-zRHXfpo-::-webkit-search-cancel-button,
-.AH9-zRHXfpo-::-webkit-search-results-button,
-.AH9-zRHXfpo-::-webkit-search-results-decoration {
+.icUzhma-GJs-::-webkit-search-decoration,
+.icUzhma-GJs-::-webkit-search-cancel-button,
+.icUzhma-GJs-::-webkit-search-results-button,
+.icUzhma-GJs-::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
-.AH9-zRHXfpo-:focus {
+.icUzhma-GJs-:focus {
   outline: none;
 }
 
-.mymN3p8sKRw- {
+.ePmiDYZ2boo- {
   display: -ms-flexbox;
   display: flex;
   position: absolute;
@@ -5724,22 +5785,22 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       align-items: center;
 }
 
-.mymN3p8sKRw-:focus {
+.ePmiDYZ2boo-:focus {
   outline: transparent;
 }
 
-.mymN3p8sKRw-:focus-visible {
+.ePmiDYZ2boo-:focus-visible {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
-.wFxd-3vJyKo- {
+.d-JzbXbz3vI- {
   position: relative;
   padding: 8px 0;
   padding: var(--space-small) 0;
 }
 
-.PzwV5qiIgV4- {
+._9sPZShzetbo- {
   display: -ms-flexbox;
   display: flex;
 
@@ -5756,14 +5817,14 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-smaller);
 }
 
-.c6TosVipkmw-,
-.ZYrg-J4-v2Y- {
+._7iUzJFaZYDs-,
+.I3lJfMgm-Io- {
   padding: 8px 16px;
   padding: var(--space-small) var(--space-base);
 }
 
-.wFxd-3vJyKo-::before,
-.wFxd-3vJyKo-::after {
+.d-JzbXbz3vI-::before,
+.d-JzbXbz3vI-::after {
   content: "";
   display: block;
   position: absolute;
@@ -5775,7 +5836,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   transition: opacity 0.3s ease-in-out;
 }
 
-.wFxd-3vJyKo-::after {
+.d-JzbXbz3vI-::after {
   bottom: 8px;
   bottom: var(--space-small);
   background: linear-gradient(
@@ -5790,7 +5851,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   );
 }
 
-.wFxd-3vJyKo-::before {
+.d-JzbXbz3vI-::before {
   top: 8px;
   top: var(--space-small);
   background: linear-gradient(
@@ -5805,22 +5866,22 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   );
 }
 
-.FLu6FtihsLo-::before,
-.-o-v1zjzb48-::before {
+.VNhhUhatkmw-::before,
+.w8LsXerWI7I-::before {
   opacity: 0;
 }
 
-._2iW5DZ16G2U-::after,
-.-o-v1zjzb48-::after {
+.-Bk1T-RD-tA-::after,
+.w8LsXerWI7I-::after {
   opacity: 0;
 }
 
-.PqwPrWjdB-A- {
+.czPVeCUK2Zc- {
   padding: 16px 16px;
   padding: var(--space-base) var(--space-base);
 }
 
-.PqwPrWjdB-A-.v3cabuEY4Xk- {
+.czPVeCUK2Zc-._9IwiWJBxJxQ- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
@@ -5831,7 +5892,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   padding: var(--space-base) 0;
 }
 
-.PqwPrWjdB-A-.v3cabuEY4Xk-:empty {
+.czPVeCUK2Zc-._9IwiWJBxJxQ-:empty {
   display: none;
 }
 
@@ -5911,7 +5972,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       align-items: end;
 }
 
-.HowvTX8-pw4- {
+.tjXkqP6ZdSk- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-negative: 0;
@@ -5937,30 +5998,30 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       align-items: center;
 }
 
-.HowvTX8-pw4-:hover,
-.HowvTX8-pw4-:focus-visible {
+.tjXkqP6ZdSk-:hover,
+.tjXkqP6ZdSk-:focus-visible {
   background-color: hsl(43, 18%, 92%);
   background-color: var(--color-surface--hover);
 }
 
-.HowvTX8-pw4-:focus,
-.HowvTX8-pw4-:focus-visible {
+.tjXkqP6ZdSk-:focus,
+.tjXkqP6ZdSk-:focus-visible {
   outline: none;
 }
 
-.HowvTX8-pw4-:focus-visible {
+.tjXkqP6ZdSk-:focus-visible {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
-.jPB--ZCYNNI- {
+._8SCmS4wfKOQ- {
   -webkit-transform: translateY(calc(48px * -1));
   -webkit-transform: translateY(calc(var(--space-largest) * -1));
           transform: translateY(calc(48px * -1));
           transform: translateY(calc(var(--space-largest) * -1));
 }
 
-.nrNh3feibg8- {
+.qsCrV9XnUYQ- {
   display: -ms-flexbox;
   display: flex;
   padding: 16px 8px 0 16px;
@@ -5973,7 +6034,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   gap: var(--space-smaller);
 }
 
-.NWf8JR3TBoo- {
+.wnyB0d1ZE70- {
   width: 100%;
   box-sizing: border-box;
   padding: 0 8px;
@@ -5982,7 +6043,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: var(--color-surface);
 }
 
-.PoMXFVYVY5A- {
+.mljM3ouZmbM- {
   position: relative;
   width: 100%;
   min-height: calc((48px - 8px));
@@ -6000,28 +6061,28 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   transition: all var(--timing-base);
 }
 
-.PoMXFVYVY5A-:focus {
+.mljM3ouZmbM-:focus {
   outline: none;
 }
 
-.PoMXFVYVY5A-:hover,
-.PoMXFVYVY5A-:focus-visible {
+.mljM3ouZmbM-:hover,
+.mljM3ouZmbM-:focus-visible {
   outline: none;
   background-color: hsl(43, 18%, 92%);
   background-color: var(--color-surface--hover);
 }
 
-.PoMXFVYVY5A-:focus-visible {
+.mljM3ouZmbM-:focus-visible {
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
   box-shadow: var(--shadow-focus);
 }
 
-.PoMXFVYVY5A- span {
+.mljM3ouZmbM- span {
   margin-left: 8px;
   margin-left: var(--space-small);
 }
 
-.xxU2WqkpXZU- {
+.pWccl-Pw3hY- {
   position: fixed;
   top: 0;
   right: 0;
@@ -6032,7 +6093,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: transparent;
 }
 
-.W-9SMjhEMpI- {
+.CGh3PQqBZ1c- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   max-width: 100%;