@thalassic/themes 22.18.1 → 22.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "22.18.1",
+  "version": "22.19.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^22.0.0",

package/themes/thalassic/components/drawer/_drawer-side.scss

@@ -43,68 +43,105 @@
     }
   }
 
-  // Each side pins the grabber to the panel's inner edge (the one facing the
-  // viewport), centered along the cross axis. Logical insets keep the side panels'
-  // placement correct in RTL, where the physical edges swap.
+  // The grabber is a pill lying along the panel's inner edge (the one facing the
+  // viewport), centered on the cross axis: it runs across an inline panel's block
+  // axis and across a block panel's inline axis. Each side modifier supplies only
+  // the edge it is pinned to.
+  &--start .tls-drawer__grabber,
+  &--end .tls-drawer__grabber {
+    inset-block: 0;
+
+    width: var(--tls-drawer-grabber-thickness);
+    height: var(--tls-drawer-grabber-length);
+
+    margin-block: auto;
+  }
+
+  &--top .tls-drawer__grabber,
+  &--bottom .tls-drawer__grabber {
+    inset-inline: 0;
+
+    width: var(--tls-drawer-grabber-length);
+    height: var(--tls-drawer-grabber-thickness);
+
+    margin-inline: auto;
+  }
+
+  // The pill overlays the panel, so a panel that shows one keeps its own content
+  // clear of the strip the pill occupies: the inset on both sides plus its thickness.
+  &--grabber {
+    --tls-drawer-grabber-strip: calc(
+      var(--tls-drawer-grabber-inset) * 2 + var(--tls-drawer-grabber-thickness)
+    );
+  }
+
+  // Logical insets keep the inline panels' placement correct in RTL, where the
+  // physical edges swap. `--tls-drawer-drag-transform` maps the drag distance the
+  // component writes onto the axis and sign that carry this panel off-screen.
+  // A panel is padded on two opposite edges for two different reasons: the pinned
+  // outer edge keeps content clear of the device's cutout or home indicator, and
+  // the inner edge keeps it clear of the grabber. `env()` insets are physical, so
+  // the inline sides route theirs through `--tls-drawer-safe-area`, which the RTL
+  // block below re-points at the opposite physical edge.
   &--start {
     --tls-drawer-offset: translateX(-100%);
+    --tls-drawer-drag-transform: translateX(calc(-1 * var(--tls-drawer-drag)));
+    --tls-drawer-safe-area: env(safe-area-inset-left);
+
+    padding-inline-start: var(--tls-drawer-safe-area);
 
     .tls-drawer__grabber {
       inset-inline-end: var(--tls-drawer-grabber-inset);
-      inset-block: 0;
-
-      width: var(--tls-drawer-grabber-thickness);
-      height: var(--tls-drawer-grabber-length);
+    }
 
-      margin-block: auto;
+    &.tls-drawer--grabber {
+      padding-inline-end: var(--tls-drawer-grabber-strip);
     }
   }
 
   &--end {
     --tls-drawer-offset: translateX(100%);
+    --tls-drawer-drag-transform: translateX(var(--tls-drawer-drag));
+    --tls-drawer-safe-area: env(safe-area-inset-right);
+
+    padding-inline-end: var(--tls-drawer-safe-area);
 
     .tls-drawer__grabber {
       inset-inline-start: var(--tls-drawer-grabber-inset);
-      inset-block: 0;
-
-      width: var(--tls-drawer-grabber-thickness);
-      height: var(--tls-drawer-grabber-length);
+    }
 
-      margin-block: auto;
+    &.tls-drawer--grabber {
+      padding-inline-start: var(--tls-drawer-grabber-strip);
     }
   }
 
   &--top {
     --tls-drawer-offset: translateY(-100%);
+    --tls-drawer-drag-transform: translateY(calc(-1 * var(--tls-drawer-drag)));
 
-    // Keeps the content clear of a device cutout on the pinned edge.
-    padding-top: env(safe-area-inset-top);
+    padding-block-start: env(safe-area-inset-top);
 
     .tls-drawer__grabber {
-      bottom: var(--tls-drawer-grabber-inset);
-      inset-inline: 0;
-
-      width: var(--tls-drawer-grabber-length);
-      height: var(--tls-drawer-grabber-thickness);
+      inset-block-end: var(--tls-drawer-grabber-inset);
+    }
 
-      margin-inline: auto;
+    &.tls-drawer--grabber {
+      padding-block-end: var(--tls-drawer-grabber-strip);
     }
   }
 
   &--bottom {
     --tls-drawer-offset: translateY(100%);
+    --tls-drawer-drag-transform: translateY(var(--tls-drawer-drag));
 
-    // Keeps the content clear of the home indicator on the pinned edge.
-    padding-bottom: env(safe-area-inset-bottom);
+    padding-block-end: env(safe-area-inset-bottom);
 
     .tls-drawer__grabber {
-      top: var(--tls-drawer-grabber-inset);
-      inset-inline: 0;
-
-      width: var(--tls-drawer-grabber-length);
-      height: var(--tls-drawer-grabber-thickness);
+      inset-block-start: var(--tls-drawer-grabber-inset);
+    }
 
-      margin-inline: auto;
+    &.tls-drawer--grabber {
+      padding-block-start: var(--tls-drawer-grabber-strip);
     }
   }
 
@@ -128,16 +165,21 @@
     }
   }
 
