@haiilo/catalyst 6.3.1 → 6.3.3

package/dist/catalyst/scss/_snippets/_form-label.scss

@@ -8,6 +8,14 @@ $cat-input-height: 2.5rem;
   @include cat-break-word;
 }
 
+.input-field:not(.input-horizontal),
+.textarea-field:not(.textarea-horizontal),
+.select-field:not(.select-horizontal) {
+  .label-container.hidden {
+    @include cat-visually-hidden;
+  }
+}
+
 .label-container {
   flex-basis: var(--label-size, 33.33%);
 
@@ -15,10 +23,6 @@ $cat-input-height: 2.5rem;
     display: flex;
     gap: 0.25rem;
   }
-
-  .hidden {
-    @include cat-visually-hidden;
-  }
 }
 
 .label-metadata {
@@ -49,6 +53,10 @@ $cat-input-height: 2.5rem;
 .input-horizontal,
 .textarea-horizontal,
 .select-horizontal {
+  .label-container.hidden label {
+    @include cat-visually-hidden;
+  }
+
   .label-wrapper {
     flex-direction: column;
   }

package/dist/catalyst/scss/fonts/_fonts.mixins.lato.scss

@@ -5,7 +5,8 @@
   @if list.index($weights, 100) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Hairline")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffHairline")}') format('woff');
       font-style: normal;
       font-weight: 100;
@@ -14,7 +15,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2HairlineItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffHairlineItalic")}') format('woff');
       font-style: italic;
       font-weight: 100;
@@ -25,7 +27,8 @@
   @if list.index($weights, 200) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Thin")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffThin")}') format('woff');
       font-style: normal;
       font-weight: 200;
@@ -34,7 +37,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2ThinItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffThinItalic")}') format('woff');
       font-style: italic;
       font-weight: 200;
@@ -45,7 +49,8 @@
   @if list.index($weights, 300) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Light")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Light")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffLight")}') format('woff');
       font-style: normal;
       font-weight: 300;
@@ -54,7 +59,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2LightItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffLightItalic")}') format('woff');
       font-style: italic;
       font-weight: 300;
@@ -65,7 +71,8 @@
   @if list.index($weights, 400) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Regular")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffRegular")}') format('woff');
       font-style: normal;
       font-weight: 400;
@@ -74,7 +81,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Italic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffItalic")}') format('woff');
       font-style: italic;
       font-weight: 400;
@@ -85,7 +93,8 @@
   @if list.index($weights, 500) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Medium")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffMedium")}') format('woff');
       font-style: normal;
       font-weight: 500;
@@ -94,7 +103,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2MediumItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffMediumItalic")}') format('woff');
       font-style: italic;
       font-weight: 500;
@@ -105,7 +115,8 @@
   @if list.index($weights, 600) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Semibold")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffSemibold")}') format('woff');
       font-style: normal;
       font-weight: 600;
@@ -114,7 +125,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2SemiboldItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffSemiboldItalic")}') format('woff');
       font-style: italic;
       font-weight: 600;
@@ -125,7 +137,8 @@
   @if list.index($weights, 700) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Bold")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffBold")}') format('woff');
       font-style: normal;
       font-weight: 700;
@@ -134,7 +147,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2BoldItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffBoldItalic")}') format('woff');
       font-style: italic;
       font-weight: 700;
@@ -145,7 +159,8 @@
   @if list.index($weights, 800) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Heavy")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffHeavy")}') format('woff');
       font-style: normal;
       font-weight: 800;
@@ -154,7 +169,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2HeavyItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffHeavyItalic")}') format('woff');
       font-style: italic;
       font-weight: 800;
@@ -165,7 +181,8 @@
   @if list.index($weights, 900) {
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2Black")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2Black")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffBlack")}') format('woff');
       font-style: normal;
       font-weight: 900;
@@ -174,7 +191,8 @@
     }
     @font-face {
       font-family: Lato;
-      src: url('#{$path}/#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'),
+      src:
+        url('#{$path}/#{cat-token("asset.font.lato.woff2BlackItalic")}') format('woff2'),
         url('#{$path}/#{cat-token("asset.font.lato.woffBlackItalic")}') format('woff');
       font-style: italic;
       font-weight: 900;

package/dist/catalyst/scss/utils/_color.scss

@@ -7,7 +7,9 @@
   }
 
   .cat-bg-#{$name}-hover {
-    transition: background-color cat-token('time.transition.s'), color cat-token('time.transition.s');
+    transition:
+      background-color cat-token('time.transition.s'),
+      color cat-token('time.transition.s');
 
     &:hover {
       background-color: cat-token('color.theme.#{$name}.bgHover') !important;

package/dist/catalyst/scss/utils/_typography.mixins.scss

@@ -1,8 +1,16 @@
 @use '../variables' as *;
 
 /* stylelint-disable value-keyword-case */
-$font-fallback-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
-  'Liberation Sans', Arial, sans-serif !default;
+$font-fallback-sans-serif:
+  system-ui,
+  -apple-system,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  'Noto Sans',
+  'Liberation Sans',
+  Arial,
+  sans-serif !default;
 $font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
 /* stylelint-enable value-keyword-case */

package/dist/catalyst/scss/vendor/_flatpickr.scss

@@ -14,7 +14,8 @@
   &:not(.inline).animate {
     transform: translateY(-1rem);
     opacity: 0;
-    transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),
+    transition:
+      transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),
       opacity cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15);
   }
 
@@ -44,7 +45,8 @@
     &.animate {
       opacity: 1;
       transform: translateY(0);
-      transition: transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1),
+      transition:
+        transform cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1),
         opacity cat-token('time.transition.l') cubic-bezier(0.05, 0.7, 0.1, 1);
     }
   }
@@ -109,6 +111,7 @@
 
 .flatpickr-weekdays {
   height: 2rem;
+
   .flatpickr-weekday {
     color: cat-token('color.ui.font.muted');
     @include cat-body(xs, $weight: 700);