@thalassic/themes 0.7.0 → 0.8.0

package/package.json

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

package/themes/thalassic/components/_password.scss

@@ -0,0 +1,18 @@
+.tls-password {
+  display: inline-flex;
+
+  .tls-password-toggle {
+    display: grid;
+    align-items: center;
+
+    &__item {
+      grid-area: 1 / 1;
+
+      text-align: center;
+
+      &--hidden {
+        visibility: hidden;
+      }
+    }
+  }
+}

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

@@ -18,6 +18,8 @@
     line-height: var(--font-label-large-line-height);
     letter-spacing: var(--font-label-large-letter-spacing);
 
+    background-color: var(--color-surface-container-lowest);
+
     border: 1px solid var(--tls-pin-input-border-color);
     border-radius: var(--tls-pin-border-radius);
 
@@ -36,6 +38,10 @@
         opacity: 0;
       }
     }
+
+    &::placeholder {
+      color: var(--color-outline);
+    }
   }
 
   &.tls-pin-input--disabled {

package/themes/thalassic/components/_popover.scss

@@ -0,0 +1,21 @@
+.tls-popover {
+  --tls-popover-padding: var(--spacing-4);
+
+  --tls-popover-border-radius: var(--radius-lg);
+  --tls-popover-border-width: 1px;
+
+  --tls-popover-box-shadow: var(--shadow-sm);
+  --tls-popover-background-color: var(--color-surface-container-lowest);
+  --tls-popover-color: var(--color-on-surface);
+  --tls-popover-border-color: var(--color-outline-variant);
+
+  padding: var(--tls-popover-padding);
+
+  border-radius: var(--tls-popover-border-radius);
+  border: var(--tls-popover-border-width) solid var(--tls-popover-border-color);
+
+  color: var(--tls-popover-color);
+  background-color: var(--tls-popover-background-color);
+
+  box-shadow: var(--tls-popover-box-shadow);
+}

package/themes/thalassic/components/_table.scss

@@ -0,0 +1,78 @@
+.tls-table {
+  --tls-table-background: var(--color-surface-container-lowest);
+  --tls-table-color: var(--color-on-surface);
+
+  --tls-table-header-background: var(--color-surface-container-lowest);
+  --tls-table-header-color: var(--color-on-surface-variant);
+  --tls-table-header-weight: var(--font-weight-medium);
+
+  --tls-table-border-color: var(--color-outline-variant);
+
+  --tls-table-row-hover-bg: var(--color-surface-container);
+  --tls-table-stripe-background: var(--color-surface-container-low);
+
+  --tls-table-cell-padding-x: var(--spacing-4);
+  --tls-table-cell-padding-y: var(--spacing-3);
+
+  --tls-table-font-size: var(--font-body-medium-size);
+  --tls-table-font-weight: var(--font-body-medium-weight);
+  --tls-table-line-height: var(--font-body-medium-line-height);
+  --tls-table-letter-spacing: var(--font-body-medium-letter-spacing);
+
+  --tls-table-radius: var(--radius-md);
+
+  width: 100%;
+
+  border-collapse: collapse;
+  border-radius: var(--tls-table-radius);
+  overflow: hidden;
+
+  font-size: var(--tls-table-font-size);
+  font-weight: var(--tls-table-font-weight);
+  line-height: var(--tls-table-line-height);
+  letter-spacing: var(--tls-table-letter-spacing);
+  color: var(--tls-table-color);
+
+  &__header-row {
+    background: var(--tls-table-header-background);
+  }
+
+  &--hide-header &__header-row {
+    display: none;
+  }
+
+  &--striped &__row:nth-child(even) &__cell {
+    background-color: var(--tls-table-stripe-background);
+  }
+
+  &__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);
+
+    text-align: start;
+    font-size: var(--font-label-small-size);
+    font-weight: var(--tls-table-header-weight);
+    letter-spacing: var(--font-label-small-letter-spacing);
+    white-space: nowrap;
+  }
+
+  &__row {
+    transition: background var(--motion-fast) var(--motion-ease-in-out);
+
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--tls-table-border-color);
+    }
+
+    &:hover {
+      background: var(--tls-table-row-hover-bg);
+    }
+  }
+
+  &__cell {
+    padding: var(--tls-table-cell-padding-y) var(--tls-table-cell-padding-x);
+    background-color: var(--tls-table-background);
+  }
+}

package/themes/thalassic/components/date-time-picker/_calendar.scss