-  // In RTL the logical `start`/`end` edges swap sides, so the slide offset and the
-  // rounded inner corners mirror. `top`/`bottom` are unaffected. The position
-  // strategy resolves the physical edge separately (see DrawerService).
+  // In RTL the logical `start`/`end` edges swap sides, so the slide offset, the
+  // drag direction, the safe-area edge and the rounded inner corners all mirror.
+  // `top`/`bottom` are unaffected. The position strategy resolves the physical
+  // edge separately (see DrawerService).
   :root[dir='rtl'] & {
     &--start {
       --tls-drawer-offset: translateX(100%);
+      --tls-drawer-drag-transform: translateX(var(--tls-drawer-drag));
+      --tls-drawer-safe-area: env(safe-area-inset-right);
     }
 
     &--end {
       --tls-drawer-offset: translateX(-100%);
+      --tls-drawer-drag-transform: translateX(calc(-1 * var(--tls-drawer-drag)));
+      --tls-drawer-safe-area: env(safe-area-inset-left);
     }
 
     &--rounded {

package/themes/thalassic/components/drawer/_drawer.scss

@@ -24,6 +24,13 @@
   --tls-drawer-backdrop: rgb(0 0 0 / 0.4);
 
   background-color: var(--tls-drawer-backdrop);
+
+  // The backdrop's opacity is driven inline while a panel is dragged, so it
+  // tracks the finger. This transition only smooths the settle at the end of the
+  // gesture; the drag suspends it inline so it never lags the finger.
+  @include mixins.motion(essential) {
+    transition: opacity var(--motion-default) var(--motion-ease-out);
+  }
 }
 
 .tls-drawer {
@@ -32,11 +39,15 @@
   --tls-drawer-border-radius: var(--radius-xl);
   --tls-drawer-shadow: var(--shadow-lg);
   --tls-drawer-padding: var(--spacing-6);
-  --tls-drawer-close-size: 16px;
+  --tls-drawer-close-size: 32px;
+  --tls-drawer-close-icon-size: 16px;
   --tls-drawer-close-padding: var(--spacing-4);
   --tls-drawer-grabber-length: 36px;
   --tls-drawer-grabber-thickness: 5px;
   --tls-drawer-grabber-inset: var(--spacing-2);
+  // Distance the panel has been dragged toward its pinned edge, written by the
+  // component while a drag is in flight. `0px`, not `0` — it is a length.
+  --tls-drawer-drag: 0px;
 
   position: relative;
 
@@ -57,54 +68,92 @@
   // browser to start a fresh animation (a mere `animation-direction` change does
   // not restart an already-finished animation).
   @include mixins.motion(essential) {
-    &--enter {
-      animation: tls-drawer-slide-in var(--motion-instant) var(--motion-ease-out) both;
+    // The enter keyframe holds `transform` for the panel's whole lifetime
+    // (`animation-fill-mode: both`), so it has to stand down explicitly for a
+    // drag to own the transform. The class names are written out rather than
+    // interpolated because inside this mixin `&` is the whole `:root[data-motion]`
+    // selector list, which `:not()` cannot take. Leaving is exempt: a panel never
+    // slides out and drags at once.
+    &--enter:not(.tls-drawer--dragging):not(.tls-drawer--settling) {
+      animation: tls-drawer-slide-in var(--motion-default) var(--motion-ease-out) both;
     }
 
     &--leave {
-      animation: tls-drawer-slide-out var(--motion-instant) var(--motion-ease-in) both;
+      animation: tls-drawer-slide-out var(--motion-default) var(--motion-ease-in) both;
+    }
+
+    // Only the settle animates. The drag itself is direct manipulation, not
+    // motion, so it tracks the finger at every motion level.
+    &--settling {
+      transition: transform var(--motion-default) var(--motion-ease-out);
     }
   }
 
+  &--dragging,
+  &--settling {
+    transform: var(--tls-drawer-drag-transform);
+  }
+
   &__close {
     position: absolute;
-    top: var(--tls-drawer-close-padding);
+    inset-block-start: var(--tls-drawer-close-padding);
     inset-inline-end: var(--tls-drawer-close-padding);
     z-index: 1;
 
+    width: var(--tls-drawer-close-size);
+    height: var(--tls-drawer-close-size);
+
     display: flex;
     align-items: center;
     justify-content: center;
 
-    width: var(--tls-drawer-close-size);
-    height: var(--tls-drawer-close-size);
+    border: none;
+    border-radius: var(--radius-full);
 
-    color: var(--color-outline);
     background: transparent;
-    border: none;
+
+    color: var(--color-outline);
+
     cursor: pointer;
 
-    transition: color var(--motion-fast) var(--motion-ease-in-out);
+    transition:
+      color var(--motion-fast) var(--motion-ease-in-out),
+      background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    // The visual box already clears the 24px AA floor; this reaches the 44px
+    // target on touch without growing it.
+    @include mixins.touch-target(var(--tls-drawer-close-size));
 
     &:hover {
+      background-color: var(--color-surface-container-high);
       color: var(--color-on-surface);
     }
 
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
     .tls-icon {
-      width: 100%;
-      height: 100%;
+      width: var(--tls-drawer-close-icon-size);
+      height: var(--tls-drawer-close-icon-size);
     }
   }
 
-  // Grabber pill, the visual affordance of a sheet-style panel. Placement along the
-  // panel's inner edge is side-dependent and lives with the side modifiers.
+  // Grabber pill, the affordance for the panel's drag-to-dismiss gesture. Purely
+  // decorative — the whole panel is the drag surface, so the pill carries no
+  // pointer handling of its own. Placement along the panel's inner edge is
+  // side-dependent and lives with the side modifiers.
+  //
+  // `--color-outline` rather than the fainter `--color-outline-variant`: as the
+  // only visual signal that the panel can be dragged it is a meaningful graphic
+  // and owes 3:1 against the panel (WCAG 1.4.11).
   &__grabber {
     position: absolute;
     z-index: 1;
 
     border-radius: calc(var(--tls-drawer-grabber-thickness) / 2);
 
-    background-color: var(--color-outline-variant);
+    background-color: var(--color-outline);
   }
 
   &__header {