@thalassic/themes 0.8.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/themes/thalassic/components/_chip-input.scss

@@ -0,0 +1,65 @@
+tls-chip-input.tls-form-control {
+  --tls-chip-input-width: 16rem;
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+
+  width: var(--tls-chip-input-width);
+  height: auto;
+  min-height: var(--tls-form-control-height);
+  padding-inline: var(--tls-form-control-padding-inline);
+  padding-block: var(--spacing-1);
+
+  &.tls-form-control--fluid {
+    --tls-chip-input-width: 100%;
+  }
+
+  &:has(.tls-chip-input__field:focus) {
+    border-color: var(--color-primary);
+
+    box-shadow: 0 0 3px -1px var(--color-primary);
+  }
+
+  .tls-chip-input__field {
+    flex: 1 1 auto;
+    min-width: 4rem;
+
+    padding: 0;
+
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+
+    &::placeholder {
+      color: var(--color-outline);
+    }
+  }
+
+  &:not(.tls-form-control--disabled).tls-form-control--touched.tls-form-control--invalid {
+    .tls-chip-input__field::placeholder {
+      color: var(--color-danger);
+    }
+  }
+
+  .tls-chip-input__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 0;
+
+    border: none;
+    background: none;
+    color: inherit;
+    line-height: 1;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}

package/themes/thalassic/components/_file-uploader.scss

@@ -0,0 +1,147 @@
+@use '../mixins' as mixins;
+
+.tls-file-uploader {
+  --tls-file-uploader-border-color: var(--color-outline-variant);
+  --tls-file-uploader-border-radius: var(--radius-md);
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+
+  width: 18rem;
+
+  &--fluid {
+    width: 100%;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__drop-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding: var(--spacing-6);
+
+    border: 2px dashed var(--tls-file-uploader-border-color);
+    border-radius: var(--tls-file-uploader-border-radius);
+    color: var(--color-on-surface-variant);
+
+    cursor: pointer;
+    user-select: none;
+
+    transition:
+      border-color var(--motion-fast) var(--motion-ease-in-out),
+      background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &:hover:not(&--disabled),
+    &--dragging {
+      --tls-file-uploader-border-color: var(--color-primary);
+
+      background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+    }
+
+    &--rejected {
+      --tls-file-uploader-border-color: var(--color-danger);
+
+      color: var(--color-danger);
+      background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__label {
+    pointer-events: none;
+
+    font-size: var(--font-body-medium-size);
+    text-align: center;
+  }
+
+  &__hint {
+    pointer-events: none;
+
+    margin-top: var(--spacing-1);
+
+    font-size: var(--font-body-small-size);
+    text-align: center;
+    color: var(--color-on-surface-variant);
+  }
+
+  &__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+
+    margin: 0;
+    padding: 0;
+
+    list-style: none;
+  }
+
+  &__file {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+
+    padding: var(--spacing-1) var(--spacing-2);
+
+    border-radius: var(--radius-sm);
+    background-color: var(--color-surface-container);
+  }
+
+  &__file-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    font-size: var(--font-body-small-size);
+    color: var(--color-on-surface);
+  }
+
+  &__file-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    flex-shrink: 0;
+    padding: 0;
+
+    border: none;
+    background: none;
+    color: var(--color-on-surface-variant);
+    line-height: 1;
+    cursor: pointer;
+
+    transition: color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:not(:disabled):hover {
+      color: var(--color-danger);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &--disabled {
+    .tls-file-uploader__drop-zone {
+      pointer-events: none;
+    }
+  }
+
+  &:not(.tls-file-uploader--disabled).tls-file-uploader--touched.tls-file-uploader--invalid {
+    --tls-file-uploader-border-color: var(--color-danger);
+  }
+}

package/themes/thalassic/components/_menu.scss

@@ -0,0 +1,133 @@
+.tls-menu {
+  --tls-menu-min-width: 160px;
+  --tls-menu-padding-block: var(--spacing-1);
+
+  --tls-menu-border-radius: var(--radius-md);
+  --tls-menu-border-width: 1px;
+  --tls-menu-border-color: var(--color-outline-variant);
+
+  --tls-menu-background: var(--color-surface-container-lowest);
+  --tls-menu-shadow: var(--shadow-md);
+
+  --tls-menu-item-color: var(--color-on-surface);
+  --tls-menu-item-background: transparent;
+  --tls-menu-item-background-hover: var(--color-surface-container-low);
+  --tls-menu-item-padding-block: var(--spacing-2);
+  --tls-menu-item-padding-inline: var(--spacing-4);
+  --tls-menu-item-icon-size: 14px;
+
+  --tls-menu-label-color: var(--color-outline);
+  --tls-menu-label-padding-block: var(--spacing-2);
+  --tls-menu-label-padding-inline: var(--spacing-4);
+
+  --tls-menu-divider-color: var(--color-outline-variant);
+  --tls-menu-divider-margin-block: var(--spacing-1);
+
+  min-width: var(--tls-menu-min-width);
+  padding-block: var(--tls-menu-padding-block);
+
+  background-color: var(--tls-menu-background);
+
+  border: var(--tls-menu-border-width) solid var(--tls-menu-border-color);
+  border-radius: var(--tls-menu-border-radius);
+
+  box-shadow: var(--tls-menu-shadow);
+
+  overflow: hidden;
+
+  &__item {
+    width: 100%;
+    padding-block: var(--tls-menu-item-padding-block);
+    padding-inline: var(--tls-menu-item-padding-inline);
+
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+
+    appearance: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+
+    color: var(--tls-menu-item-color);
+    background-color: var(--tls-menu-item-background);
+
+    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);
+
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:hover:not(:disabled) {
+      background-color: var(--tls-menu-item-background-hover);
+    }
+
+    &:focus-visible {
+      outline: none;
+      background-color: var(--tls-menu-item-background-hover);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+
+    // compound selector beats .tls-icon's width/height: auto regardless of cascade order
+    &.tls-icon {
+      width: var(--tls-menu-item-icon-size);
+      height: var(--tls-menu-item-icon-size);
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__item-label {
+    flex: 1;
+  }
+
+  &__item-shortcut {
+    margin-inline-start: auto;
+    color: var(--tls-menu-label-color);
+
+    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);
+
+    font-family: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  &__label {
+    display: block;
+    padding-block: var(--tls-menu-label-padding-block);
+    padding-inline: var(--tls-menu-label-padding-inline);
+
+    color: var(--tls-menu-label-color);
+
+    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);
+
+    text-transform: uppercase;
+  }
+
+  &__divider {
+    margin-block: var(--tls-menu-divider-margin-block);
+    border: none;
+    border-top: 1px solid var(--tls-menu-divider-color);
+  }
+}

package/themes/thalassic/components/_password.scss

@@ -1,5 +1,7 @@
 .tls-password {
-  display: inline-flex;
+  // 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 {
     display: grid;
@@ -15,4 +17,4 @@
       }
     }
   }
