@thalassic/themes 22.16.1 → 22.17.0

package/package.json

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

package/themes/thalassic/components/_odometer.scss

@@ -13,20 +13,7 @@
   line-height: 1;
 
   &__value {
-    position: absolute;
-
-    width: 1px;
-    height: 1px;
-
-    margin: -1px;
-    padding: 0;
-
-    overflow: hidden;
-
-    clip-path: inset(50%);
-    white-space: nowrap;
-
-    border: 0;
+    @include mixins.visually-hidden;
   }
 
   &__row {

package/themes/thalassic/components/_table.scss

@@ -48,10 +48,14 @@
   &__header-cell {
     padding: var(--tls-table-cell-padding-y) var(--tls-table-cell-padding-x);
 
-    color: var(--tls-table-header-color);
-
     border-bottom: 1px solid var(--tls-table-border-color);
 
+    // On the cell, not only the row: a sticky header cell must stay opaque on its own,
+    // since the row element does not stick with it.
+    background: var(--tls-table-header-background);
+
+    color: var(--tls-table-header-color);
+
     text-align: start;
     font-size: var(--font-label-small-size);
     font-weight: var(--tls-table-header-weight);
@@ -76,3 +80,26 @@
     background-color: var(--tls-table-background);
   }
 }
+
+// Scrollable table: the component host bounds the height and scrolls the rows while
+// the header row sticks to its top edge.
+.tls-table-container--scrollable {
+  border-radius: var(--radius-md);
+
+  // Collapsed borders belong to the table grid, which does not travel with sticky
+  // cells — a pinned header would shed its border while rows scroll beneath it.
+  // Separate borders belong to the cells and stick with them. And sticky positioning
+  // confines itself to the nearest ancestor that clips overflow, so the table must
+  // not clip here — the scrollable container clips the corners instead.
+  .tls-table {
+    border-collapse: separate;
+    border-spacing: 0;
+    overflow: visible;
+  }
+
+  // Row borders move onto the cells: `tr` borders only paint under the collapsed
+  // model that sticky positioning rules out.
+  .tls-table__row:not(:last-child) .tls-table__cell {
+    border-bottom: 1px solid var(--tls-table-border-color);
+  }
+}

package/themes/thalassic/components/_virtual-scroll.scss

@@ -0,0 +1,11 @@
+@use '../mixins' as mixins;
+
+.tls-virtual-scroll__viewport {
+  // Items are swapped in and out mid-gesture, so a scroll chain into an ancestor would
+  // move the page under content the reader is still tracking; keep the gesture here.
+  overscroll-behavior: contain;
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+}

package/themes/thalassic/components/autocomplete/_autocomplete-panel.scss

@@ -23,6 +23,27 @@
   list-style: none;
 
   @include mixins.panel-open;
+
+  &--virtual {
+    // The virtual-scroll viewport inside is the scroll container; the panel only clips
+    // to its rounded corners.
+    overflow: hidden;
+
+    // Windowing positions every row at a fixed offset, so each row must occupy exactly
+    // the item size the viewport publishes — a taller custom option template is clipped
+    // rather than allowed to drift the rows out of place.
+    .tls-autocomplete__option {
+      height: var(--tls-virtual-scroll-item-size);
+
+      box-sizing: border-box;
+
+      overflow: hidden;
+    }
+
+    .tls-autocomplete__option-button {
+      height: 100%;
+    }
+  }
 }
 
 .tls-autocomplete__option {

package/themes/thalassic/components/calendar/_agenda.scss

@@ -1,4 +1,5 @@
 @use '../../mixins' as mixins;
+@use 'lines';
 
 .tls-calendar-agenda-view {
   display: flex;
@@ -6,13 +7,13 @@
 
   &__day {
     display: grid;
-    grid-template-columns: var(--spacing-24) 1fr;
+    grid-template-columns: 96px 1fr;
     gap: var(--spacing-4);
 
     padding-block: var(--spacing-3);
 
     & + & {
-      border-block-start: 1px solid var(--color-outline-variant);
+      border-block-start: lines.horizontal();
     }
   }
 

package/themes/thalassic/components/calendar/_calendar.scss

@@ -1,4 +1,9 @@
+@use 'compact';
+
 .tls-calendar {
+  // Named container so the dense layout can resolve against the calendar's own width rather
+  // than the viewport's, keeping a calendar in a narrow column compact on a wide screen.
+  container: tls-calendar / inline-size;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
@@ -9,6 +14,10 @@
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-4);
+
+    @include compact.compact {
+      gap: var(--spacing-3);
+    }
   }
 
   &__nav {
@@ -31,9 +40,27 @@
     font-weight: var(--font-weight-semibold);
     line-height: var(--font-title-large-line-height);
     color: var(--color-on-surface);
+
+    // A full-width basis ahead of its siblings puts the title on its own line, leaving the
+    // navigation and the switcher to share the one below.
+    @include compact.compact {
+      order: -1;
+      flex-basis: 100%;
+
+      font-size: var(--font-title-medium-size);
+      line-height: var(--font-title-medium-line-height);
+    }
   }
 
   &__views {
     flex-shrink: 0;
+
+    // The switcher scrolls rather than forcing a third row when its labels outgrow the space
+    // left by the navigation.
+    @include compact.compact {
+      min-width: 0;
+
+      overflow-x: auto;
+    }
   }
 }