@@ -0,0 +1,85 @@
+@use 'mixins' as picker-mixins;
+@use '../../mixins' as mixins;
+
+.tls-calendar {
+  display: block;
+  width: fit-content;
+
+  &__header {
+    @include picker-mixins.header;
+  }
+
+  &__header-button {
+    @include picker-mixins.header-button;
+  }
+
+  &__nav {
+    @include picker-mixins.nav;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, var(--spacing-9));
+    gap: 2px;
+  }
+
+  &__weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: var(--spacing-9);
+
+    font-size: var(--font-label-medium-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface-variant);
+  }
+
+  &__day {
+    width: var(--spacing-9);
+    height: var(--spacing-9);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: var(--font-label-large-size);
+
+    border: none;
+    border-radius: 50%;
+
+    background: transparent;
+    color: var(--color-on-surface);
+
+    cursor: pointer;
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:hover {
+      background-color: var(--color-surface-container-high);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+
+    &--outside {
+      color: var(--color-on-surface-variant);
+      opacity: 0.4;
+    }
+
+    &--today {
+      color: var(--color-primary);
+      font-weight: var(--font-weight-semibold);
+    }
+
+    &--selected {
+      background-color: var(--color-primary);
+      color: var(--color-on-primary);
+
+      &:hover {
+        background-color: var(--color-primary);
+        filter: brightness(0.9);
+      }
+    }
+  }
+}

package/themes/thalassic/components/date-time-picker/_date-time-picker.scss

@@ -0,0 +1,63 @@
+.tls-date-time-picker {
+  --tls-date-time-picker-width: 200px;
+
+  display: inline-block;
+
+  &__panel {
+    padding: var(--spacing-3);
+    background-color: var(--color-surface-container-lowest);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 2px 8px rgba(var(--color-shadow), 0.12);
+
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    &--readonly {
+      pointer-events: none;
+    }
+
+    &--invalid {
+      border-color: var(--color-danger);
+    }
+  }
+
+  &.tls-form-control {
+    --tls-form-control-width: var(--tls-date-time-picker-width);
+
+    display: inline-flex;
+    align-items: stretch;
+    padding-inline: 0;
+
+    cursor: pointer;
+
+    &.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);
+    }
+  }
+
+  &__trigger {
+    flex: 1;
+
+    display: flex;
+    align-items: center;
+
+    padding-inline: var(--tls-form-control-padding-inline);
+
+    appearance: none;
+    outline: none;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+
+    cursor: inherit;
+  }
+}

package/themes/thalassic/components/date-time-picker/_index.scss

@@ -0,0 +1,5 @@
+@forward 'calendar';
+@forward 'date-time-picker';
+@forward 'month-picker';
+@forward 'time-picker';
+@forward 'year-picker';

package/themes/thalassic/components/date-time-picker/_mixins.scss

@@ -0,0 +1,108 @@
+@use '../../mixins' as mixins;
+
+@mixin header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-2);
+}
+
+@mixin cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: var(--font-label-large-size);
+
+  border-radius: var(--radius-md);
+
+  color: var(--color-on-surface);
+
+  cursor: pointer;
+  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+  &:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+
+  &--current {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+  }
+
+  &--selected {
+    background-color: var(--color-primary);
+    color: var(--color-on-primary);
+
+    &:hover {
+      background-color: var(--color-primary);
+      filter: brightness(0.9);
+    }
+  }
+}
+
+@mixin header-button {
+  align-self: stretch;
+
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--font-label-large-size);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-on-surface);
+
+  border: none;
+  border-radius: var(--radius-sm);
+
+  background: transparent;
+
+  cursor: pointer;
+
+  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+  &:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+}
+
+@mixin nav {
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  border-radius: var(--radius-sm);
+
+  background: transparent;
+  color: var(--color-on-surface-variant);
+
+  cursor: pointer;
+
+  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+  svg {
+    width: 8px;
+    height: 14px;
+  }
+
+  &:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  &:focus-visible {
+    @include mixins.focus-ring;
+  }
+}

package/themes/thalassic/components/date-time-picker/_month-picker.scss

@@ -0,0 +1,32 @@
+@use 'mixins' as picker-mixins;
+
+.tls-month-picker {
+  --tls-month-picker-cell-height: var(--spacing-10);
+
+  display: block;
+  width: fit-content;
+
+  &__header {
+    @include picker-mixins.header;
+  }
+
+  &__header-button {
+    @include picker-mixins.header-button;
+  }
+
+  &__nav {
+    @include picker-mixins.nav;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, var(--spacing-15));
+    gap: var(--spacing-1);
+  }
+
+  &__cell {
+    height: var(--tls-month-picker-cell-height);
+
+    @include picker-mixins.cell;
+  }
+}

