@thalassic/themes 22.8.0 → 22.10.0

package/package.json

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

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

@@ -0,0 +1,84 @@
+@use '../../mixins' as mixins;
+
+.tls-autocomplete__panel {
+  --tls-autocomplete-panel-max-height: 240px;
+  --tls-autocomplete-panel-padding-block: var(--spacing-1);
+  --tls-autocomplete-panel-background: var(--color-surface-container-lowest);
+  --tls-autocomplete-panel-border-radius: var(--radius-md);
+  --tls-autocomplete-panel-border: 1px solid var(--color-outline-variant);
+  --tls-autocomplete-panel-shadow: var(--shadow-sm);
+
+  width: 100%;
+  max-height: var(--tls-autocomplete-panel-max-height);
+
+  margin: 0;
+  padding: var(--tls-autocomplete-panel-padding-block) 0;
+
+  background-color: var(--tls-autocomplete-panel-background);
+  border: var(--tls-autocomplete-panel-border);
+  border-radius: var(--tls-autocomplete-panel-border-radius);
+  box-shadow: var(--tls-autocomplete-panel-shadow);
+
+  overflow-y: auto;
+  list-style: none;
+
+  @include mixins.panel-open;
+}
+
+.tls-autocomplete__option {
+  --tls-autocomplete-option-color: var(--color-on-surface);
+  --tls-autocomplete-option-background: transparent;
+  --tls-autocomplete-option-padding-block: var(--spacing-2);
+  --tls-autocomplete-option-padding-inline: var(--spacing-3);
+
+  &.tls-autocomplete__option--active {
+    --tls-autocomplete-option-background: var(--color-surface-variant);
+  }
+
+  &.tls-autocomplete__option--selected {
+    --tls-autocomplete-option-color: var(--color-primary);
+  }
+
+  &.tls-autocomplete__option--disabled .tls-autocomplete__option-button {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .tls-autocomplete__option-button {
+    width: 100%;
+    padding-block: var(--tls-autocomplete-option-padding-block);
+    padding-inline: var(--tls-autocomplete-option-padding-inline);
+
+    display: flex;
+    align-items: center;
+
+    appearance: none;
+    cursor: pointer;
+    text-align: start;
+
+    color: var(--tls-autocomplete-option-color);
+    background: var(--tls-autocomplete-option-background);
+    border: none;
+
+    font-size: var(--font-body-medium-size);
+    font-weight: var(--font-body-medium-weight);
+    line-height: var(--font-body-medium-line-height);
+    letter-spacing: var(--font-body-medium-letter-spacing);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
+
+.tls-autocomplete__empty {
+  padding-block: var(--spacing-2);
+  padding-inline: var(--spacing-3);
+
+  color: var(--color-outline);
+
+  font-size: var(--font-body-medium-size);
+  font-weight: var(--font-body-medium-weight);
+  line-height: var(--font-body-medium-line-height);
+  letter-spacing: var(--font-body-medium-letter-spacing);
+}

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

@@ -0,0 +1,13 @@
+.tls-autocomplete {
+  &.tls-form-control--sm {
+    --tls-autocomplete-clear-size: 0.875rem;
+  }
+
+  &.tls-form-control--md {
+    --tls-autocomplete-clear-size: 1rem;
+  }
+
+  &.tls-form-control--lg {
+    --tls-autocomplete-clear-size: 1.125rem;
+  }
+}

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

@@ -0,0 +1,99 @@
+@use '../../mixins' as mixins;
+
+.tls-autocomplete {
+  --tls-autocomplete-width: 200px;
+
+  position: relative;
+  display: inline-block;
+
+  &.tls-form-control {
+    --tls-form-control-width: var(--tls-autocomplete-width);
+
+    display: inline-flex;
+    align-items: stretch;
+    padding-inline: 0;
+
+    &.tls-form-control--fluid {
+      --tls-form-control-width: 100%;
+    }
+
+    &.tls-form-control--disabled {
+      cursor: not-allowed;
+    }
+
+    &:focus-within {
+      border: var(--tls-form-control-border-width) solid var(--color-primary);
+      box-shadow: 0 0 3px -1px var(--color-primary);
+    }
+
+    &.tls-form-control--show-error:not(.tls-form-control--disabled) .tls-autocomplete__trigger::placeholder {
+      color: var(--color-danger);
+    }
+
+    .tls-autocomplete__trigger {
+      flex: 1;
+      min-width: 0;
+
+      padding-inline: var(--tls-form-control-padding-inline);
+
+      appearance: none;
+      background: transparent;
+      border: none;
+      outline: none;
+
+      color: inherit;
+      font: inherit;
+      letter-spacing: inherit;
+
+      &::placeholder {
+        color: var(--color-outline);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    // Reserve room at the trailing edge for the clear button or spinner.
+    &:has(.tls-autocomplete__clear) .tls-autocomplete__trigger,
+    &.tls-form-control--pending .tls-autocomplete__trigger {
+      padding-inline-end: calc(
+        var(--tls-form-control-padding-inline) * 2 + var(--tls-autocomplete-clear-size)
+      );
+    }
+
+    .tls-autocomplete__spinner {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-end: var(--tls-form-control-padding-inline);
+
+      margin-block: auto;
+
+      pointer-events: none;
+    }
+
+    .tls-autocomplete__clear {
+      position: absolute;
+      top: 50%;
+      inset-inline-end: var(--tls-form-control-padding-inline);
+
+      display: flex;
+      align-items: center;
+
+      color: var(--color-outline);
+
+      transform: translateY(-50%);
+
+      @include mixins.touch-target(var(--tls-autocomplete-clear-size));
+
+      &:hover {
+        color: var(--color-on-surface);
+      }
+
+      .tls-autocomplete__clear-icon {
+        width: var(--tls-autocomplete-clear-size);
+        height: var(--tls-autocomplete-clear-size);
+      }
+    }
+  }
+}

package/themes/thalassic/components/autocomplete/_index.scss

@@ -0,0 +1,3 @@
+@forward 'autocomplete';
+@forward 'autocomplete-panel';
+@forward 'autocomplete-size';

package/themes/thalassic/components/badge/_badge.scss

@@ -63,4 +63,11 @@
   &--inset &__indicator {
     --tls-badge-offset: 0px;
   }
+
+  &--bordered &__indicator {
+    --tls-badge-border-width: 2px;
+    --tls-badge-border-color: var(--color-surface);
+
+    box-shadow: 0 0 0 var(--tls-badge-border-width) var(--tls-badge-border-color);
+  }
 }

package/themes/thalassic/components/breadcrumbs/_breadcrumbs.scss

@@ -0,0 +1,92 @@
+@use '../../mixins' as mixins;
+
+.tls-breadcrumbs {
+  --tls-breadcrumbs-gap: var(--spacing-2);
+  --tls-breadcrumbs-color: var(--color-secondary);
+  --tls-breadcrumbs-current-color: var(--color-on-surface);
+  --tls-breadcrumbs-link-height: 24px;
+  --tls-breadcrumbs-icon-size: 16px;
+  --tls-breadcrumbs-separator-size: 14px;
+
+  display: block;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    // The links' touch-target expansion overflows 10px past each edge; wrapped
+    // rows need a cross-axis gap of at least that overflow (see _touch-target.scss).
+    row-gap: var(--spacing-3);
+    column-gap: var(--tls-breadcrumbs-gap);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: var(--tls-breadcrumbs-gap);
+  }
+
+  &__link {
+    position: relative;
+
+    height: var(--tls-breadcrumbs-link-height);
+
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1);
+
+    text-decoration: none;
+    color: var(--tls-breadcrumbs-color);
+
+    cursor: pointer;
+
+    @include mixins.touch-target(var(--tls-breadcrumbs-link-height));
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &[aria-current='page'] {
+      color: var(--tls-breadcrumbs-current-color);
+    }
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-1);
+
+    color: var(--tls-breadcrumbs-color);
+
+    &[aria-current='page'] {
+      color: var(--tls-breadcrumbs-current-color);
+    }
+  }
+
+  &__item-icon {
+    width: var(--tls-breadcrumbs-icon-size);
+    height: var(--tls-breadcrumbs-icon-size);
+  }
+
+  &__separator {
+    width: var(--tls-breadcrumbs-separator-size);
+    height: var(--tls-breadcrumbs-separator-size);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-breadcrumbs-color);
+
+    .tls-icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    // A directional separator glyph (chevron) must point toward the next item,
+    // which is the opposite physical direction in RTL.
+    :root[dir='rtl'] & {
+      transform: scaleX(-1);
+    }
+  }
+}