package/themes/thalassic/components/calendar/_compact.scss

@@ -0,0 +1,21 @@
+// Width at which the calendar switches to its dense layout: the `sm` breakpoint. The value is
+// restated rather than shared because this theme carries no Sass dependency on the library that
+// owns the scale, so it must stay in sync with `sm` in `libs/core/src/styles/tools/_breakpoint.scss`
+// — the same coupling `ViewportConfig` documents on the TypeScript side. A container query cannot
+// read a custom property in its condition either, so it has to be a Sass value regardless.
+$compact-width: 640px;
+
+// Emits its content for both routes into the dense layout: forced on by the modifier class, and
+// resolved automatically once the calendar's own width crosses the threshold. Rules inside must
+// target a descendant of the calendar root, because a query container cannot match its own size.
+@mixin compact {
+  .tls-calendar--compact & {
+    @content;
+  }
+
+  @container tls-calendar (max-width: #{$compact-width}) {
+    .tls-calendar--compact-auto & {
+      @content;
+    }
+  }
+}

package/themes/thalassic/components/calendar/_lines.scss

@@ -0,0 +1,23 @@
+// Every grid line in the calendar is read through these helpers rather than declared inline, so
+// one declaration retints or removes a whole family of them across all views — for example
+// `--tls-calendar-line-vertical: none` to drop every column separator.
+//
+// The tokens are deliberately left undeclared: each helper carries the default as a fallback, so
+// a view still draws its lines when rendered on its own, and a token set anywhere above a view
+// inherits down to it instead of being shadowed by a declaration on the view itself.
+$default: 1px solid var(--color-outline-variant);
+
+// Lines dividing rows: week rows in the month grid, hour rows in the time grid, days in the agenda.
+@function horizontal() {
+  @return var(--tls-calendar-line-horizontal, #{$default});
+}
+
+// Lines dividing columns: day columns in the month grid and the time grid.
+@function vertical() {
+  @return var(--tls-calendar-line-vertical, #{$default});
+}
+
+// The border enclosing a view's grid.
+@function outer() {
+  @return var(--tls-calendar-line-outer, #{$default});
+}

package/themes/thalassic/components/calendar/_month-view.scss

@@ -1,4 +1,6 @@
 @use '../../mixins' as mixins;
+@use 'compact';
+@use 'lines';
 
 .tls-calendar-month-view {
   // Lane geometry shared by the cell height and the bar overlay. The day-number reservation
@@ -8,6 +10,10 @@
   --tls-calendar-bar-gap: var(--spacing-1);
   --tls-calendar-more-height: var(--spacing-5);
 
+  // Diameter of a dense-layout event dot, and the gap between two of them.
+  --tls-calendar-marker-size: 6px;
+  --tls-calendar-marker-gap: var(--spacing-1);
+
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
@@ -39,10 +45,15 @@
       1fr
     );
 
-    // Collapsed borders: the grid draws the top/start edge, each cell the bottom/end edge,
-    // so shared borders never double up and there are no gaps between cells.
-    border-block-start: 1px solid var(--color-outline-variant);
-    border-inline-start: 1px solid var(--color-outline-variant);
+    // The grid owns the outer edge and each cell only its interior lines, so the two families
+    // stay independently controllable and never double up along the perimeter.
+    border: lines.outer();
+
+    // With no bars to make room for, a row only has to hold a number and its dots. The floor
+    // doubles as the day cell's touch target.
+    @include compact.compact {
+      grid-auto-rows: minmax(var(--spacing-11), 1fr);
+    }
   }
 
   &__week {
@@ -50,6 +61,11 @@
 
     display: grid;
     grid-template-columns: repeat(7, 1fr);
+
+    // The grid's own border already closes the bottom of the last week.
+    &:last-child .tls-calendar-month-view__day {
+      border-block-end: none;
+    }
   }
 
   &__day {
@@ -60,8 +76,8 @@
     display: flex;
     flex-direction: column;
 
-    border-block-end: 1px solid var(--color-outline-variant);
-    border-inline-end: 1px solid var(--color-outline-variant);
+    border-block-end: lines.horizontal();
+    border-inline-end: lines.vertical();
 
     background-color: var(--color-surface-container-lowest);
 
@@ -73,6 +89,19 @@
       transition: background-color var(--motion-fast) var(--motion-ease-in-out);
     }
 
+    @include compact.compact {
+      padding-inline: var(--spacing-1);
+
+      // A grid rather than the default column flex: the dot row is reserved whether or not the
+      // day has events, so day numbers sit on one line across a week instead of shifting up
+      // wherever dots appear. `align-content` then centres the pair as a block.
+      display: grid;
+      grid-template-rows: auto var(--tls-calendar-marker-size);
+      align-content: center;
+      justify-items: center;
+      gap: var(--spacing-1);
+    }
+
     &:hover {
       background-color: var(--color-surface-container-low);
     }
@@ -81,6 +110,12 @@
       @include mixins.focus-ring;
     }
 
+    // Seven day cells precede the bar overlay in a week, so this is the last column — its line
+    // would otherwise land on top of the grid's own border.
+    &:nth-child(7) {
+      border-inline-end: none;
+    }
+
     &--outside {
       background-color: var(--color-surface-container);
 
@@ -110,13 +145,81 @@
 
     font-size: var(--font-label-small-size);
     font-weight: var(--font-weight-medium);
+
+    @include compact.compact {
+      align-self: center;
+    }
+  }
+
+  // Dots summarising a day's events, shown only where the bars are suppressed.
+  &__markers {
+    display: none;
+    justify-content: center;
+    gap: var(--tls-calendar-marker-gap);
+
+    @include compact.compact {
+      display: flex;
+    }
+  }
+
+  &__markers-label {
+    @include mixins.visually-hidden;
+  }
+
+  &__marker {
+    width: var(--tls-calendar-marker-size);
+    height: var(--tls-calendar-marker-size);
+
+    flex-shrink: 0;
+
+    border-radius: 50%;
+
+    background-color: var(--tls-calendar-marker-color, var(--color-primary));
+
+    &--primary {
+      --tls-calendar-marker-color: var(--color-primary);
+    }
+
+    &--secondary {
+      --tls-calendar-marker-color: var(--color-secondary);
+    }
+
+    &--tertiary {
+      --tls-calendar-marker-color: var(--color-tertiary);
+    }
+
+    &--success {
+      --tls-calendar-marker-color: var(--color-success);
+    }
+
+    &--info {
+      --tls-calendar-marker-color: var(--color-info);
+    }
+
+    &--warning {
+      --tls-calendar-marker-color: var(--color-warning);
+    }
+
+    &--danger {
+      --tls-calendar-marker-color: var(--color-danger);
+    }
   }
 
   &__more {
     margin-block-start: auto;
 
     font-size: var(--font-label-small-size);
+    // The row height reserves a single line for this label, so it truncates rather than wraps
+    // into space the grid has not accounted for.
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     color: var(--color-on-surface-variant);
+
+    // The dots already stand for every event, counted ones included.
+    @include compact.compact {
+      display: none;
+    }
   }
 
   &__bars {
@@ -135,6 +238,12 @@
     padding-inline: var(--tls-calendar-bar-gap);
 
     pointer-events: none;
+
+    // The dense layout represents events as dots inside each cell instead. Selecting a single
+    // event is no longer reachable here, so a day cell's `dateSelect` is the way in.
+    @include compact.compact {
+      display: none;
+    }
   }
 
   &__bar {
@@ -152,4 +261,21 @@
       border-end-end-radius: 0;
     }
   }