package/themes/thalassic/components/date-time-picker/_time-picker.scss

@@ -0,0 +1,61 @@
+@use '../../mixins' as mixins;
+
+.tls-time-picker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-1);
+
+  &__column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-1);
+  }
+
+  &__value {
+    font-size: var(--font-title-medium-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface);
+    min-width: var(--spacing-9);
+    text-align: center;
+    line-height: 1;
+    padding: var(--spacing-1) 0;
+  }
+
+  &__separator {
+    font-size: var(--font-title-medium-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface-variant);
+    align-self: center;
+    padding-bottom: var(--spacing-2);
+  }
+
+  &__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-7);
+    height: var(--spacing-7);
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--color-on-surface-variant);
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    svg {
+      width: 14px;
+      height: 8px;
+    }
+
+    &:hover {
+      background-color: var(--color-surface-container-high);
+      color: var(--color-on-surface);
+    }
+
+    &:focus-visible {
+      @include mixins.focus-ring;
+    }
+  }
+}

package/themes/thalassic/components/date-time-picker/_year-picker.scss

@@ -0,0 +1,34 @@
+@use 'mixins' as picker-mixins;
+
+.tls-year-picker {
+  --tls-year-picker-cell-height: var(--spacing-10);
+
+  display: block;
+  width: fit-content;
+
+  &__header {
+    @include picker-mixins.header;
+  }
+
+  &__range {
+    font-size: var(--font-label-large-size);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-on-surface);
+  }
+
+  &__nav {
+    @include picker-mixins.nav;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, var(--spacing-15));
+    gap: var(--spacing-1);
+  }
+
+  &__cell {
+    height: var(--tls-year-picker-cell-height);
+
+    @include picker-mixins.cell;
+  }
+}

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

@@ -0,0 +1,29 @@
+.tls-dialog {
+  &.tls-dialog--sm {
+    --tls-dialog-width: 400px;
+  }
+
+  &.tls-dialog--md {
+    --tls-dialog-width: 560px;
+  }
+
+  &.tls-dialog--lg {
+    --tls-dialog-width: 720px;
+  }
+
+  &.tls-dialog--xl {
+    --tls-dialog-width: 920px;
+  }
+
+  &.tls-dialog--wide {
+    --tls-dialog-width: calc(100svw - var(--spacing-12));
+    max-height: calc(100dvh - var(--spacing-12));
+  }
+
+  &.tls-dialog--full {
+    --tls-dialog-width: 100svw;
+    --tls-dialog-border-radius: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+}

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

@@ -0,0 +1,85 @@
+.tls-dialog-backdrop {
+  --tls-dialog-backdrop: rgb(0 0 0 / 0.4);
+
+  background-color: var(--tls-dialog-backdrop);
+}
+
+.tls-dialog {
+  --tls-dialog-background: var(--color-surface-container-lowest);
+  --tls-dialog-color: var(--color-on-surface);
+  --tls-dialog-border-radius: var(--radius-xl);
+  --tls-dialog-shadow: var(--shadow-lg);
+  --tls-dialog-padding: var(--spacing-6);
+  --tls-dialog-close-size: 16px;
+  --tls-dialog-close-padding: var(--spacing-4);
+
+  position: relative;
+
+  width: var(--tls-dialog-width);
+
+  display: flex;
+  flex-direction: column;
+
+  pointer-events: auto;
+
+  border-radius: var(--tls-dialog-border-radius);
+  background-color: var(--tls-dialog-background);
+  color: var(--tls-dialog-color);
+  box-shadow: var(--tls-dialog-shadow);
+
+  &__close {
+    position: absolute;
+    top: var(--tls-dialog-close-padding);
+    right: var(--tls-dialog-close-padding);
+    z-index: 1;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--tls-dialog-close-size);
+    height: var(--tls-dialog-close-size);
+
+    color: var(--color-outline);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+
+    transition: color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:hover {
+      color: var(--color-on-surface);
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__header {
+    padding: var(--tls-dialog-padding) var(--tls-dialog-padding) 0;
+  }
+
+  &__title {
+    font-size: var(--font-title-large-size);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-title-large-line-height);
+    color: var(--color-on-surface);
+  }
+
+  &__body {
+    flex: 1;
+    padding: var(--spacing-4) var(--tls-dialog-padding);
+    overflow-y: auto;
+  }
+
+  &__footer {
+    padding: 0 var(--tls-dialog-padding) var(--tls-dialog-padding);
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-3);
+  }
+}

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

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

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