package/themes/thalassic/components/breadcrumbs/_index.scss

@@ -0,0 +1 @@
+@forward 'breadcrumbs';

package/themes/thalassic/components/button/_button-color.scss

@@ -2,7 +2,6 @@
 
 .tls-button {
   @include mixins.color-variants('tls-button', $tonal: true);
-  @include mixins.tonal-swap('tls-button');
 
   &.tls-button--disabled {
     --tls-button-on-color: var(--color-on-surface-variant);

package/themes/thalassic/components/button/_button-variant.scss

@@ -1,137 +1,35 @@
-.tls-button {
-  @mixin hover-focus-state {
-    &:not(.tls-button--disabled):hover,
-    &:not(.tls-button--disabled):focus-visible {
-      @content;
-    }
-  }
+@use '../../mixins' as mixins;
 
-  @mixin active-state {
-    &:not(.tls-button--disabled):active {
-      @content;
-    }
+.tls-button {
+  // Variants
+  &--filled {
+    @include mixins.variant-treatment(filled, 'tls-button');
   }
 
-  // Variants
-  &--filled,
   &--tonal {
-    color: var(--tls-button-on-color);
-
-    &::before {
-      background-color: var(--tls-button-color);
-    }
-
-    @include hover-focus-state {
-      &::before {
-        opacity: 0.85;
-      }
-    }
-
-    @include active-state {
-      &::before {
-        opacity: 0.75;
-      }
-    }
+    @include mixins.variant-treatment(tonal, 'tls-button');
   }
 
   &--outlined {
-    color: var(--tls-button-color);
-
-    &::before {
-      background-color: var(--tls-button-color);
-
-      opacity: 0;
-    }
-
-    &::after {
-      border: var(--tls-button-border-width) solid var(--tls-button-color);
-
-      transition: border-color var(--motion-fast) var(--motion-ease-in-out);
-    }
-
-    @include hover-focus-state {
-      &::before {
-        opacity: 0.075;
-      }
-    }
-
-    @include active-state {
-      &::before {
-        opacity: 0.15;
-      }
-    }
+    @include mixins.variant-treatment(outlined, 'tls-button');
   }
 
   &--text {
-    color: var(--tls-button-color);
-
-    &::before {
-      background-color: var(--tls-button-color);
-
-      opacity: 0;
-    }
-
-    @include hover-focus-state {
-      &::before {
-        opacity: 0.075;
-      }
-    }
-
-    @include active-state {
-      &::before {
-        opacity: 0.15;
-      }
-    }
+    @include mixins.variant-treatment(text, 'tls-button');
   }
 
   &--elevated {
-    color: var(--tls-button-color);
-
-    transition: box-shadow var(--motion-fast) var(--motion-ease-in-out);
-
-    &::before {
-      background-color: var(--tls-button-color);
-
-      opacity: 0;
-    }
-
-    &::after {
-      box-shadow: var(--shadow-sm);
-    }
-
-    @include hover-focus-state {
-      &::before {
-        opacity: 0.075;
-      }
-    }
-
-    @include active-state {
-      &::before {
-        opacity: 0.15;
-      }
-
-      &::after {
-        box-shadow: var(--shadow-xs);
-      }
-    }
+    @include mixins.variant-treatment(elevated, 'tls-button');
   }
 
   &--disabled {
-    color: var(--tls-button-on-color);
-
-    cursor: not-allowed;
-
-    &::before {
-      opacity: 1;
+    border-color: var(--color-outline);
 
-      transition: none;
-    }
+    background-color: var(--tls-button-color);
+    box-shadow: none;
 
-    &::after {
-      border: var(--tls-button-border-width) solid var(--color-outline);
-      box-shadow: none;
+    color: var(--tls-button-on-color);
 
-      transition: none;
-    }
+    cursor: not-allowed;
   }
 }

package/themes/thalassic/components/button/_button.scss

@@ -7,48 +7,30 @@
   position: relative;
   z-index: 1;
 
+  box-sizing: border-box;
+
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
 
-  cursor: pointer;
-  user-select: none;
-
+  border: var(--tls-button-border-width) solid transparent;
   border-radius: var(--tls-button-border-radius);
+
   background-color: var(--color-surface);
 
-  transition: color var(--motion-fast) var(--motion-ease-in-out);
+  cursor: pointer;
+  user-select: none;
+
+  transition:
+    background-color var(--motion-fast) var(--motion-ease-in-out),
+    border-color var(--motion-fast) var(--motion-ease-in-out),
+    box-shadow var(--motion-fast) var(--motion-ease-in-out),
+    color var(--motion-fast) var(--motion-ease-in-out);
 
   &:focus-visible {
     @include mixins.focus-ring;
   }
 
-  &::before,
-  &::after {
-    content: '';
-    width: 100%;
-    height: 100%;
-
-    position: absolute;
-    z-index: -1;
-
-    border: var(--tls-button-border-width) solid var(--tls-button-color);
-    border-radius: var(--tls-button-border-radius);
-  }
-
-  &::before {
-    transition:
-      background-color var(--motion-fast) var(--motion-ease-in-out),
-      opacity var(--motion-fast) var(--motion-ease-in-out);
-  }
-
-  &::after {
-    border: none;
-    border-radius: var(--tls-button-border-radius);
-
-    transition:
-      border-color var(--motion-fast) var(--motion-ease-in-out),
-      box-shadow var(--motion-fast) var(--motion-ease-in-out);
-  }
+  @include mixins.touch-target(var(--tls-button-height));
 }

package/themes/thalassic/components/chip/_chip-control.scss

@@ -2,7 +2,11 @@
 
 .tls-chip {
   &.tls-chip--control {
+    position: relative;
+
     cursor: pointer;
+
+    @include mixins.touch-target(var(--tls-chip-height));
   }
 
   &.tls-chip--checked {

package/themes/thalassic/components/form-control-group/_form-control-addon.scss

@@ -1,6 +1,9 @@
 @use '../../mixins' as mixins;
 
 .tls-form-control-addon {
+  // Addons are secondary to the control's value (icons, unit labels, toggles).
+  color: var(--color-on-surface-variant);
+
   &:focus-visible {
     @include mixins.focus-ring;
     border-radius: var(--radius-md);

package/themes/thalassic/components/index.scss

@@ -1,5 +1,7 @@
 @forward 'alert';
+@forward 'autocomplete';
 @forward 'badge';
+@forward 'breadcrumbs';
 @forward 'button';
 @forward 'calendar';
 @forward 'chart';
@@ -7,6 +9,7 @@
 @forward 'date-time-picker';
 @forward 'dialog';
 @forward 'drawer';
+@forward 'kbd';
 @forward 'loader';
 @forward 'pagination';
 @forward 'multi-select';
@@ -39,4 +42,5 @@
 @forward 'skeleton';
 @forward 'splitter';
 @forward 'table';
+@forward 'toggle-button';
 @forward 'toggle-group';

package/themes/thalassic/components/kbd/_index.scss

@@ -0,0 +1,2 @@
+@forward "kbd";
+@forward "kbd-size";

package/themes/thalassic/components/kbd/_kbd-size.scss

@@ -0,0 +1,19 @@
+.tls-kbd {
+  &.tls-kbd--sm {
+    --tls-kbd-size: 20px;
+    --tls-kbd-padding-inline: var(--spacing-1);
+    --tls-kbd-font-size: var(--font-label-small-size);
+  }
+
+  &.tls-kbd--md {
+    --tls-kbd-size: 24px;
+    --tls-kbd-padding-inline: var(--spacing-1);
+    --tls-kbd-font-size: var(--font-label-small-size);
+  }
+
+  &.tls-kbd--lg {
+    --tls-kbd-size: 28px;
+    --tls-kbd-padding-inline: var(--spacing-2);
+    --tls-kbd-font-size: var(--font-label-medium-size);
+  }
+}

package/themes/thalassic/components/kbd/_kbd.scss

@@ -0,0 +1,24 @@
+.tls-kbd {
+  min-width: var(--tls-kbd-size);
+  height: var(--tls-kbd-size);
+
+  padding-inline: var(--tls-kbd-padding-inline);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid var(--color-outline-variant);
+  border-radius: var(--radius-sm);
+
+  background-color: var(--color-surface-container-low);
+  box-shadow: 0 1px 0 var(--color-outline-variant);
+
+  font-family: var(--font-family-mono);
+  font-size: var(--tls-kbd-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  text-box: trim-both cap alphabetic;
+  white-space: nowrap;
+  color: var(--color-on-surface-variant);
+}

package/themes/thalassic/components/multi-select/_multi-select.scss

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 .tls-multi-select {
   --tls-multi-select-width: 200px;
   --tls-multi-select-gap: var(--spacing-2);
@@ -97,6 +99,8 @@
 
       transform: translateY(-50%);
 
+      @include mixins.touch-target(var(--tls-multi-select-clear-size));
+
       &:hover {
         color: var(--color-on-surface);
       }

package/themes/thalassic/components/pagination/_pagination.scss

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 .tls-pagination {
   --tls-pagination-gap: 16px;
   --tls-pagination-color: var(--color-secondary);
@@ -18,6 +20,8 @@
   }
 
   &__button {
+    position: relative;
+
     height: var(--tls-pagination-button-height);
     padding-inline: var(--tls-pagination-button-padding-inline);
 
@@ -31,6 +35,8 @@
 
     cursor: pointer;
 
+    @include mixins.touch-target(var(--tls-pagination-button-height));
+
     &:hover {
       outline: var(--tls-pagination-hover-outline);
     }
@@ -58,6 +64,8 @@
   }
 
   &__item-button {
+    position: relative;
+
     width: var(--tls-pagination-item-size);
     height: var(--tls-pagination-item-size);
 
@@ -72,6 +80,8 @@
 
     cursor: pointer;
 
+    @include mixins.touch-target(var(--tls-pagination-item-size));
+
     &:hover {
       outline: var(--tls-pagination-hover-outline);
     }

package/themes/thalassic/components/select/_select.scss

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 .tls-select {
   --tls-select-width: 200px;
   --tls-select-gap: var(--spacing-2);
@@ -105,6 +107,8 @@
 
       transform: translateY(-50%);
 
+      @include mixins.touch-target(var(--tls-select-clear-size));
+
       &:hover {
         color: var(--color-on-surface);
       }

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

@@ -16,6 +16,8 @@
   --tls-switch-handle-color: var(--color-surface);
   --tls-switch-border-color: var(--tls-switch-track-color);
 
+  position: relative;
+
   width: var(--tls-switch-width);
   height: var(--tls-switch-height);
 
@@ -38,6 +40,8 @@
     @include mixins.focus-ring;
   }
 
+  @include mixins.touch-target(var(--tls-switch-height));
+
   .tls-switch-input {
     display: none;
   }

package/themes/thalassic/components/toggle-button/_index.scss

@@ -0,0 +1,5 @@
+@forward 'toggle-button';
+@forward 'toggle-button-color';
+@forward 'toggle-button-variant';
+@forward 'toggle-button-size';
+@forward 'toggle-button-checked';

package/themes/thalassic/components/toggle-button/_toggle-button-checked.scss

@@ -0,0 +1,44 @@
+@use '../../mixins' as mixins;
+
+.tls-toggle-button {
+  // Pressed appearance: defaults to the filled treatment of the base hue, so a
+  // toggle is visually distinct out of the box even without checked overrides.
+  &--checked {
+    border-color: var(--tls-toggle-button-color);
+
+    @include mixins.variant-treatment(filled, 'tls-toggle-button');
+  }
+
+  // Re-points the shared token pair while pressed (--checked-<color> classes),
+  // emitted after the base color classes so the pressed hue wins the cascade.
+  @include mixins.color-variants('tls-toggle-button', $tonal: true, $modifier: 'checked-');
+
+  // Pressed-variant overrides (doubled class beats the default checked rule and,
+  // in the hover states, its hover rules). The explicit border/background resets
+  // undo the default checked fill for the treatments that don't set them.
+  &--checked.tls-toggle-button--checked-filled {
+    border-color: var(--tls-toggle-button-color);
+
+    @include mixins.variant-treatment(filled, 'tls-toggle-button');
+  }
+
+  &--checked.tls-toggle-button--checked-tonal {
+    border-color: transparent;
+
+    @include mixins.variant-treatment(tonal, 'tls-toggle-button');
+  }
+
+  &--checked.tls-toggle-button--checked-outlined {
+    background-color: transparent;
+
+    @include mixins.variant-treatment(outlined, 'tls-toggle-button');
+  }
+
+  &--checked.tls-toggle-button--checked-text {
+    border-color: transparent;
+
+    background-color: transparent;
+
+    @include mixins.variant-treatment(text, 'tls-toggle-button');
+  }
+}

package/themes/thalassic/components/toggle-button/_toggle-button-color.scss

@@ -0,0 +1,9 @@
+// No tonal-swap here: the checked state is a second, independently styled variant
+// layer, so each variant reads its token pair directly (see _toggle-button-variant.scss
+// and _toggle-button-checked.scss) to keep the base treatment from leaking across
+// the checked boundary.
+@use '../../mixins' as mixins;
+
+.tls-toggle-button {
+  @include mixins.color-variants('tls-toggle-button', $tonal: true);
+}

package/themes/thalassic/components/toggle-button/_toggle-button-size.scss

@@ -0,0 +1,31 @@
+.tls-toggle-button {
+  &--sm {
+    --tls-toggle-button-height: var(--control-height-sm);
+    --tls-toggle-button-padding-inline: var(--spacing-3);
+
+    font-size: var(--font-label-small-size);
+    font-weight: var(--font-label-small-weight);
+    line-height: var(--font-label-small-line-height);
+    letter-spacing: var(--font-label-small-letter-spacing);
+  }
+
+  &--md {
+    --tls-toggle-button-height: var(--control-height-md);
+    --tls-toggle-button-padding-inline: var(--spacing-4);
+
+    font-size: var(--font-label-medium-size);
+    font-weight: var(--font-label-medium-weight);
+    line-height: var(--font-label-medium-line-height);
+    letter-spacing: var(--font-label-medium-letter-spacing);
+  }
+
+  &--lg {
+    --tls-toggle-button-height: var(--control-height-lg);
+    --tls-toggle-button-padding-inline: var(--spacing-5);
+
+    font-size: var(--font-label-large-size);
+    font-weight: var(--font-label-large-weight);
+    line-height: var(--font-label-large-line-height);
+    letter-spacing: var(--font-label-large-letter-spacing);
+  }
+}

package/themes/thalassic/components/toggle-button/_toggle-button-variant.scss

@@ -0,0 +1,21 @@
+@use '../../mixins' as mixins;
+
+.tls-toggle-button {
+  // Resting (unpressed) appearance. Each variant is gated off the checked state so
+  // the pressed appearance is owned entirely by the checked rules.
+  &--filled:not(.tls-toggle-button--checked) {
+    @include mixins.variant-treatment(filled, 'tls-toggle-button');
+  }
+
+  &--tonal:not(.tls-toggle-button--checked) {
+    @include mixins.variant-treatment(tonal, 'tls-toggle-button');
+  }
+
+  &--outlined:not(.tls-toggle-button--checked) {
+    @include mixins.variant-treatment(outlined, 'tls-toggle-button');
+  }
+
+  &--text:not(.tls-toggle-button--checked) {
+    @include mixins.variant-treatment(text, 'tls-toggle-button');
+  }
+}

package/themes/thalassic/components/toggle-button/_toggle-button.scss

@@ -0,0 +1,79 @@
+@use '../../mixins' as mixins;
+
+.tls-toggle-button {
+  --tls-toggle-button-border-width: 1px;
+  --tls-toggle-button-border-radius: var(--radius-sm);
+
+  position: relative;
+
+  height: var(--tls-toggle-button-height);
+
+  padding-inline: var(--tls-toggle-button-padding-inline);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  border: var(--tls-toggle-button-border-width) solid transparent;
+  border-radius: var(--tls-toggle-button-border-radius);
+
+  background-color: transparent;
+
+  cursor: pointer;
+  user-select: none;
+
+  @include mixins.motion(essential) {
+    transition:
+      background-color var(--motion-fast) var(--motion-ease-in-out),
+      border-color var(--motion-fast) var(--motion-ease-in-out),
+      color var(--motion-fast) var(--motion-ease-in-out);
+  }
+
+  @include mixins.touch-target(var(--tls-toggle-button-height));
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+
+  // Static-width label stack: both state labels share one grid cell, so the cell
+  // (and the button) always sizes to the wider label; the inactive label stays
+  // invisible but keeps reserving that width.
+  &__labels {
+    display: inline-grid;
+    justify-items: center;
+  }
+
+  &__label {
+    grid-area: 1 / 1;
+
+    &--hidden {
+      visibility: hidden;
+    }
+  }
+
+  &--icon-only {
+    aspect-ratio: 1 / 1;
+
+    padding-inline: 0;
+  }
+
+  &--fluid {
+    width: 100%;
+
+    display: flex;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+
+    cursor: not-allowed;
+  }
+
+  &--readonly {
+    cursor: default;
+  }
+
+  &:not(.tls-toggle-button--disabled).tls-toggle-button--show-error {
+    border-color: var(--color-danger);
+  }
+}

package/themes/thalassic/mixins/_index.scss

@@ -2,3 +2,5 @@
 @forward 'focus-ring';
 @forward 'motion';
 @forward 'panel-open';
+@forward 'touch-target';
+@forward 'variant-treatment';

package/themes/thalassic/mixins/_touch-target.scss

@@ -0,0 +1,30 @@
+// Expands a control's tap target to the accessible minimum (`--control-touch-target`,
+// 44px) on touch devices, without changing its visual size or disturbing layout. A
+// transparent `::after` overflows the control up to the target size and captures the
+// taps; the control must therefore establish a positioning context (`position:
+// relative`) and leave its `::after` free.
+//
+// `$height` is the control's rendered size (e.g. `var(--tls-button-height)`); the
+// overflow is symmetric and `min(0px, …)` never shrinks a control already at or above
+// the target.
+//
+// Gated on a coarse pointer and on the app-level opt-out reflected onto `:root`
+// (`data-touch-targets='off'`). Absent that attribute the expansion is active — touch
+// targets are accessible by default; disabling is opt-in through the UI config.
+//
+// Spacing constraint: the overflow reaches (`--control-touch-target` − visual size) / 2
+// beyond each edge. Adjacent expandable controls must be separated by at least that much
+// (a `gap`/`margin` ≥ the per-edge overflow) or their hit areas overlap; where they do,
+// the later-in-DOM control wins the overlap (equal `z-index` falls back to paint order),
+// stealing taps from its neighbour's edge. This mirrors the WCAG pairing of target size
+// with target spacing — space clustered controls rather than packing them tight.
+@mixin touch-target($height) {
+  @media (pointer: coarse) {
+    :root:not([data-touch-targets='off']) &::after {
+      content: '';
+
+      position: absolute;
+      inset: min(0px, calc((#{$height} - var(--control-touch-target)) / 2));
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+// Appearance of a button-like control's variant treatment (filled / tonal /
+// outlined / text / elevated), shared across controls (tls-button,
+// tls-toggle-button). Maps the treatment onto the block's color token pair
+// (see color-variants) and emits the hover / focus-visible / active feedback
+// states, gated off the block's `--disabled` modifier.
+//
+// Emits declarations only — include it under the selector that scopes the
+// treatment (a variant class, a pressed-state layer, …). The tonal treatment
+// reads the container pair directly rather than relying on tonal-swap, so it
+// is safe for blocks with a second variant layer.
+
+@mixin _hover-focus-state($block) {
+  &:not(.#{$block}--disabled):hover,
+  &:not(.#{$block}--disabled):focus-visible {
+    @content;
+  }
+}
+
+@mixin _active-state($block) {
+  &:not(.#{$block}--disabled):active {
+    @content;
+  }
+}
+
+@mixin variant-treatment($treatment, $block) {
+  @if $treatment == filled {
+    background-color: var(--#{$block}-color);
+
+    color: var(--#{$block}-on-color);
+
+    @include _hover-focus-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 85%, var(--color-surface));
+    }
+
+    @include _active-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 75%, var(--color-surface));
+    }
+  } @else if $treatment == tonal {
+    background-color: var(--#{$block}-color-container);
+
+    color: var(--#{$block}-on-color-container);
+
+    @include _hover-focus-state($block) {
+      background-color: color-mix(
+        in srgb,
+        var(--#{$block}-color-container) 85%,
+        var(--color-surface)
+      );
+    }
+
+    @include _active-state($block) {
+      background-color: color-mix(
+        in srgb,
+        var(--#{$block}-color-container) 75%,
+        var(--color-surface)
+      );
+    }
+  } @else if $treatment == outlined {
+    border-color: var(--#{$block}-color);
+
+    color: var(--#{$block}-color);
+
+    @include _hover-focus-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, var(--color-surface));
+    }
+
+    @include _active-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, var(--color-surface));
+    }
+  } @else if $treatment == text {
+    color: var(--#{$block}-color);
+
+    @include _hover-focus-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, var(--color-surface));
+    }
+
+    @include _active-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, var(--color-surface));
+    }
+  } @else if $treatment == elevated {
+    box-shadow: var(--shadow-sm);
+
+    color: var(--#{$block}-color);
+
+    @include _hover-focus-state($block) {
+      background-color: color-mix(in srgb, var(--#{$block}-color) 7.5%, var(--color-surface));
+    }
+
+    @include _active-state($block) {
+      box-shadow: var(--shadow-xs);
+
+      background-color: color-mix(in srgb, var(--#{$block}-color) 15%, var(--color-surface));
+    }
+  } @else {
+    @error "Unknown variant treatment `#{$treatment}`.";
+  }
+}

package/themes/thalassic/semantic/_control.scss

@@ -3,6 +3,9 @@
   --control-height-md: 36px;
   --control-height-lg: 44px;
 
+  // Minimum comfortable tap target on touch devices (Apple HIG; WCAG 2.5.5 Enhanced).
+  --control-touch-target: 44px;
+
   --control-focus-ring-width: 2px;
   --control-focus-ring-offset: 2px;
   --control-focus-ring-color: var(--color-primary);