+
+  // Square cells take their height from the column width, so the row can no longer carry a
+  // floor sized to the events it holds — a cell that overflows is clipped rather than growing.
+  // Declared after the dense layout's own row sizing so the ratio wins where both apply, which
+  // also means a square cell can fall under the dense layout's touch-target floor once the
+  // column is narrower than it.
+  &--square {
+    .tls-calendar-month-view__grid {
+      grid-auto-rows: auto;
+    }
+
+    .tls-calendar-month-view__day {
+      aspect-ratio: 1;
+
+      overflow: hidden;
+    }
+  }
 }

package/themes/thalassic/components/calendar/_time-grid.scss

@@ -1,4 +1,5 @@
 @use '../../mixins' as mixins;
+@use 'lines';
 
 .tls-calendar-time-grid {
   --tls-calendar-gutter: var(--spacing-16);
@@ -13,7 +14,7 @@
   }
 
   &__header {
-    border-block-end: 1px solid var(--color-outline-variant);
+    border-block-end: lines.horizontal();
   }
 
   &__heading {
@@ -42,7 +43,7 @@
   }
 
   &__all-day {
-    border-block-end: 1px solid var(--color-outline-variant);
+    border-block-end: lines.horizontal();
   }
 
   &__gutter-label {
@@ -60,7 +61,7 @@
     flex-direction: column;
     gap: var(--spacing-1);
 
-    border-inline-start: 1px solid var(--color-outline-variant);
+    border-inline-start: lines.vertical();
   }
 
   &__gutter {
@@ -86,7 +87,7 @@
   &__column {
     position: relative;
 
-    border-inline-start: 1px solid var(--color-outline-variant);
+    border-inline-start: lines.vertical();
 
     &--today {
       background-color: var(--color-surface-container-low);
@@ -99,7 +100,7 @@
     box-sizing: border-box;
     height: var(--tls-calendar-hour-height);
 
-    border-block-start: 1px solid var(--color-outline-variant);
+    border-block-start: lines.horizontal();
   }
 
   &__event {

package/themes/thalassic/components/dialog/_dialog.scss

@@ -1,3 +1,29 @@
+@use '../../mixins' as mixins;
+
+@keyframes tls-dialog-open {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes tls-dialog-close {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
 .tls-dialog-backdrop {
   --tls-dialog-backdrop: rgb(0 0 0 / 0.4);
 
@@ -33,6 +59,23 @@
   color: var(--tls-dialog-color);
   box-shadow: var(--tls-dialog-shadow);
 
+  // The fade-and-scale communicates the surface appearing and dismissing, so it
+  // is a functional cue on the `essential` tier and survives reduced motion
+  // (resolved by `MotionService`). Enter and leave use distinct keyframe names,
+  // not one shared keyframe with `reverse`: the container keeps its `--enter`
+  // class for the panel's whole lifetime, so swapping to `--leave` must change
+  // `animation-name` to force the 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-dialog-open var(--motion-instant) var(--motion-ease-out) both;
+    }
+
+    &--leave {
+      animation: tls-dialog-close var(--motion-instant) var(--motion-ease-in) both;
+    }
+  }
+
   // The portal inserts the consumer's content component as the dialog's only
   // content child, so that host — not the header/body/footer inside it — is
   // this flex column's item. Make it a flex column in turn, or the body cannot

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

@@ -27,20 +27,85 @@
     max-height: 100dvh;
   }
 
+  // Sized by content along the main axis, capped so a short panel hugs its content
+  // while a tall one still scrolls instead of filling the viewport.
+  &--auto {
+    &.tls-drawer--start,
+    &.tls-drawer--end {
+      width: fit-content;
+      max-width: 90dvw;
+    }
+
+    &.tls-drawer--top,
+    &.tls-drawer--bottom {
+      height: fit-content;
+      max-height: 90dvh;
+    }
+  }
+
+  // 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.
   &--start {
     --tls-drawer-offset: translateX(-100%);
+
+    .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;
+    }
   }
 
   &--end {
     --tls-drawer-offset: translateX(100%);
+
+    .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;
+    }
   }
 
   &--top {
     --tls-drawer-offset: translateY(-100%);
+
+    // Keeps the content clear of a device cutout on the pinned edge.
+    padding-top: 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);
+
+      margin-inline: auto;
+    }
   }
 
   &--bottom {
     --tls-drawer-offset: translateY(100%);
+
+    // Keeps the content clear of the home indicator on the pinned edge.
+    padding-bottom: 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);
+
+      margin-inline: auto;
+    }
   }
 
   // Rounds the inner edge only (the two corners facing the viewport). Opt-in; the

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

