@thalassic/themes 22.13.0 → 22.14.0

package/package.json

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

package/themes/thalassic/components/_password.scss

@@ -1,12 +1,28 @@
+@use '../mixins' as mixins;
+
 .tls-password {
   // The layout/border now lives on the inner tls-form-control-group; the host is
   // transparent so size/fluid set on the group resolve against the password's parent.
   display: contents;
 
   .tls-password-toggle {
+    position: relative;
+
+    align-self: stretch;
     display: grid;
     align-items: center;
 
+    // Follow the group's resolved size, so an sm/lg field scales the toggle
+    // label alongside the input text. Custom properties inherit from the group.
+    font-size: var(--tls-form-control-group-font-size);
+    font-weight: var(--tls-form-control-group-font-weight);
+    line-height: var(--tls-form-control-group-line-height);
+    letter-spacing: var(--tls-form-control-group-letter-spacing);
+
+    // `align-self: stretch` already makes the full field height clickable; this
+    // covers the remaining vertical gap to the 44px minimum on touch devices.
+    @include mixins.touch-target(var(--tls-form-control-group-height));
+
     &__item {
       grid-area: 1 / 1;
 

package/themes/thalassic/components/switch/_switch.scss

@@ -36,14 +36,29 @@
     box-shadow var(--motion-fast) var(--motion-ease-in-out),
     filter var(--motion-fast) var(--motion-ease-in-out);
 
-  &:focus-visible {
+  // The invisible native input carries focus; the ring renders on the track.
+  &:has(.tls-switch-input:focus-visible) {
     @include mixins.focus-ring;
   }
 
   @include mixins.touch-target(var(--tls-switch-height));
 
+  // The real control: stretched invisibly over the track so it stays focusable
+  // and clickable while the styled track/handle underneath provide the visuals.
   .tls-switch-input {
-    display: none;
+    position: absolute;
+    inset: 0;
+
+    width: 100%;
+    height: 100%;
+
+    margin: 0;
+
+    appearance: none;
+
+    opacity: 0;
+
+    cursor: inherit;
   }
 
   .tls-switch-handle {
@@ -58,6 +73,9 @@
 
     box-shadow: var(--shadow-xs);
 
+    // Clicks fall through to the stretched native input underneath.
+    pointer-events: none;
+
     transition: transform var(--motion-fast) var(--motion-ease-in-out);
   }
 

package/themes/thalassic/components/tab-header/_tab-header-variant.scss

@@ -87,6 +87,14 @@
     --tls-tab-header-padding: var(--spacing-2);
     --tls-tab-header-active-label-color: var(--color-on-surface);
 
+    // On dark surfaces elevation reads through a lighter fill, not shadow: the
+    // pill's shadow is invisible there and `--color-surface` sits *below* the
+    // track's container color, so raise the pill above the track (and above the
+    // inactive hover's container-high) instead.
+    .tls-dark & {
+      --tls-tab-header-pill-background-color: var(--color-surface-container-highest);
+    }
+
     padding: var(--tls-tab-header-padding);
     gap: var(--tls-tab-header-padding);
 

package/themes/thalassic/mixins/_variant-treatment.scss

@@ -58,24 +58,32 @@
   } @else if $treatment == outlined {
     border-color: var(--#{$block}-color);
 
+    // Transparent at rest so the control sits on any backdrop (a tinted card,
+    // a striped row); interaction paints a translucent state layer over it.
+    background-color: transparent;
+
     color: var(--#{$block}-color);
 
     @include _hover-focus-state($block) {
-      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, var(--color-surface));
+      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, transparent);
     }
 
     @include _active-state($block) {
-      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, var(--color-surface));
+      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, transparent);
     }
   } @else if $treatment == text {
+    // Transparent at rest so the control sits on any backdrop (a tinted card,
+    // a striped row); interaction paints a translucent state layer over it.
+    background-color: transparent;
+
     color: var(--#{$block}-color);
 
     @include _hover-focus-state($block) {
-      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, var(--color-surface));
+      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, transparent);
     }
 
     @include _active-state($block) {
-      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, var(--color-surface));
+      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, transparent);
     }
   } @else if $treatment == elevated {
     box-shadow: var(--shadow-sm);