@thalassic/themes 22.18.0 → 22.19.0

package/package.json

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

package/themes/thalassic/components/alert/_alert-color.scss

@@ -1,42 +1,42 @@
 .tls-alert {
   &.tls-alert--primary {
-    --tls-alert-border-color: var(--color-primary);
+    --tls-alert-edge-color: var(--color-primary);
     --tls-alert-color: var(--color-on-primary-container);
     --tls-alert-background-color: var(--color-primary-container);
   }
 
   &.tls-alert--secondary {
-    --tls-alert-border-color: var(--color-secondary);
+    --tls-alert-edge-color: var(--color-secondary);
     --tls-alert-color: var(--color-on-secondary-container);
     --tls-alert-background-color: var(--color-secondary-container);
   }
 
   &.tls-alert--tertiary {
-    --tls-alert-border-color: var(--color-tertiary);
+    --tls-alert-edge-color: var(--color-tertiary);
     --tls-alert-color: var(--color-on-tertiary-container);
     --tls-alert-background-color: var(--color-tertiary-container);
   }
 
   &.tls-alert--success {
-    --tls-alert-border-color: var(--color-success);
+    --tls-alert-edge-color: var(--color-success);
     --tls-alert-color: var(--color-on-success-container);
     --tls-alert-background-color: var(--color-success-container);
   }
 
   &.tls-alert--info {
-    --tls-alert-border-color: var(--color-info);
+    --tls-alert-edge-color: var(--color-info);
     --tls-alert-color: var(--color-on-info-container);
     --tls-alert-background-color: var(--color-info-container);
   }
 
   &.tls-alert--warning {
-    --tls-alert-border-color: var(--color-warning);
+    --tls-alert-edge-color: var(--color-warning);
     --tls-alert-color: var(--color-on-warning-container);
     --tls-alert-background-color: var(--color-warning-container);
   }
 
   &.tls-alert--danger {
-    --tls-alert-border-color: var(--color-danger);
+    --tls-alert-edge-color: var(--color-danger);
     --tls-alert-color: var(--color-on-danger-container);
     --tls-alert-background-color: var(--color-danger-container);
   }

package/themes/thalassic/components/alert/_alert.scss

@@ -1,25 +1,47 @@
 .tls-alert {
   --tls-alert-padding: var(--spacing-4);
-  --tls-alert-border-width: 1px;
+  --tls-alert-gap: var(--spacing-3);
   --tls-alert-border-radius: var(--radius-sm);
+  --tls-alert-edge-width: 4px;
+  --tls-alert-icon-size: 20px;
   --tls-alert-label-font-weight: var(--font-weight-bold);
 
   padding: var(--tls-alert-padding);
 
   display: flex;
+  align-items: flex-start;
+  gap: var(--tls-alert-gap);
 
+  // Accent rule down the leading edge, in the color's full-strength tone. Set
+  // `--tls-alert-edge-width: 0` for a plain tonal surface with no rule.
+  border-inline-start: var(--tls-alert-edge-width) solid var(--tls-alert-edge-color);
   border-radius: var(--tls-alert-border-radius);
-  border: var(--tls-alert-border-width) solid var(--tls-alert-border-color);
 
-  color: var(--tls-alert-color);
   background-color: var(--tls-alert-background-color);
 
-  &-body {
-    &__label {
-      font-weight: var(--tls-alert-label-font-weight);
-    }
+  color: var(--tls-alert-color);
+
+  &__icon {
+    width: var(--tls-alert-icon-size);
+    height: var(--tls-alert-icon-size);
+
+    // Centres the glyph on the first line's box instead of its top edge, so it
+    // reads as part of the text baseline rather than floating above it.
+    margin-block-start: calc((1lh - var(--tls-alert-icon-size)) / 2);
+
+    display: flex;
+    flex-shrink: 0;
+
+    color: inherit;
+  }
+
+  &__body {
+    min-width: 0;
+
+    flex: 1;
+  }
 
-    &__content {
-    }
+  &__label {
+    font-weight: var(--tls-alert-label-font-weight);
   }
 }

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 {