globuswebcomponents 2.2.0 → 2.2.1

package/dist/collection/components/gb-input-field/gb-input-field.css

@@ -2657,54 +2657,54 @@
 .text-xxs-regular::after{
     margin-top: -0.416em;
 }
-:host{
+:host {
   position: relative;
 }
 
 .input_container,
-.input_with_label{
+.input_with_label {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 }
 
-.label{
-  color: var(--color-text, #4B5565);
+.label {
+  color: var(--color-text, #4b5565);
 }
 
-.hint_text{
+.hint_text {
   color: var(--color-text-subtle, #697586);
 }
 
-.error_text{
-  color: var(--color-text-danger, #B51726);
+.error_text {
+  color: var(--color-text-danger, #b51726);
 }
 
-.content{
+.content {
   width: 100%;
   height: 100%;
   border: none;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
 .content::placeholder,
-.input_like::placeholder{
-  color: var(--color-text-disabled, #CDD5DF);
+.input_like::placeholder {
+  color: var(--color-text-disabled, #cdd5df);
 }
 
 .content:focus,
-.input_like:focus{
+.input_like:focus {
   outline: none;
 }
 
-.icon{
+.icon {
   display: flex;
   align-items: center;
 }
 
-.input{
+.input {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
@@ -2714,73 +2714,73 @@
 
 .input,
 .input.icon_leading,
-.password_input{
-  border: 1px solid var(--color-border-input, #CDD5DF);
-  background: var(--color-background-card, #FFFFFF);
+.password_input {
+  border: 1px solid var(--color-border-input, #cdd5df);
+  background: var(--color-background-card, #ffffff);
 }
 
-.input.leading_text{
+.input.leading_text {
   flex-grow: 1;
   border-radius: var(--rounded-none, 0rem) 0.5rem 0.5rem var(--rounded-none, 0rem);
 }
 
-.leading_text_input{
+.leading_text_input {
   display: flex;
   gap: var(--spacing-none);
   padding: var(--spacing-none);
 }
 
-
-
-.add_on{
+.add_on {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-right: none;
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
 }
 
-.text_input{
+.text_input {
   flex-grow: 1;
   height: 100%;
 }
 
-.trailing_button_text_input, .leading_dropdown_text_input{
+.trailing_button_text_input,
+.leading_dropdown_text_input {
   display: flex;
   flex-grow: 1;
   gap: var(--spacing-2);
 }
 
 .trailing_button_text_input.sm,
-.trailing_button_text_input.md{
+.trailing_button_text_input.md {
   padding: var(--spacing-none) 0 0 var(--spacing-3);
 }
 
 .input.trailing_button.sm.default,
-.input.trailing_button.md.default{
+.input.trailing_button.md.default {
   padding: 0;
 }
 
-.leading_dropdown_dropdown, .trailing_dropdown_dropdown{
+.leading_dropdown_dropdown,
+.trailing_dropdown_dropdown {
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   cursor: pointer;
 }
 
-.dropdown_arrow{
+.dropdown_arrow {
   display: flex;
   align-items: center;
 }
 
-.tick{
+.tick {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-.help_circle{
+.help_circle {
   display: flex;
   align-items: center;
 }
@@ -2790,42 +2790,42 @@
 } */
 
 /* Size Styles */
-.input.sm{
+.input.sm {
   min-height: 2.5rem;
 }
 
-.input.md{
+.input.md {
   min-height: 3rem;
 }
 
 .input.sm.default,
-.input.sm.password_icon_leading{
+.input.sm.password_icon_leading {
   padding: var(--spacing-none) var(--spacing-3);
 }
 
-.input.sm.icon_leading{
+.input.sm.icon_leading {
   position: relative;
   padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);
 }
 
-.input.sm.payment_input{
+.input.sm.payment_input {
   padding: var(--spacing-none) var(--spacing-3);
 }
 
-.input.md.default{
+.input.md.default {
   padding: var(--spacing-none) 0.875rem var(--spacing-none) var(--spacing-3);
 }
 
-.input.md.icon_leading{
+.input.md.icon_leading {
   position: relative;
   padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);
 }
 
-.input.md.password_icon_leading{
+.input.md.password_icon_leading {
   padding: var(--spacing-none) var(--spacing-2) var(--spacing-none) var(--spacing-3);
 }
 
-.input.md.payment_input{
+.input.md.payment_input {
   padding: 0 0.875rem 0 var(--spacing-3);
 }
 
@@ -2833,16 +2833,16 @@
 .input:focus-within,
 .password_input:focus-within,
 .count_text_input:focus-within,
-.input_like_parent:focus-within{
-  border: 1.3px solid var(--color-border-selected, #075DB2);
+.input_like_parent:focus-within {
+  border: 1.3px solid var(--color-border-selected, #075db2);
 }
 
 .input.disabled,
 .password_input.disabled,
 .count_text_input.disabled,
 .action.disabled,
-.input_like_parent.disabled{
-  border: 1px solid var(--color-border-disabled, #E3E8EF);
+.input_like_parent.disabled {
+  border: 1px solid var(--color-border-disabled, #e3e8ef);
 }
 
 .input.disabled,
@@ -2850,51 +2850,51 @@
 .password_input.disabled,
 .count_text_input.disabled,
 .input_like_parent.disabled,
-.input_like.disabled{
-  background: var(--color-background-disabled, #F6F8FA);
-  color: var(--color-text-subtle, #697586); 
+.input_like.disabled {
+  background: var(--color-background-disabled, #f6f8fa);
+  color: var(--color-text-subtle, #697586);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.input_group.disabled{
+.input_group.disabled {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.icon.disabled path[stroke]{
-  stroke: var(--color-icon-disabled, #CDD5DF);
+.icon.disabled path[stroke] {
+  stroke: var(--color-icon-disabled, #cdd5df);
 }
 
 .input.destructive,
 .input.icon_leading.destructive,
 .count_text_input.destructive,
-.input_like_parent.destructive{
-  border: 1px solid var(--color-border-danger, #B51726); 
+.input_like_parent.destructive {
+  border: 1px solid var(--color-border-danger, #b51726);
 }
 
-::slotted([slot="tooltip_label"]){
+::slotted([slot='tooltip_label']) {
   white-space: nowrap;
-  color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
-::slotted([slot="tooltip_supporting_text"]){
+::slotted([slot='tooltip_supporting_text']) {
   min-width: fit-content;
   max-width: 18.5rem;
   color: var(--color-text-subtle, #697586);
   margin-top: 5rem;
 }
 
-::slotted([slot="text"].text_slot){
-  color: var(--color-text, #4B5565);
+::slotted([slot='text'].text_slot) {
+  color: var(--color-text, #4b5565);
 }
 
-::slotted([slot="text"].text_slot.disabled){
-  color: var(--color-text-disabled, #CDD5DF);
+::slotted([slot='text'].text_slot.disabled) {
+  color: var(--color-text-disabled, #cdd5df);
 }
 
 /* Type Styles */
-.password_input{
+.password_input {
   display: flex;
   gap: var(--spacing-3);
   align-items: center;
@@ -2902,43 +2902,43 @@
   border-radius: var(--rounded-sm);
 }
 
-.password_content{
+.password_content {
   display: flex;
   gap: var(--spacing-2);
   padding: 0.625rem var(--spacing-none) 0.625rem 0.875rem;
   flex-grow: 1;
 }
 
-.dropdown{
+.dropdown {
   padding-right: var(--spacing-half);
   padding-left: var(--spacing-3);
 }
 
-.password_icon_leading_content{
+.password_icon_leading_content {
   display: flex;
   align-items: center;
   flex-grow: 1;
   gap: var(--spacing-2);
 }
 
-.count_input{
+.count_input {
   display: flex;
   gap: var(--spacing-none);
 }
 
-.count_text_input{
+.count_text_input {
   display: flex;
   padding: var(--spacing-none) var(--spacing-3);
   align-items: center;
   gap: var(--spacing-2);
   flex: 1 0 0;
   align-self: stretch;
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
 }
 
-.action{
-  border: 1px solid var(--color-border-input, #CDD5DF);
+.action {
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-left: none;
   display: flex;
   /* padding-right: var(--spacing-1); */
@@ -2953,77 +2953,77 @@
   border-right: 0.5px solid var(--color-border-input, #CDD5DF);
 } */
 
-.vertical_line{
+.vertical_line {
   width: 1px;
   height: 100%;
-  background-color: var(--color-border-input, #CDD5DF);
+  background-color: var(--color-border-input, #cdd5df);
   /* border-right: 1px solid var(--color-border-input, #CDD5DF); */
 }
 
-.trailing_dropdown_content{
+.trailing_dropdown_content {
   display: flex;
   align-items: center;
   flex-grow: 1;
   gap: var(--spacing-2);
 }
 
-.country_icon{
+.country_icon {
   display: flex;
   align-items: center;
 }
 
-.dropdown_menu{
-    display: flex;
-    width: fit-content;
-    padding: var(--spacing-none);
-    flex-direction: column;
-    align-items: flex-start;
-    align-items: stretch;
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-border-subtler, #E3E8EF);
-    background: var(--color-surface, #FFFFFF);
-    box-shadow: var(--shadow-sm);
-    position: absolute;
-    z-index: 10;
-    gap: var(--spacing-none);
+.dropdown_menu {
+  display: flex;
+  width: fit-content;
+  padding: var(--spacing-none);
+  flex-direction: column;
+  align-items: flex-start;
+  align-items: stretch;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-sm);
+  position: absolute;
+  z-index: 10;
+  gap: var(--spacing-none);
 }
 
-.dropdown_menu.leading_dropdown.top.sm{
+.dropdown_menu.leading_dropdown.top.sm {
   bottom: 3rem;
   left: 0;
 }
 
-.dropdown_menu.leading_dropdown.top.md{
+.dropdown_menu.leading_dropdown.top.md {
   bottom: 3.5rem;
   left: 0;
 }
 
-.dropdown_menu.leading_dropdown.bottom.sm{
+.dropdown_menu.leading_dropdown.bottom.sm {
   top: 4rem;
   left: 0;
 }
 
-.dropdown_menu.leading_dropdown.bottom.md{
+.dropdown_menu.leading_dropdown.bottom.md {
   top: 4.5rem;
   left: 0;
 }
 
-.dropdown_menu.trailing_dropdown.top.sm{
+.dropdown_menu.trailing_dropdown.top.sm {
   bottom: 3rem;
   right: 0;
 }
 
-.dropdown_menu.trailing_dropdown.top.md{
+.dropdown_menu.trailing_dropdown.top.md {
   bottom: 3.5rem;
   right: 0;
 }
 
-.dropdown_menu.trailing_dropdown.bottom.sm{
+.dropdown_menu.trailing_dropdown.bottom.sm {
   top: 4rem;
   right: 0;
 }
 
-.dropdown_menu.trailing_dropdown.bottom.md{
+.dropdown_menu.trailing_dropdown.bottom.md {
   top: 4.5rem;
   right: 0;
 }
@@ -3040,22 +3040,22 @@
 }
 
 .input_like_parent {
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-radius: var(--rounded-sm);
   display: flex;
   cursor: pointer;
   /* flex-wrap: wrap; */
 }
 
-.input_like_parent.sm{
+.input_like_parent.sm {
   padding: 0.5rem 0.75rem 0.5rem var(--spacing-3);
 }
 
-.input_like_parent.md{
+.input_like_parent.md {
   padding: 0.625rem 0.875rem 0.625rem var(--spacing-3);
 }
 
-.input_field{
+.input_field {
   display: flex;
   gap: var(--spacing-2);
   align-items: center;
@@ -3070,7 +3070,7 @@
 
 .input_like {
   border: none;
-  color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
 .results_display {
@@ -3078,14 +3078,14 @@
   flex-wrap: wrap;
   position: relative;
   gap: 0.5rem;
-  background-color: var(--color-surface, #FFFFFF);
+  background-color: var(--color-surface, #ffffff);
 }
 
-.results_display.disabled{
-  background: var(--color-background-disabled, #F6F8FA);
+.results_display.disabled {
+  background: var(--color-background-disabled, #f6f8fa);
 }
 
-.tags{
+.tags {
   padding-top: 1rem;
 }
 
@@ -3093,45 +3093,62 @@
   display: block;
 }
 
-.tags_dropdown_menu{
-    display: flex;
-    min-width: 100%;
-    width: fit-content;
-    max-height: 15rem;
-    padding: var(--spacing-none);
-    flex-direction: column;
-    align-items: stretch;
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-border-subtler, #E3E8EF);
-    background: var(--color-surface, #FFFFFF);
-    box-shadow: var(--shadow-sm);
-    position: absolute;
-    z-index: 99999;
-    gap: var(--spacing-none);
-    transition: 1s ease-in-out;
-    overflow-y: auto;
-
+.tags_dropdown_menu {
+  display: flex;
+  min-width: 100%;
+  width: fit-content;
+  max-height: 15rem;
+  padding: var(--spacing-none);
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-sm);
+  position: absolute;
+  z-index: 99999;
+  gap: var(--spacing-none);
+  transition: 1s ease-in-out;
+  overflow-y: auto;
 }
 
-.tags_dropdown_menu.top{
+.tags_dropdown_menu.top {
   bottom: 105%;
 }
 
-.tags_dropdown_menu.bottom{
+.tags_dropdown_menu.bottom {
   top: 105%;
 }
 
-.input_close_button{
+.input_close_button {
   position: absolute;
   z-index: 9999;
 }
 
-.input_close_button.sm{
+.input_close_button.sm {
   right: 0.2rem;
   top: 0.15rem;
 }
 
-.input_close_button.md{
+.input_close_button.md {
   right: 0.3rem;
   top: 0.25rem;
-}
+}
+
+.loader {
+  border: 3px solid var(--color-background-gray, #cdd5df); /* Light grey */
+  border-top: 3px solid var(--color-background-selected, #075db2); /* Blue */
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}