@thalassic/themes 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thalassic/themes",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "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/{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/chip/_chip-size.scss

@@ -17,7 +17,7 @@
   }
 
   &.tls-chip--sm {
-    --tls-chip-height: 1.25rem;
+    --tls-chip-height: var(--control-height-sm);
     --tls-chip-padding-inline: var(--spacing-2);
 
     --tls-chip-font-size: var(--font-label-small-size);
@@ -31,7 +31,7 @@
   }
 
   &.tls-chip--md {
-    --tls-chip-height: 1.5rem;
+    --tls-chip-height: var(--control-height-md);
     --tls-chip-padding-inline: var(--spacing-3);
 
     --tls-chip-font-size: var(--font-label-medium-size);
@@ -45,7 +45,7 @@
   }
 
   &.tls-chip--lg {
-    --tls-chip-height: 2rem;
+    --tls-chip-height: var(--control-height-lg);
     --tls-chip-padding-inline: var(--spacing-4);
 
     --tls-chip-font-size: var(--font-label-large-size);
@@ -57,4 +57,4 @@
       --tls-chip-border-radius: var(--radius-3xl);
     }
   }
-}
+}

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}/_index.scss

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

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;