-}
+}

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

@@ -0,0 +1,36 @@
+.tls-chip {
+  &.tls-chip--primary {
+    --tls-chip-color: var(--color-primary);
+    --tls-chip-on-color: var(--color-on-primary);
+  }
+
+  &.tls-chip--secondary {
+    --tls-chip-color: var(--color-secondary);
+    --tls-chip-on-color: var(--color-on-secondary);
+  }
+
+  &.tls-chip--tertiary {
+    --tls-chip-color: var(--color-tertiary);
+    --tls-chip-on-color: var(--color-on-tertiary);
+  }
+
+  &.tls-chip--success {
+    --tls-chip-color: var(--color-success);
+    --tls-chip-on-color: var(--color-on-success);
+  }
+
+  &.tls-chip--info {
+    --tls-chip-color: var(--color-info);
+    --tls-chip-on-color: var(--color-on-info);
+  }
+
+  &.tls-chip--warning {
+    --tls-chip-color: var(--color-warning);
+    --tls-chip-on-color: var(--color-on-warning);
+  }
+
+  &.tls-chip--danger {
+    --tls-chip-color: var(--color-danger);
+    --tls-chip-on-color: var(--color-on-danger);
+  }
+}

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

@@ -0,0 +1,51 @@
+.tls-chip {
+  &.tls-chip--control {
+    cursor: pointer;
+  }
+
+  &.tls-chip--checked {
+    background-color: var(--tls-chip-color);
+    color: var(--tls-chip-on-color);
+    border-color: var(--tls-chip-color);
+  }
+
+  &.tls-chip--checked-primary {
+    --tls-chip-color: var(--color-primary);
+    --tls-chip-on-color: var(--color-on-primary);
+  }
+
+  &.tls-chip--checked-secondary {
+    --tls-chip-color: var(--color-secondary);
+    --tls-chip-on-color: var(--color-on-secondary);
+  }
+
+  &.tls-chip--checked-tertiary {
+    --tls-chip-color: var(--color-tertiary);
+    --tls-chip-on-color: var(--color-on-tertiary);
+  }
+
+  &.tls-chip--checked-success {
+    --tls-chip-color: var(--color-success);
+    --tls-chip-on-color: var(--color-on-success);
+  }
+
+  &.tls-chip--checked-info {
+    --tls-chip-color: var(--color-info);
+    --tls-chip-on-color: var(--color-on-info);
+  }
+
+  &.tls-chip--checked-warning {
+    --tls-chip-color: var(--color-warning);
+    --tls-chip-on-color: var(--color-on-warning);
+  }
+
+  &.tls-chip--checked-danger {
+    --tls-chip-color: var(--color-danger);
+    --tls-chip-on-color: var(--color-on-danger);
+  }
+
+  &.tls-chip--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1,60 @@
+.tls-chip {
+  height: var(--tls-chip-height);
+  padding-inline: var(--tls-chip-padding-inline);
+
+  font-size: var(--tls-chip-font-size);
+  font-weight: var(--tls-chip-font-weight);
+  line-height: var(--tls-chip-line-height);
+  letter-spacing: var(--tls-chip-letter-spacing);
+
+  &.tls-chip--icon {
+    padding-inline: 0;
+    aspect-ratio: 1 / 1;
+
+    &.tls-chip--rounded {
+      --tls-chip-border-radius: 50%;
+    }
+  }
+
+  &.tls-chip--sm {
+    --tls-chip-height: 1.25rem;
+    --tls-chip-padding-inline: var(--spacing-2);
+
+    --tls-chip-font-size: var(--font-label-small-size);
+    --tls-chip-font-weight: var(--font-label-small-weight);
+    --tls-chip-line-height: var(--font-label-small-line-height);
+    --tls-chip-letter-spacing: var(--font-label-small-letter-spacing);
+
+    &.tls-chip--rounded {
+      --tls-chip-border-radius: var(--radius-xl);
+    }
+  }
+
+  &.tls-chip--md {
+    --tls-chip-height: 1.5rem;
+    --tls-chip-padding-inline: var(--spacing-3);
+
+    --tls-chip-font-size: var(--font-label-medium-size);
+    --tls-chip-font-weight: var(--font-label-medium-weight);
+    --tls-chip-line-height: var(--font-label-medium-line-height);
+    --tls-chip-letter-spacing: var(--font-label-medium-letter-spacing);
+
+    &.tls-chip--rounded {
+      --tls-chip-border-radius: var(--radius-2xl);
+    }
+  }
+
+  &.tls-chip--lg {
+    --tls-chip-height: 2rem;
+    --tls-chip-padding-inline: var(--spacing-4);
+
+    --tls-chip-font-size: var(--font-label-large-size);
+    --tls-chip-font-weight: var(--font-label-large-weight);
+    --tls-chip-line-height: var(--font-label-large-line-height);
+    --tls-chip-letter-spacing: var(--font-label-large-letter-spacing);
+
+    &.tls-chip--rounded {
+      --tls-chip-border-radius: var(--radius-3xl);
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+.tls-chip {
+  &.tls-chip--filled {
+    background-color: var(--tls-chip-color);
+    color: var(--tls-chip-on-color);
+  }
+
+  &.tls-chip--outlined {
+    background-color: transparent;
+    color: var(--tls-chip-color);
+    border: 1px solid var(--tls-chip-color);
+  }
+
+  &.tls-chip--text {
+    background-color: transparent;
+    color: var(--tls-chip-color);
+  }
+}

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

@@ -0,0 +1,10 @@
+.tls-chip {
+  --tls-chip-border-radius: var(--radius-sm);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+
+  border-radius: var(--tls-chip-border-radius);
+}

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

@@ -0,0 +1,5 @@
+@forward "chip";
+@forward "chip-color";
+@forward "chip-control";
+@forward "chip-size";
+@forward "chip-variant";

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

@@ -1,6 +1,3 @@
 @forward 'form-control';
-@forward 'form-control-addon';
-@forward 'form-control-group';
-@forward 'form-control-group-size';
 @forward 'form-control-size';
 @forward 'form-item';

package/themes/thalassic/components/{form → form-control-group}/_form-control-group-size.scss

@@ -3,7 +3,6 @@
 
   width: var(--tls-form-control-group-width);
   height: var(--tls-form-control-group-height);
-  padding-inline: var(--tls-form-control-group-padding-inline);
 
   font-size: var(--tls-form-control-group-font-size);
   font-weight: var(--tls-form-control-group-font-weight);

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

@@ -0,0 +1,103 @@
+.tls-form-control-group {
+  --tls-form-control-group-border-width: 1px;
+  --tls-form-control-group-border-style: solid;
+  --tls-form-control-group-border-color: var(--color-outline-variant);
+
+  display: inline-flex;
+  align-items: center;
+
+  border-radius: var(--radius-md);
+  border: var(--tls-form-control-group-border-width) var(--tls-form-control-group-border-style)
+    var(--tls-form-control-group-border-color);
+
+  transition:
+    border-color var(--motion-fast) var(--motion-ease-in-out),
+    background-color var(--motion-fast) var(--motion-ease-in-out),
+    box-shadow var(--motion-fast) var(--motion-ease-in-out);
+
+  &:hover {
+    --tls-form-control-group-border-color: var(--color-primary);
+  }
+
+  &:has(input.tls-form-control:focus),
+  &:has(.tls-select__trigger:focus) {
+    border: 1px solid var(--color-primary);
+    box-shadow: 0 0 3px -1px var(--color-primary);
+  }
+
+  // The wrapper component (e.g. tls-input) is the flex item, so it must stretch.
+  // It stays unpadded — the inline padding belongs on the value element inside.
+  > :not(.tls-form-control-addon) {
+    flex: 1 1 auto;
+    min-width: 0; // allow shrinking below intrinsic input width
+  }
+
+  // Visual reset for any control, leaf (<input>) or composite host (tls-select):
+  // the group owns the border/background, the control just fills the row.
+  .tls-form-control {
+    width: 100%;
+    flex-grow: 1;
+
+    border: none;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  // The group border is the single focus indicator — suppress each control's own
+  // focus border/shadow (base input :focus, select :focus-within) so it never doubles up.
+  input.tls-form-control:focus,
+  textarea.tls-form-control:focus,
+  .tls-select.tls-form-control:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+
+  // Inline padding lives on the element that actually renders the value, so the padded
+  // area is interactive (no dead zone) and never stacks with a neighbour:
+  //  - leaf controls: the <input>/<textarea> itself
+  //  - tls-select: its inner trigger button (the host only wraps it)
+  // Pad the inline-start only; the trailing outer edge is added on the last child below.
+  input.tls-form-control,
+  textarea.tls-form-control,
+  .tls-select__trigger,
+  .tls-form-control-addon {
+    padding-block: 0;
+    padding-inline-start: var(--tls-form-control-group-padding-inline);
+    padding-inline-end: 0;
+  }
+
+  // Outer end edge: give exactly one end padding to the last child's value element.
+  > :last-child input.tls-form-control,
+  > :last-child textarea.tls-form-control,
+  > :last-child .tls-select__trigger,
+  > .tls-form-control-addon:last-child {
+    padding-inline-end: var(--tls-form-control-group-padding-inline);
+  }
+
+  // Form control
+  &.tls-form-control.tls-form-control--disabled,
+  &:has(.tls-form-control.tls-form-control.tls-form-control--disabled) {
+    --tls-form-control-group-border-color: var(--color-outline);
+    background-color: var(--color-surface-variant);
+
+    cursor: not-allowed;
+  }
+
+  &:not(
+      .tls-form-control--disabled
+    ).tls-form-control.tls-form-control--touched.tls-form-control--invalid,
+  &:has(
+    .tls-form-control:not(
+        .tls-form-control--disabled
+      ).tls-form-control.tls-form-control--touched.tls-form-control--invalid
+  ) {
+    --tls-form-control-group-border-color: var(--color-danger);
+
+    color: var(--color-danger);
+
+    .tls-form-control::placeholder,
+    .tls-form-control__placeholder {
+      color: var(--color-danger);
+    }
+  }
+}

package/themes/thalassic/components/form-control-group/_index.scss

@@ -0,0 +1,3 @@
+@forward 'form-control-addon';
+@forward 'form-control-group';
+@forward 'form-control-group-size';

package/themes/thalassic/components/index.scss

@@ -1,23 +1,30 @@
 @forward 'alert';
 @forward 'button';
 @forward 'chart';
+@forward 'chip';
 @forward 'date-time-picker';
 @forward 'dialog';
 @forward 'loader';
 @forward 'pagination';
 @forward 'select';
 @forward 'form';
+@forward 'form-control-group';
 @forward 'stepper';
 @forward 'switch';
 @forward 'tabs';
+@forward 'textarea';
 @forward 'tooltip';
 
 @forward 'checkbox';
+@forward 'chip-input';
+@forward 'file-uploader';
 @forward 'divider';
 @forward 'icon';
+@forward 'menu';
 @forward 'password';
 @forward 'pin-input';
 @forward 'popover';
 @forward 'radio-button';
 @forward 'skeleton';
 @forward 'table';
+@forward 'toggle-group';

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

@@ -0,0 +1,2 @@
+@forward 'textarea';
+@forward 'textarea-size';

package/themes/thalassic/components/textarea/_textarea-size.scss

@@ -0,0 +1,15 @@
+.tls-textarea {
+  .tls-form-control {
+    &.tls-form-control--sm {
+      --tls-textarea-padding-block: var(--spacing-1);
+    }
+
+    &.tls-form-control--md {
+      --tls-textarea-padding-block: var(--spacing-2);
+    }
+
+    &.tls-form-control--lg {
+      --tls-textarea-padding-block: var(--spacing-3);
+    }
+  }
+}

package/themes/thalassic/components/textarea/_textarea.scss

@@ -0,0 +1,7 @@
+.tls-textarea .tls-form-control {
+  height: auto;
+
+  padding-block: var(--tls-textarea-padding-block);
+
+  font-family: inherit;
+}

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

@@ -0,0 +1,3 @@
+@forward 'toggle-group';
+@forward 'toggle-group-color';
+@forward 'toggle-group-size';

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

@@ -0,0 +1,36 @@
+.tls-toggle-group {
+  &--primary {
+    --tls-toggle-group-color: var(--color-primary);
+    --tls-toggle-group-on-color: var(--color-on-primary);
+  }
+
+  &--secondary {
+    --tls-toggle-group-color: var(--color-secondary);
+    --tls-toggle-group-on-color: var(--color-on-secondary);
+  }
+
+  &--tertiary {
+    --tls-toggle-group-color: var(--color-tertiary);
+    --tls-toggle-group-on-color: var(--color-on-tertiary);
+  }
+
+  &--success {
+    --tls-toggle-group-color: var(--color-success);
+    --tls-toggle-group-on-color: var(--color-on-success);
+  }
+
+  &--info {
+    --tls-toggle-group-color: var(--color-info);
+    --tls-toggle-group-on-color: var(--color-on-info);
+  }
+
+  &--warning {
+    --tls-toggle-group-color: var(--color-warning);
+    --tls-toggle-group-on-color: var(--color-on-warning);
+  }
+
+  &--danger {
+    --tls-toggle-group-color: var(--color-danger);
+    --tls-toggle-group-on-color: var(--color-on-danger);
+  }
+}

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

@@ -0,0 +1,31 @@
+.tls-toggle-group {
+  &--sm {
+    --tls-toggle-group-option-height: var(--control-height-sm);
+    --tls-toggle-group-option-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-group-option-height: var(--control-height-md);
+    --tls-toggle-group-option-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-group-option-height: var(--control-height-lg);
+    --tls-toggle-group-option-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-group/_toggle-group.scss

@@ -0,0 +1,106 @@
+@use '../../mixins' as mixins;
+
+.tls-toggle-group {
+  --tls-toggle-group-border-width: 1px;
+  --tls-toggle-group-border-color: var(--color-outline-variant);
+  --tls-toggle-group-border-radius: var(--radius-sm);
+
+  display: inline-flex;
+  flex-direction: row;
+
+  border: var(--tls-toggle-group-border-width) solid var(--tls-toggle-group-border-color);
+  border-radius: var(--tls-toggle-group-border-radius);
+  overflow: hidden;
+
+  &--vertical {
+    flex-direction: column;
+
+    .tls-toggle-group__option:not(:first-child) {
+      border-top: var(--tls-toggle-group-border-width) solid var(--tls-toggle-group-border-color);
+      border-left: none;
+    }
+  }
+
+  &__option {
+    position: relative;
+    z-index: 1;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    height: var(--tls-toggle-group-option-height);
+    padding-inline: var(--tls-toggle-group-option-padding-inline);
+
+    border: none;
+    background: transparent;
+    color: var(--color-on-surface);
+
+    cursor: pointer;
+    user-select: none;
+
+    transition: color var(--motion-fast) var(--motion-ease-in-out);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+
+      background-color: var(--tls-toggle-group-color);
+      opacity: 0;
+
+      transition: opacity var(--motion-fast) var(--motion-ease-in-out);
+    }
+
+    &:not(:first-child) {
+      border-left: var(--tls-toggle-group-border-width) solid var(--tls-toggle-group-border-color);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &:not(.tls-toggle-group__option--disabled):not(:disabled):hover::before {
+      opacity: 0.075;
+    }
+
+    &:not(.tls-toggle-group__option--disabled):not(:disabled):active::before {
+      opacity: 0.15;
+    }
+
+    &--selected {
+      color: var(--tls-toggle-group-on-color);
+
+      &::before {
+        opacity: 1;
+      }
+
+      &:not(.tls-toggle-group__option--disabled):not(:disabled):hover::before {
+        opacity: 0.85;
+      }
+
+      &:not(.tls-toggle-group__option--disabled):not(:disabled):active::before {
+        opacity: 0.75;
+      }
+    }
+
+    &--disabled,
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &.tls-toggle-group--disabled {
+    cursor: not-allowed;
+
+    .tls-toggle-group__option {
+      pointer-events: none;
+    }
+  }
+
+  &:not(.tls-toggle-group--disabled).tls-toggle-group--touched.tls-toggle-group--invalid {
+    --tls-toggle-group-border-color: var(--color-danger);
+  }
+}

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

@@ -1,59 +0,0 @@
-.tls-form-control-group {
-  --tls-form-control-group-border-width: 1px;
-  --tls-form-control-group-border-style: solid;
-  --tls-form-control-group-border-color: var(--color-outline-variant);
-
-  border-radius: var(--radius-md);
-  border: var(--tls-form-control-group-border-width) var(--tls-form-control-group-border-style)
-    var(--tls-form-control-group-border-color);
-
-  transition:
-    border-color var(--motion-fast) var(--motion-ease-in-out),
-    background-color var(--motion-fast) var(--motion-ease-in-out),
-    box-shadow var(--motion-fast) var(--motion-ease-in-out);
-
-  &:hover {
-    --tls-form-control-group-border-color: var(--color-primary);
-  }
-
-  &:has(input.tls-form-control:focus) {
-    border: 1px solid var(--color-primary);
-    box-shadow: 0 0 3px -1px var(--color-primary);
-  }
-
-  .tls-form-control {
-    flex-grow: 1;
-    padding: 0;
-
-    border: none;
-    box-shadow: none;
-    background: transparent;
-  }
-
-  // Form control
-  &.tls-form-control.tls-form-control--disabled,
-  &:has(.tls-form-control.tls-form-control.tls-form-control--disabled) {
-    --tls-form-control-group-border-color: var(--color-outline);
-    background-color: var(--color-surface-variant);
-
-    cursor: not-allowed;
-  }
-
-  &:not(
-      .tls-form-control--disabled
-    ).tls-form-control.tls-form-control--touched.tls-form-control--invalid,
-  &:has(
-    .tls-form-control:not(
-        .tls-form-control--disabled
-      ).tls-form-control.tls-form-control--touched.tls-form-control--invalid
-  ) {
-    --tls-form-control-group-border-color: var(--color-danger);
-
-    color: var(--color-danger);
-
-    .tls-form-control::placeholder,
-    .tls-form-control__placeholder {
-      color: var(--color-danger);
-    }
-  }
-}