@thalassic/themes 0.13.1 → 0.14.1

package/package.json

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

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

@@ -10,6 +10,14 @@
     align-items: flex-start;
   }
 
+  &--fluid {
+    width: 100%;
+
+    .tls-chip {
+      flex: 1;
+    }
+  }
+
   .tls-chip {
     user-select: none;
 

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

@@ -7,8 +7,6 @@ tls-chip-input.tls-form-control {
   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);
 

package/themes/thalassic/components/{form/_form-item.scss → _form-item.scss}

@@ -14,6 +14,12 @@
     }
   }
 
+  &.tls-form-item--label-space-reserved {
+    .form-item-label {
+      min-height: var(--font-label-medium-line-height);
+    }
+  }
+
   &:not(.tls-form-item--error-space-reserved) {
     .form-item-error {
       min-height: auto;
@@ -24,6 +30,10 @@
     }
   }
 
+  &:has(.tls-form-control--fluid, .tls-file-uploader--fluid, .tls-form-control-group--fluid) {
+    width: 100%;
+  }
+
   .form-item-label {
     margin-bottom: 0.25rem;
 
@@ -35,10 +45,6 @@
     line-height: var(--font-label-medium-line-height);
     letter-spacing: var(--font-label-medium-letter-spacing);
 
-    &:has(.form-item-label__text:empty) {
-      display: none;
-    }
-
     &__required {
       display: none;
       color: var(--color-danger);
@@ -66,9 +72,8 @@
       opacity: 1;
       transform: translateY(0);
 
-      transition:
-        transform var(--motion-default) var(--motion-ease-in),
-        opacity var(--motion-default) var(--motion-ease-in);
+      transition: transform var(--motion-default) var(--motion-ease-in),
+      opacity var(--motion-default) var(--motion-ease-in);
 
       @starting-style {
         opacity: 0;

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

@@ -2,7 +2,7 @@
   --tls-button-width: auto;
 
   width: var(--tls-button-width);
-  height: var(--tls-button-height);
+  min-height: var(--tls-button-height);
   padding-inline: var(--tls-button-padding-inline);
 
   font-size: var(--tls-button-font-size);
@@ -11,9 +11,11 @@
   letter-spacing: var(--tls-button-letter-spacing);
 
   &.tls-button--icon-only {
+    --tls-button-width: var(--tls-button-height);
+
     padding-inline: 0;
 
-    aspect-ratio: 1/1;
+    aspect-ratio: 1 / 1;
 
     &.tls-button--rounded {
       --tls-button-border-radius: 50%;

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

@@ -1,5 +1,5 @@
 .tls-chip {
-  height: var(--tls-chip-height);
+  min-height: var(--tls-chip-height);
   padding-inline: var(--tls-chip-padding-inline);
 
   font-size: var(--tls-chip-font-size);
@@ -8,6 +8,7 @@
   letter-spacing: var(--tls-chip-letter-spacing);
 
   &.tls-chip--icon {
+    width: var(--tls-chip-height);
     padding-inline: 0;
     aspect-ratio: 1 / 1;
 

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

@@ -7,4 +7,8 @@
   gap: var(--spacing-1);
 
   border-radius: var(--tls-chip-border-radius);
-}
+
+  &--fluid {
+    width: 100%;
+  }
+}

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

@@ -2,7 +2,7 @@
   --tls-form-control-width: auto;
 
   width: var(--tls-form-control-width);
-  height: var(--tls-form-control-height);
+  min-height: var(--tls-form-control-height);
   padding-inline: var(--tls-form-control-padding-inline);
 
   font-size: var(--tls-form-control-font-size);

package/themes/thalassic/components/{form → form-control}/_index.scss

@@ -1,3 +1,2 @@
 @forward 'form-control';
 @forward 'form-control-size';
-@forward 'form-item';

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

@@ -2,7 +2,7 @@
   --tls-form-control-group-width: auto;
 
   width: var(--tls-form-control-group-width);
-  height: var(--tls-form-control-group-height);
+  min-height: var(--tls-form-control-group-height);
 
   font-size: var(--tls-form-control-group-font-size);
   font-weight: var(--tls-form-control-group-font-weight);

package/themes/thalassic/components/index.scss

@@ -8,7 +8,7 @@
 @forward 'pagination';
 @forward 'multi-select';
 @forward 'select';
-@forward 'form';
+@forward 'form-control';
 @forward 'form-control-group';
 @forward 'stepper';
 @forward 'switch';
@@ -19,8 +19,9 @@
 @forward 'checkbox';
 @forward 'chip-group';
 @forward 'chip-input';
-@forward 'file-uploader';
 @forward 'divider';
+@forward 'file-uploader';
+@forward 'form-item';
 @forward 'icon';
 @forward 'menu';
 @forward 'password';

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

@@ -68,6 +68,13 @@
       }
     }
 
+    &:has(.tls-select__clear) .tls-select__trigger {
+      gap: calc(
+        var(--tls-select-clear-size) +
+        var(--tls-select-gap)
+      );
+    }
+
     // Clear button
     .tls-select__clear {
       position: absolute;