@haiilo/catalyst 9.0.0 → 9.1.0

package/dist/collection/components/cat-select/cat-select.css

@@ -26,9 +26,9 @@
 .cat-bg-primary {
   background-color: rgb(var(--cat-primary-bg, 0, 129, 148)) !important;
   color: rgb(var(--cat-primary-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-primary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-primary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-primary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -38,9 +38,9 @@
 .cat-bg-primary-hover:hover {
   background-color: rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;
   color: rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-primary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-primary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-primary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -65,9 +65,9 @@
 .cat-bg-primaryInverted {
   background-color: #93b4f2 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -77,9 +77,9 @@
 .cat-bg-primaryInverted-hover:hover {
   background-color: #93b4f2 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -104,9 +104,9 @@
 .cat-bg-secondary {
   background-color: rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-secondary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-secondary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-secondary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -116,9 +116,9 @@
 .cat-bg-secondary-hover:hover {
   background-color: rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-secondary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-secondary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-secondary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -143,9 +143,9 @@
 .cat-bg-secondaryInverted {
   background-color: #697687 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -155,9 +155,9 @@
 .cat-bg-secondaryInverted-hover:hover {
   background-color: #697687 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -182,9 +182,9 @@
 .cat-bg-info {
   background-color: rgb(var(--cat-success-bg, 0, 115, 230)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -194,9 +194,9 @@
 .cat-bg-info-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -221,9 +221,9 @@
 .cat-bg-success {
   background-color: rgb(var(--cat-success-bg, 0, 132, 88)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -233,9 +233,9 @@
 .cat-bg-success-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -260,9 +260,9 @@
 .cat-bg-warning {
   background-color: rgb(var(--cat-warning-bg, 255, 206, 128)) !important;
   color: rgb(var(--cat-warning-fill, 0, 0, 0)) !important;
-  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-warning-fill, 0, 0, 0);
+  --cat-primary-text-hover: var(--cat-warning-fill-hover, 0, 0, 0);
+  --cat-primary-text-active: var(--cat-warning-fill-active, 0, 0, 0);
   --cat-link-decoration: underline;
 }
 
@@ -272,9 +272,9 @@
 .cat-bg-warning-hover:hover {
   background-color: rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;
   color: rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;
-  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-warning-fill, 0, 0, 0);
+  --cat-primary-text-hover: var(--cat-warning-fill-hover, 0, 0, 0);
+  --cat-primary-text-active: var(--cat-warning-fill-active, 0, 0, 0);
   --cat-link-decoration: underline;
 }
 
@@ -299,9 +299,9 @@
 .cat-bg-danger {
   background-color: rgb(var(--cat-danger-bg, 217, 52, 13)) !important;
   color: rgb(var(--cat-danger-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-danger-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-danger-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-danger-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -311,9 +311,9 @@
 .cat-bg-danger-hover:hover {
   background-color: rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;
   color: rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-danger-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-danger-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-danger-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 

package/dist/collection/components/cat-textarea/cat-textarea.css

@@ -26,9 +26,9 @@
 .cat-bg-primary {
   background-color: rgb(var(--cat-primary-bg, 0, 129, 148)) !important;
   color: rgb(var(--cat-primary-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-primary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-primary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-primary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -38,9 +38,9 @@
 .cat-bg-primary-hover:hover {
   background-color: rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;
   color: rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-primary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-primary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-primary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -65,9 +65,9 @@
 .cat-bg-primaryInverted {
   background-color: #93b4f2 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -77,9 +77,9 @@
 .cat-bg-primaryInverted-hover:hover {
   background-color: #93b4f2 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -104,9 +104,9 @@
 .cat-bg-secondary {
   background-color: rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-secondary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-secondary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-secondary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -116,9 +116,9 @@
 .cat-bg-secondary-hover:hover {
   background-color: rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-secondary-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-secondary-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-secondary-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -143,9 +143,9 @@
 .cat-bg-secondaryInverted {
   background-color: #697687 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -155,9 +155,9 @@
 .cat-bg-secondaryInverted-hover:hover {
   background-color: #697687 !important;
   color: black !important;
-  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-primary-text: 0, 0, 0;
+  --cat-primary-text-hover: 0, 0, 0;
+  --cat-primary-text-active: 0, 0, 0;
   --cat-link-decoration: underline;
 }
 
@@ -182,9 +182,9 @@
 .cat-bg-info {
   background-color: rgb(var(--cat-success-bg, 0, 115, 230)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -194,9 +194,9 @@
 .cat-bg-info-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -221,9 +221,9 @@
 .cat-bg-success {
   background-color: rgb(var(--cat-success-bg, 0, 132, 88)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -233,9 +233,9 @@
 .cat-bg-success-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-success-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-success-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-success-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -260,9 +260,9 @@
 .cat-bg-warning {
   background-color: rgb(var(--cat-warning-bg, 255, 206, 128)) !important;
   color: rgb(var(--cat-warning-fill, 0, 0, 0)) !important;
-  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-warning-fill, 0, 0, 0);
+  --cat-primary-text-hover: var(--cat-warning-fill-hover, 0, 0, 0);
+  --cat-primary-text-active: var(--cat-warning-fill-active, 0, 0, 0);
   --cat-link-decoration: underline;
 }
 
@@ -272,9 +272,9 @@
 .cat-bg-warning-hover:hover {
   background-color: rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;
   color: rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;
-  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-warning-fill, 0, 0, 0);
+  --cat-primary-text-hover: var(--cat-warning-fill-hover, 0, 0, 0);
+  --cat-primary-text-active: var(--cat-warning-fill-active, 0, 0, 0);
   --cat-link-decoration: underline;
 }
 
@@ -299,9 +299,9 @@
 .cat-bg-danger {
   background-color: rgb(var(--cat-danger-bg, 217, 52, 13)) !important;
   color: rgb(var(--cat-danger-fill, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-danger-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-danger-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-danger-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 
@@ -311,9 +311,9 @@
 .cat-bg-danger-hover:hover {
   background-color: rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;
   color: rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;
-  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
-  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
-  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-primary-text: var(--cat-danger-fill, 255, 255, 255);
+  --cat-primary-text-hover: var(--cat-danger-fill-hover, 255, 255, 255);
+  --cat-primary-text-active: var(--cat-danger-fill-active, 255, 255, 255);
   --cat-link-decoration: underline;
 }
 

package/dist/collection/components/cat-tooltip/cat-tooltip.css

@@ -12,8 +12,8 @@
 }
 
 .tooltip {
-  --cat-font-color-head: cat-token("color.ui.font.tooltip", $wrap: false);
-  --cat-font-color-body: cat-token("color.ui.font.tooltip", $wrap: false);
+  --cat-font-color-head: var(--cat-font-color-tooltip, 255, 255, 255);
+  --cat-font-color-body: var(--cat-font-color-tooltip, 255, 255, 255);
   position: fixed;
   width: max-content;
   top: 0;

package/dist/collection/scss/core/_dialog.scss

@@ -66,3 +66,41 @@ $-dialog-padding: 1.5rem;
     }
   }
 }
+
+.cat-dialog-pull {
+  &.cat-dialog-header,
+  &.cat-dialog-actions {
+    margin: -#{$-dialog-padding};
+  }
+
+  .cat-dialog-content & {
+    margin-left: -#{$-dialog-padding};
+    margin-right: -#{$-dialog-padding};
+  }
+}
+
+.cat-dialog-pull-h {
+  margin-left: -#{$-dialog-padding};
+  margin-right: -#{$-dialog-padding};
+}
+
+.cat-dialog-pull-v {
+  margin-top: -#{$-dialog-padding};
+  margin-bottom: -#{$-dialog-padding};
+}
+
+.cat-dialog-pull-r {
+  margin-right: -#{$-dialog-padding};
+}
+
+.cat-dialog-pull-l {
+  margin-left: -#{$-dialog-padding};
+}
+
+.cat-dialog-pull-t {
+  margin-top: -#{$-dialog-padding};
+}
+
+.cat-dialog-pull-b {
+  margin-bottom: -#{$-dialog-padding};
+}

package/dist/collection/scss/utils/_color.scss

@@ -5,9 +5,9 @@
     background-color: cat-token('color.theme.#{$name}.bg') !important;
     color: cat-token('color.theme.#{$name}.fill') !important;
     // adjust nested links
-    --cat-primary-text: cat-token('color.theme.#{$name}.fill', $wrap: false);
-    --cat-primary-text-hover: cat-token('color.theme.#{$name}.fill-hover', $wrap: false);
-    --cat-primary-text-active: cat-token('color.theme.#{$name}.fill-active', $wrap: false);
+    --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)};
+    --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)};
+    --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)};
     --cat-link-decoration: underline;
   }
 
@@ -20,9 +20,9 @@
       background-color: cat-token('color.theme.#{$name}.bgHover') !important;
       color: cat-token('color.theme.#{$name}.fillHover') !important;
       // adjust nested links
-      --cat-primary-text: cat-token('color.theme.#{$name}.fill', $wrap: false);
-      --cat-primary-text-hover: cat-token('color.theme.#{$name}.fill-hover', $wrap: false);
-      --cat-primary-text-active: cat-token('color.theme.#{$name}.fill-active', $wrap: false);
+      --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)};
+      --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)};
+      --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)};
       --cat-link-decoration: underline;
     }
   }

package/dist/components/cat-alert.js

@@ -7,7 +7,7 @@ function setAttributeDefault(host, attr, value) {
     }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.primary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primary.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.secondary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondary.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.info.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.info.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.info.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.success.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.success.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.success.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:cat-token(\"color.theme.warning.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.warning.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.warning.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.danger.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.danger.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.danger.fill-active\", $wrap: false);--cat-link-decoration:underline}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLElement {
     constructor() {

package/dist/components/cat-alert.js.map

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;IAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACpD;AACH;;ACRA,MAAM,WAAW,GAAG,urFAAurF;;MCY9rFA,UAAQ;;;;;QACF,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;SAChC,CAAC,CAAC;QACc,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;SACpB,CAAC,CAAC;qBAO0F,SAAS;;sBAUrF,KAAK;;IAEtB,iBAAiB;QACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAChG,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: cat-token('color.theme.#{$theme}.fill', $wrap: false);\n    --cat-primary-text-hover: cat-token('color.theme.#{$theme}.fill-hover', $wrap: false);\n    --cat-primary-text-active: cat-token('color.theme.#{$theme}.fill-active', $wrap: false);\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;IAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACpD;AACH;;ACRA,MAAM,WAAW,GAAG,g6EAAg6E;;MCYv6EA,UAAQ;;;;;QACF,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;YACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;YAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;SAChC,CAAC,CAAC;QACc,YAAO,GAAwB,IAAI,GAAG,CAAC;YACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;YACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;YAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;YACrB,CAAC,SAAS,EAAE,OAAO,CAAC;YACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;SACpB,CAAC,CAAC;qBAO0F,SAAS;;sBAUrF,KAAK;;IAEtB,iBAAiB;QACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAChG,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon || this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-input2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './cat-button2.js';
 import { d as defineCustomElement$2 } from './cat-icon2.js';
 import { d as defineCustomElement$1 } from './cat-spinner2.js';
 
-const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.primary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.primary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.primaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.primaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.secondary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.secondary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondary.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.secondaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:cat-token(\"color.theme.secondaryInverted.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondaryInverted.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondaryInverted.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-success-bg, 0, 115, 230)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.info.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.info.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.info.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.info.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.info.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.info.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-success-text, 0, 115, 230)) !important}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-success-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.success.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.success.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.success.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.success.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.success.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.success.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:cat-token(\"color.theme.warning.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.warning.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.warning.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:cat-token(\"color.theme.warning.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.warning.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.warning.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.danger.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.danger.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.danger.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:cat-token(\"color.theme.danger.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.danger.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.danger.fill-active\", $wrap: false);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}";
+const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-success-bg, 0, 115, 230)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-success-text, 0, 115, 230)) !important}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-success-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-container .label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}";
 
 let nextUniqueId = 0;
 const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLElement {