@thalassic/themes 0.15.3 → 0.17.0

package/package.json

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

package/themes/thalassic/components/_form-item.scss

@@ -8,12 +8,6 @@
     }
   }
 
-  &.tls-form-item--required {
-    .form-item-label__required {
-      display: inline;
-    }
-  }
-
   &.tls-form-item--label-space-reserved {
     .form-item-label {
       min-height: var(--font-label-medium-line-height);
@@ -46,13 +40,20 @@
     letter-spacing: var(--font-label-medium-letter-spacing);
 
     &__required {
-      display: none;
       color: var(--color-danger);
 
       font-size: var(--font-label-large-size);
       font-weight: var(--font-label-large-weight);
       letter-spacing: var(--font-label-large-letter-spacing);
     }
+
+    &__optional {
+      color: var(--color-on-surface-variant);
+
+      font-size: var(--font-label-small-size);
+      font-weight: var(--font-label-small-weight);
+      letter-spacing: var(--font-label-small-letter-spacing);
+    }
   }
 
   .form-item-error {

package/themes/thalassic/components/_input-number.scss

@@ -0,0 +1,11 @@
+.tls-input-number {
+  &--no-arrows {
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+}

package/themes/thalassic/components/_menu.scss

@@ -1,3 +1,5 @@
+@use '../mixins' as mixins;
+
 .tls-menu {
   --tls-menu-min-width: 160px;
   --tls-menu-padding-block: var(--spacing-1);
@@ -35,6 +37,8 @@
 
   overflow: hidden;
 
+  @include mixins.panel-open;
+
   &__item {
     width: 100%;
     padding-block: var(--tls-menu-item-padding-block);
@@ -59,8 +63,6 @@
     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):not(&--disabled) {
       background-color: var(--tls-menu-item-background-hover);
     }

package/themes/thalassic/components/_popover.scss

@@ -1,3 +1,5 @@
+@use '../mixins' as mixins;
+
 .tls-popover {
   --tls-popover-padding: var(--spacing-4);
 
@@ -18,4 +20,6 @@
   background-color: var(--tls-popover-background-color);
 
   box-shadow: var(--tls-popover-box-shadow);
+
+  @include mixins.panel-open;
 }

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

@@ -52,7 +52,6 @@
     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);

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

@@ -19,7 +19,6 @@
   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);
@@ -64,8 +63,6 @@
 
   cursor: pointer;
 
-  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
-
   &:hover {
     background-color: var(--color-surface-container-high);
   }
@@ -91,8 +88,6 @@
 
   cursor: pointer;
 
-  transition: background-color var(--motion-fast) var(--motion-ease-in-out);
-
   svg {
     width: 8px;
     height: 14px;

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

@@ -42,7 +42,6 @@
     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;

package/themes/thalassic/components/index.scss

@@ -25,6 +25,7 @@
 @forward 'icon';
 @forward 'menu';
 @forward 'password';
+@forward 'input-number';
 @forward 'pin-input';
 @forward 'popover';
 @forward 'radio-button';

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

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 .tls-multi-select__panel {
   --tls-multi-select-panel-max-height: 240px;
   --tls-multi-select-panel-padding-block: var(--spacing-1);
@@ -19,6 +21,8 @@
 
   overflow-y: auto;
   list-style: none;
+
+  @include mixins.panel-open;
 }
 
 .tls-multi-select__option {
@@ -63,8 +67,6 @@
     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-panel.scss

@@ -1,3 +1,5 @@
+@use '../../mixins' as mixins;
+
 .tls-select__panel {
   --tls-select-panel-max-height: 240px;
   --tls-select-panel-padding-block: var(--spacing-1);
@@ -19,6 +21,8 @@
 
   overflow-y: auto;
   list-style: none;
+
+  @include mixins.panel-open;
 }
 
 .tls-select__option {
@@ -61,8 +65,6 @@
     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/mixins/_index.scss

@@ -1 +1,3 @@
 @forward 'focus-ring';
+@forward 'motion';
+@forward 'panel-open';

package/themes/thalassic/mixins/_motion.scss

@@ -0,0 +1,21 @@
+// Gates its content on the resolved motion level reflected by `MotionService`
+// onto the document root (`data-motion` attribute).
+//
+// - `essential`: functional motion (panel origin cues, focus). Plays at the
+//   `essential` and `full` levels.
+// - `full`: expressive/decorative motion. Plays only at the `full` level.
+//
+// At the `none` level (or when no attribute is present) nothing is emitted, so
+// the wrapped animation never runs.
+@mixin motion($tier: essential) {
+  @if $tier == full {
+    :root[data-motion='full'] & {
+      @content;
+    }
+  } @else {
+    :root[data-motion='essential'] &,
+    :root[data-motion='full'] & {
+      @content;
+    }
+  }
+}

package/themes/thalassic/mixins/_panel-open.scss

@@ -0,0 +1,33 @@
+@use 'motion';
+
+@keyframes tls-panel-open {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@mixin panel-open(
+  $duration: var(--motion-instant),
+  $enter-easing: var(--motion-ease-out),
+  $leave-easing: var(--motion-ease-in)
+) {
+  transform-origin: top center;
+
+  // Panel motion is a functional origin cue, so it belongs to the `essential`
+  // tier and survives reduced motion (resolved by `MotionService`).
+  @include motion.motion(essential) {
+    &--enter {
+      animation: tls-panel-open $duration $enter-easing both;
+    }
+
+    &--leave {
+      animation: tls-panel-open $duration $leave-easing reverse both;
+    }
+  }
+}

package/themes/thalassic/semantic/_control.scss

@@ -1,7 +1,7 @@
 :root {
   --control-height-sm: 28px;
-  --control-height-md: 32px;
-  --control-height-lg: 36px;
+  --control-height-md: 36px;
+  --control-height-lg: 44px;
 
   --control-focus-ring-width: 2px;
   --control-focus-ring-offset: 2px;