@@ -34,6 +34,9 @@
   --tls-drawer-padding: var(--spacing-6);
   --tls-drawer-close-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);
 
   position: relative;
 
@@ -93,6 +96,17 @@
     }
   }
 
+  // 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 {
+    position: absolute;
+    z-index: 1;
+
+    border-radius: calc(var(--tls-drawer-grabber-thickness) / 2);
+
+    background-color: var(--color-outline-variant);
+  }
+
   &__header {
     padding: var(--tls-drawer-padding) var(--tls-drawer-padding) 0;
   }
@@ -108,6 +122,8 @@
     flex: 1;
     padding: var(--spacing-4) var(--tls-drawer-padding);
     overflow-y: auto;
+    // Scrolling the drawer's content must not chain into scrolling the page behind it.
+    overscroll-behavior: contain;
   }
 
   &__footer {

package/themes/thalassic/components/index.scss

@@ -41,7 +41,9 @@
 @forward 'input-number';
 @forward 'pin-input';
 @forward 'popover';
+@forward 'progress';
 @forward 'radio-button';
+@forward 'rating';
 @forward 'rich-text-editor';
 @forward 'skeleton';
 @forward 'slider';
@@ -49,3 +51,4 @@
 @forward 'table';
 @forward 'toggle-button';
 @forward 'toggle-group';
+@forward 'virtual-scroll';