@@ -51,7 +51,8 @@
 
     color: var(--color-danger);
 
-    .tls-form-control::placeholder {
+    .tls-form-control::placeholder,
+    .tls-form-control__placeholder {
       color: var(--color-danger);
     }
   }

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

@@ -4,7 +4,7 @@
   --tls-form-control-border-color: var(--color-outline-variant);
 
   color: var(--color-on-surface);
-  background-color: var(--color-surface);
+  background-color: var(--color-surface-container-lowest);
 
   border-radius: var(--radius-md);
   border: var(--tls-form-control-border-width) var(--tls-form-control-border-style)
@@ -20,10 +20,16 @@
   }
 
   &:focus {
-    border: 1px solid var(--color-primary);
+    outline: none;
+    border: var(--tls-form-control-border-width) solid var(--color-primary);
     box-shadow: 0 0 3px -1px var(--color-primary);
   }
 
+  &::placeholder,
+  .tls-form-control__placeholder {
+    color: var(--color-outline);
+  }
+
   // Form control
   &.tls-form-control--disabled {
     background-color: var(--color-surface-variant);
@@ -38,7 +44,8 @@
 
     color: var(--color-danger);
 
-    &::placeholder {
+    &::placeholder,
+    .tls-form-control__placeholder {
       color: var(--color-danger);
     }
   }

package/themes/thalassic/components/index.scss

@@ -1,7 +1,11 @@
 @forward 'alert';
 @forward 'button';
 @forward 'chart';
+@forward 'date-time-picker';
+@forward 'dialog';
 @forward 'loader';
+@forward 'pagination';
+@forward 'select';
 @forward 'form';
 @forward 'stepper';
 @forward 'switch';
@@ -11,6 +15,9 @@
 @forward 'checkbox';
 @forward 'divider';
 @forward 'icon';
+@forward 'password';
 @forward 'pin-input';
+@forward 'popover';
 @forward 'radio-button';
 @forward 'skeleton';
+@forward 'table';

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

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

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

@@ -0,0 +1,22 @@
+.tls-pagination {
+  &--sm {
+    --tls-pagination-item-size: var(--control-height-sm);
+    --tls-pagination-button-height: var(--control-height-sm);
+    --tls-pagination-button-padding-inline: var(--spacing-3);
+    --tls-pagination-button-icon-size: 14px;
+  }
+
+  &--md {
+    --tls-pagination-item-size: var(--control-height-md);
+    --tls-pagination-button-height: var(--control-height-md);
+    --tls-pagination-button-padding-inline: var(--spacing-4);
+    --tls-pagination-button-icon-size: 16px;
+  }
+
+  &--lg {
+    --tls-pagination-item-size: var(--control-height-lg);
+    --tls-pagination-button-height: var(--control-height-lg);
+    --tls-pagination-button-padding-inline: var(--spacing-5);
+    --tls-pagination-button-icon-size: 18px;
+  }
+}

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

@@ -0,0 +1,79 @@
+.tls-pagination {
+  --tls-pagination-gap: 16px;
+  --tls-pagination-color: var(--color-secondary);
+  --tls-pagination-radius: 4px;
+  --tls-pagination-hover-outline: 1px solid var(--color-lines);
+
+  --tls-pagination-item-border-color: var(--color-outline-variant);
+
+  --tls-pagination-active-color: var(--color-on-primary);
+  --tls-pagination-active-background: var(--color-primary);
+
+  display: flex;
+  align-items: center;
+
+  &__list {
+    display: flex;
+    gap: var(--tls-pagination-gap);
+  }
+
+  &__button {
+    height: var(--tls-pagination-button-height);
+    padding-inline: var(--tls-pagination-button-padding-inline);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-pagination-color);
+
+    border-radius: var(--tls-pagination-radius);
+
+    cursor: pointer;
+
+    &:hover {
+      outline: var(--tls-pagination-hover-outline);
+    }
+
+    &-icon {
+      width: var(--tls-pagination-button-icon-size);
+      height: var(--tls-pagination-button-icon-size);
+    }
+  }
+
+  &__gap {
+    width: var(--tls-pagination-item-size);
+    height: var(--tls-pagination-item-size);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-pagination-color);
+  }
+
+  &__item-button {
+    width: var(--tls-pagination-item-size);
+    height: var(--tls-pagination-item-size);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--tls-pagination-color);
+
+    border: 1px solid var(--tls-pagination-item-border-color);
+    border-radius: var(--tls-pagination-radius);
+
+    cursor: pointer;
+
+    &:hover {
+      outline: var(--tls-pagination-hover-outline);
+    }
+
+    &--active {
+      color: var(--tls-pagination-active-color);
+      background-color: var(--tls-pagination-active-background);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,68 @@
+.tls-select__panel {
+  --tls-select-panel-max-height: 240px;
+  --tls-select-panel-padding-block: var(--spacing-1);
+  --tls-select-panel-background: var(--color-surface-container-lowest);
+  --tls-select-panel-border-radius: var(--radius-md);
+  --tls-select-panel-shadow: var(--shadow-sm);
+
+  width: 100%;
+  max-height: var(--tls-select-panel-max-height);
+
+  margin: 0;
+  padding: var(--tls-select-panel-padding-block) 0;
+
+  background-color: var(--tls-select-panel-background);
+  border-radius: var(--tls-select-panel-border-radius);
+  box-shadow: var(--tls-select-panel-shadow);
+
+  overflow-y: auto;
+  list-style: none;
+}
+
+.tls-select__option {
+  --tls-select-option-color: var(--color-on-surface);
+  --tls-select-option-background: transparent;
+  --tls-select-option-padding-block: var(--spacing-2);
+  --tls-select-option-padding-inline: var(--spacing-3);
+
+  &.tls-select__option--active {
+    --tls-select-option-background: var(--color-surface-variant);
+  }
+
+  &.tls-select__option--selected {
+    --tls-select-option-color: var(--color-primary);
+  }
+
+  &.tls-select__option--disabled .tls-select__option-button {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .tls-select__option-button {
+    width: 100%;
+    padding-block: var(--tls-select-option-padding-block);
+    padding-inline: var(--tls-select-option-padding-inline);
+
+    display: flex;
+    align-items: center;
+
+    appearance: none;
+    cursor: pointer;
+    text-align: left;
+
+    color: var(--tls-select-option-color);
+    background: var(--tls-select-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);
+
+    transition: background-color var(--motion-fast) var(--motion-ease-in-out);
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+.tls-select {
+  &.tls-form-control--sm {
+    --tls-select-icon-size: 0.625rem;
+    --tls-select-clear-size: 0.625rem;
+  }
+
+  &.tls-form-control--md {
+    --tls-select-icon-size: 0.75rem;
+    --tls-select-clear-size: 0.75rem;
+  }
+
+  &.tls-form-control--lg {
+    --tls-select-icon-size: 0.875rem;
+    --tls-select-clear-size: 0.875rem;
+  }
+}

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

@@ -0,0 +1,94 @@
+.tls-select {
+  --tls-select-width: 200px;
+  --tls-select-gap: var(--spacing-2);
+
+  position: relative;
+  display: inline-block;
+
+  &.tls-form-control {
+    --tls-form-control-width: var(--tls-select-width);
+
+    display: inline-flex;
+    align-items: stretch;
+    padding-inline: 0;
+
+    cursor: pointer;
+
+    &.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-select--open {
+      .tls-select__chevron {
+        transform: rotate(180deg);
+      }
+    }
+
+    .tls-select__trigger {
+      flex: 1;
+      min-width: 0;
+
+      display: flex;
+      align-items: center;
+      gap: var(--tls-select-gap);
+
+      padding-inline: var(--tls-form-control-padding-inline);
+
+      appearance: none;
+      outline: none;
+
+      .tls-select__value {
+        flex: 1;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .tls-select__icon {
+        width: var(--tls-select-icon-size);
+        height: var(--tls-select-icon-size);
+
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+
+        .tls-select__chevron {
+          transition: transform var(--motion-fast) var(--motion-ease-in-out);
+        }
+      }
+    }
+
+    // Clear button
+    .tls-select__clear {
+      position: absolute;
+      top: 50%;
+      right: calc(var(--tls-form-control-padding-inline) * 2 + var(--tls-select-icon-size));
+
+      display: flex;
+      align-items: center;
+
+      color: var(--color-outline);
+
+      transform: translateY(-50%);
+
+      &:hover {
+        color: var(--color-on-surface);
+      }
+
+      .tls-select__clear-icon {
+        width: var(--tls-select-clear-size);
+        height: var(--tls-select-clear-size);
+      }
+    }
+  }
+}