vrembem 4.0.0-next.4 → 4.0.0-next.6

package/dev/index.css

@@ -421,66 +421,100 @@ input::-moz-placeholder {
   font-size: 16px;
 }
 
+:root {
+  --vb-button-size: 2.5rem;
+  --vb-button-padding: calc(0.5em - 1px) 1em;
+  --vb-button-gap: 0.5rem;
+  --vb-button-border-width: 1px;
+  --vb-button-border-radius: 0.25rem;
+  --vb-button-font-size: 1em;
+  --vb-button-font-weight: inherit;
+  --vb-button-line-height: 1.625;
+  --vb-button-transition-property: background, color, border-color, box-shadow;
+  --vb-button-transition-duration: 0.15s;
+  --vb-button-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --vb-button-background: transparent;
+  --vb-button-background-hover: transparent;
+  --vb-button-background-active: transparent;
+  --vb-button-foreground: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
+  --vb-button-foreground-hover: ;
+  --vb-button-foreground-active: ;
+  --vb-button-border-color: var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
+  --vb-button-border-color-hover: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
+  --vb-button-border-color-active: ;
+  --vb-button-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  --vb-button-box-shadow-focus: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
+  --vb-button-loading-size: 1em;
+  --vb-button-loading-border: 2px solid;
+  --vb-button-loading-animation-duration: 0.6s;
+  --vb-button-loading-animation-timing-function: linear;
+  --vb-button-disabled-opacity: 0.6;
+}
+
 .button {
   position: relative;
   display: inline-flex;
+  gap: var(--vb-button-gap);
   align-items: center;
   justify-content: center;
-  min-width: 2.5rem;
-  height: 2.5rem;
-  padding: calc(0.5em - 1px) 1em;
-  transition-property: box-shadow, outline, outline-offset;
-  transition-duration: 0.15s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  min-width: var(--vb-button-size);
+  height: var(--vb-button-size);
+  padding: var(--vb-button-padding);
+  transition-property: var(--vb-button-transition-property);
+  transition-duration: var(--vb-button-transition-duration);
+  transition-timing-function: var(--vb-button-transition-timing-function);
   outline: none;
-  border: 1px solid var(--vb-border-color-dark, rgba(0, 0, 0, 0.2));
-  border-radius: 0.25rem;
-  background: transparent;
+  border: var(--vb-button-border-width) solid var(--vb-button-border-color);
+  border-radius: var(--vb-button-border-radius);
+  background: var(--vb-button-background);
   background-clip: border-box;
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-  color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%)));
+  box-shadow: var(--vb-button-box-shadow);
+  color: var(--vb-button-foreground);
   font-family: inherit;
-  font-size: 1em;
-  font-weight: inherit;
-  line-height: 1.625;
+  font-size: var(--vb-button-font-size);
+  font-weight: var(--vb-button-font-weight);
+  line-height: var(--vb-button-font-height);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
 }
-.button > * + * {
-  margin-left: 0.5rem;
-}
 .button:disabled:not(.is-loading) {
-  opacity: 0.6;
+  opacity: var(--vb-button-disabled-opacity);
   pointer-events: none;
 }
 .button:hover {
-  border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
-  background-color: transparent;
+  border-color: var(--vb-button-border-color-hover);
+  background-color: var(--vb-button-background-hover);
+  box-shadow: var(--vb-button-box-shadow-hover);
+  color: var(--vb-button-foreground-hover);
 }
-.button:focus {
-  border-color: var(--vb-border-color-darker, rgba(0, 0, 0, 0.3));
-  background-color: transparent;
-  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
+.button:focus-visible {
+  border-color: var(--vb-button-border-color-hover);
+  background-color: var(--vb-button-background-hover);
+  box-shadow: var(--vb-button-box-shadow-focus);
+  color: var(--vb-button-foreground-hover);
 }
 .button:active {
-  background-color: rgba(0, 0, 0, 0.05);
+  border-color: var(--vb-button-border-color-active);
+  background-color: var(--vb-button-background-active);
+  box-shadow: var(--vb-button-box-shadow-active);
+  color: var(--vb-button-foreground-active);
 }
 .button.is-loading {
   color: transparent !important;
   pointer-events: none;
 }
 .button.is-loading::after {
-  width: 1em;
-  height: 1em;
+  width: var(--vb-button-loading-size);
+  height: var(--vb-button-loading-size);
   content: "";
   position: absolute;
-  top: calc(50% - (1em * 0.5));
-  left: calc(50% - (1em * 0.5));
-  animation: spin 0.6s infinite linear;
-  border: 2px solid;
+  top: calc(50% - var(--vb-button-loading-size) * 0.5);
+  left: calc(50% - var(--vb-button-loading-size) * 0.5);
+  animation: spin var(--vb-button-loading-animation-duration) infinite var(--vb-button-loading-animation-timing-function);
+  border: var(--vb-button-loading-border);
   border-radius: 9999px;
-  border-color: var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) var(--vb-foreground, var(--vb-neutral-20, hsl(214, 20%, 20%))) transparent transparent;
+  border-color: var(--vb-button-foreground) var(--vb-button-foreground) transparent transparent;
 }
 
 @keyframes spin {
@@ -552,121 +586,83 @@ input::-moz-placeholder {
   }
 }
 .button_color_primary {
-  border-color: transparent;
-  background-color: hsl(152, 60%, 50%);
-  box-shadow: 0 0 0 0 rgba(51, 204, 133, 0);
-  color: white;
-}
-.button_color_primary:hover {
-  border-color: transparent;
-  background-color: #2eb877;
-}
-.button_color_primary:focus {
-  border-color: transparent;
-  background-color: #2eb877;
-  box-shadow: 0 0 0 0.2rem rgba(51, 204, 133, 0.5);
-}
-.button_color_primary:active {
-  border-color: transparent;
-  background-color: #29a36a;
-}
-.button_color_primary.is-loading::after {
-  border-color: white white transparent transparent;
+  --vb-button-background: var(--vb-primary-50, hsl(152, 60%, 50%));
+  --vb-button-background-hover: var(--vb-primary-40, hsl(152, 60%, 40%));
+  --vb-button-background-active: var(--vb-primary-30, hsl(152, 60%, 30%));
+  --vb-button-foreground: white;
+  --vb-button-foreground-hover: white;
+  --vb-button-foreground-active: white;
+  --vb-button-border-color: transparent;
+  --vb-button-border-color-hover: transparent;
+  --vb-button-border-color-active: transparent;
+  --vb-button-box-shadow: 0 0 0 0 hsl(152deg, 60%, 50%, 0%);
+  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(152deg, 60%, 50%, 50%);
 }
 
 .button_color_secondary {
-  border-color: transparent;
-  background-color: hsl(214, 50%, 50%);
-  box-shadow: 0 0 0 0 rgba(64, 119, 191, 0);
-  color: white;
-}
-.button_color_secondary:hover {
-  border-color: transparent;
-  background-color: #396bac;
-}
-.button_color_secondary:focus {
-  border-color: transparent;
-  background-color: #396bac;
-  box-shadow: 0 0 0 0.2rem rgba(64, 119, 191, 0.5);
-}
-.button_color_secondary:active {
-  border-color: transparent;
-  background-color: #335f99;
-}
-.button_color_secondary.is-loading::after {
-  border-color: white white transparent transparent;
+  --vb-button-background: var(--vb-secondary-50, hsl(214, 50%, 50%));
+  --vb-button-background-hover: var(--vb-secondary-40, hsl(214, 50%, 40%));
+  --vb-button-background-active: var(--vb-secondary-30, hsl(214, 50%, 30%));
+  --vb-button-foreground: white;
+  --vb-button-foreground-hover: white;
+  --vb-button-foreground-active: white;
+  --vb-button-border-color: transparent;
+  --vb-button-border-color-hover: transparent;
+  --vb-button-border-color-active: transparent;
+  --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 50%, 50%, 0%);
+  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(214deg, 50%, 50%, 50%);
 }
 
 .button_color_neutral {
-  border-color: transparent;
-  background-color: hsl(214, 20%, 50%);
-  box-shadow: 0 0 0 0 rgba(102, 124, 153, 0);
-  color: white;
-}
-.button_color_neutral:hover {
-  border-color: transparent;
-  background-color: #5c708a;
-}
-.button_color_neutral:focus {
-  border-color: transparent;
-  background-color: #5c708a;
-  box-shadow: 0 0 0 0.2rem rgba(102, 124, 153, 0.5);
-}
-.button_color_neutral:active {
-  border-color: transparent;
-  background-color: #52637a;
-}
-.button_color_neutral.is-loading::after {
-  border-color: white white transparent transparent;
+  --vb-button-background: var(--vb-neutral-50, hsl(214, 20%, 50%));
+  --vb-button-background-hover: var(--vb-neutral-40, hsl(214, 20%, 40%));
+  --vb-button-background-active: var(--vb-neutral-30, hsl(214, 20%, 30%));
+  --vb-button-foreground: white;
+  --vb-button-foreground-hover: white;
+  --vb-button-foreground-active: white;
+  --vb-button-border-color: transparent;
+  --vb-button-border-color-hover: transparent;
+  --vb-button-border-color-active: transparent;
+  --vb-button-box-shadow: 0 0 0 0 hsl(214deg, 20%, 50%, 0%);
+  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(214deg, 20%, 50%, 50%);
 }
 
 .button_color_important {
-  border-color: transparent;
-  background-color: hsl(0, 80%, 50%);
-  box-shadow: 0 0 0 0 rgba(230, 26, 26, 0);
-  color: white;
-}
-.button_color_important:hover {
-  border-color: transparent;
-  background-color: #cf1717;
-}
-.button_color_important:focus {
-  border-color: transparent;
-  background-color: #cf1717;
-  box-shadow: 0 0 0 0.2rem rgba(230, 26, 26, 0.5);
-}
-.button_color_important:active {
-  border-color: transparent;
-  background-color: #b81414;
-}
-.button_color_important.is-loading::after {
-  border-color: white white transparent transparent;
+  --vb-button-background: var(--vb-important-50, hsl(0, 80%, 50%));
+  --vb-button-background-hover: var(--vb-important-40, hsl(0, 80%, 40%));
+  --vb-button-background-active: var(--vb-important-30, hsl(0, 80%, 30%));
+  --vb-button-foreground: white;
+  --vb-button-foreground-hover: white;
+  --vb-button-foreground-active: white;
+  --vb-button-border-color: transparent;
+  --vb-button-border-color-hover: transparent;
+  --vb-button-border-color-active: transparent;
+  --vb-button-box-shadow: 0 0 0 0 hsl(0deg, 80%, 50%, 0%);
+  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(0deg, 80%, 50%, 50%);
 }
 
 .button_icon {
-  padding: calc(0.5em - 1px);
+  --vb-button-padding: calc(0.5em - 1px);
 }
 .button_icon.button_size_sm {
-  padding: calc(0.25rem - 1px);
+  --vb-button-padding: calc(0.25rem - 1px);
 }
 .button_icon.button_size_lg {
-  padding: calc(0.648rem - 1px);
+  --vb-button-padding: calc(0.648rem - 1px);
 }
 
 .button_size_sm {
-  min-width: 1.875rem;
-  height: 1.875rem;
-  padding: calc(0.25rem - 1px) 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.375;
+  --vb-button-size: 1.875rem;
+  --vb-button-padding: calc(0.25rem - 1px) 0.5rem;
+  --vb-button-font-size: 0.875rem;
+  --vb-button-line-height: 1.375;
 }
 
 .button_size_lg {
-  min-width: 3.125rem;
-  height: 3.125rem;
-  padding: calc(0.648rem - 1px) 1.5rem;
-  font-size: 1.125rem;
-  line-height: 1.875;
+  --vb-button-size: 3.125rem;
+  --vb-button-padding: calc(0.648rem - 1px) 1.5rem;
+  --vb-button-font-size: 1.125rem;
+  --vb-button-line-height: 1.875;
 }
 
 .card {
@@ -1976,203 +1972,86 @@ input::-moz-placeholder {
 }
 
 .level {
-  margin-top: -0.5em;
-  margin-left: -0.5em;
+  gap: 0.5em;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.level > * {
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-.level + .level {
-  margin-top: 0;
-}
 .level > * {
   flex: 0 0 auto;
-  max-width: calc(100% - 0.5em);
+  max-width: 100%;
 }
 
 .level_gap_none {
-  margin-top: 0;
-  margin-left: 0;
-}
-.level_gap_none > * {
-  margin-top: 0;
-  margin-left: 0;
-}
-.level_gap_none > * {
-  max-width: 100%;
+  gap: 0;
 }
 
 .level_gap-x_none {
-  margin-left: 0;
-}
-.level_gap-x_none > * {
-  margin-left: 0;
-}
-.level_gap-x_none > * {
-  max-width: 100%;
+  column-gap: 0;
 }
 
 .level_gap-y_none {
-  margin-top: 0;
-}
-.level_gap-y_none > * {
-  margin-top: 0;
+  row-gap: 0;
 }
 
 .level_gap_xs {
-  margin-top: -1px;
-  margin-left: -1px;
-}
-.level_gap_xs > * {
-  margin-top: 1px;
-  margin-left: 1px;
-}
-.level_gap_xs > * {
-  max-width: calc(100% - 1px);
+  gap: 1px;
 }
 
 .level_gap-x_xs {
-  margin-left: -1px;
-}
-.level_gap-x_xs > * {
-  margin-left: 1px;
-}
-.level_gap-x_xs > * {
-  max-width: calc(100% - 1px);
+  column-gap: 1px;
 }
 
 .level_gap-y_xs {
-  margin-top: -1px;
-}
-.level_gap-y_xs > * {
-  margin-top: 1px;
+  row-gap: 1px;
 }
 
 .level_gap_sm {
-  margin-top: -0.25em;
-  margin-left: -0.25em;
-}
-.level_gap_sm > * {
-  margin-top: 0.25em;
-  margin-left: 0.25em;
-}
-.level_gap_sm > * {
-  max-width: calc(100% - 0.25em);
+  gap: 0.25em;
 }
 
 .level_gap-x_sm {
-  margin-left: -0.25em;
-}
-.level_gap-x_sm > * {
-  margin-left: 0.25em;
-}
-.level_gap-x_sm > * {
-  max-width: calc(100% - 0.25em);
+  column-gap: 0.25em;
 }
 
 .level_gap-y_sm {
-  margin-top: -0.25em;
-}
-.level_gap-y_sm > * {
-  margin-top: 0.25em;
+  row-gap: 0.25em;
 }
 
 .level_gap_md {
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-}
-.level_gap_md > * {
-  margin-top: 0.5em;
-  margin-left: 0.5em;
-}
-.level_gap_md > * {
-  max-width: calc(100% - 0.5em);
+  gap: 0.5em;
 }
 
 .level_gap-x_md {
-  margin-left: -0.5em;
-}
-.level_gap-x_md > * {
-  margin-left: 0.5em;
-}
-.level_gap-x_md > * {
-  max-width: calc(100% - 0.5em);
+  column-gap: 0.5em;
 }
 
 .level_gap-y_md {
-  margin-top: -0.5em;
-}
-.level_gap-y_md > * {
-  margin-top: 0.5em;
+  row-gap: 0.5em;
 }
 
 .level_gap_lg {
-  margin-top: -1em;
-  margin-left: -1em;
-}
-.level_gap_lg > * {
-  margin-top: 1em;
-  margin-left: 1em;
-}
-.level_gap_lg > * {
-  max-width: calc(100% - 1em);
+  gap: 1em;
 }
 
 .level_gap-x_lg {
-  margin-left: -1em;
-}
-.level_gap-x_lg > * {
-  margin-left: 1em;
-}
-.level_gap-x_lg > * {
-  max-width: calc(100% - 1em);
+  column-gap: 1em;
 }
 
 .level_gap-y_lg {
-  margin-top: -1em;
-}
-.level_gap-y_lg > * {
-  margin-top: 1em;
+  row-gap: 1em;
 }
 
 .level_gap_xl {
-  margin-top: -1.5em;
-  margin-left: -1.5em;
-}
-.level_gap_xl > * {
-  margin-top: 1.5em;
-  margin-left: 1.5em;
-}
-.level_gap_xl > * {
-  max-width: calc(100% - 1.5em);
+  gap: 1.5em;
 }
 
 .level_gap-x_xl {
-  margin-left: -1.5em;
-}
-.level_gap-x_xl > * {
-  margin-left: 1.5em;
-}
-.level_gap-x_xl > * {
-  max-width: calc(100% - 1.5em);
+  column-gap: 1.5em;
 }
 
 .level_gap-y_xl {
-  margin-top: -1.5em;
-}
-.level_gap-y_xl > * {
-  margin-top: 1.5em;
-}
-
-.level_nowrap {
-  flex-wrap: nowrap;
-}
-.level_nowrap > * {
-  flex-shrink: 1;
+  row-gap: 1.5em;
 }
 
 .media {
@@ -5161,164 +5040,87 @@ input::-moz-placeholder {
 }
 
 .flex-gap {
-  margin-top: -1em !important;
-  margin-left: -1em !important;
-}
-.flex-gap > * {
-  margin-top: 1em !important;
-  margin-left: 1em !important;
+  gap: 1em !important;
 }
 
 .flex-gap-none {
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-}
-.flex-gap-none > * {
-  margin-top: 0 !important;
-  margin-left: 0 !important;
+  gap: 0 !important;
 }
 
 .flex-gap-xs {
-  margin-top: -0.25em !important;
-  margin-left: -0.25em !important;
-}
-.flex-gap-xs > * {
-  margin-top: 0.25em !important;
-  margin-left: 0.25em !important;
+  gap: 0.25em !important;
 }
 
 .flex-gap-sm {
-  margin-top: -0.5em !important;
-  margin-left: -0.5em !important;
-}
-.flex-gap-sm > * {
-  margin-top: 0.5em !important;
-  margin-left: 0.5em !important;
+  gap: 0.5em !important;
 }
 
 .flex-gap-md {
-  margin-top: -1em !important;
-  margin-left: -1em !important;
-}
-.flex-gap-md > * {
-  margin-top: 1em !important;
-  margin-left: 1em !important;
+  gap: 1em !important;
 }
 
 .flex-gap-lg {
-  margin-top: -1.5em !important;
-  margin-left: -1.5em !important;
-}
-.flex-gap-lg > * {
-  margin-top: 1.5em !important;
-  margin-left: 1.5em !important;
+  gap: 1.5em !important;
 }
 
 .flex-gap-xl {
-  margin-top: -2em !important;
-  margin-left: -2em !important;
-}
-.flex-gap-xl > * {
-  margin-top: 2em !important;
-  margin-left: 2em !important;
+  gap: 2em !important;
 }
 
 .flex-gap-x {
-  margin-left: -1em !important;
-}
-.flex-gap-x > * {
-  margin-left: 1em !important;
+  column-gap: 1em !important;
 }
 
 .flex-gap-x-none {
-  margin-left: 0 !important;
-}
-.flex-gap-x-none > * {
-  margin-left: 0 !important;
+  column-gap: 0 !important;
 }
 
 .flex-gap-x-xs {
-  margin-left: -0.25em !important;
-}
-.flex-gap-x-xs > * {
-  margin-left: 0.25em !important;
+  column-gap: 0.25em !important;
 }
 
 .flex-gap-x-sm {
-  margin-left: -0.5em !important;
-}
-.flex-gap-x-sm > * {
-  margin-left: 0.5em !important;
+  column-gap: 0.5em !important;
 }
 
 .flex-gap-x-md {
-  margin-left: -1em !important;
-}
-.flex-gap-x-md > * {
-  margin-left: 1em !important;
+  column-gap: 1em !important;
 }
 
 .flex-gap-x-lg {
-  margin-left: -1.5em !important;
-}
-.flex-gap-x-lg > * {
-  margin-left: 1.5em !important;
+  column-gap: 1.5em !important;
 }
 
 .flex-gap-x-xl {
-  margin-left: -2em !important;
-}
-.flex-gap-x-xl > * {
-  margin-left: 2em !important;
+  column-gap: 2em !important;
 }
 
 .flex-gap-y {
-  margin-top: -1em !important;
-}
-.flex-gap-y > * {
-  margin-top: 1em !important;
+  row-gap: 1em !important;
 }
 
 .flex-gap-y-none {
-  margin-top: 0 !important;
-}
-.flex-gap-y-none > * {
-  margin-top: 0 !important;
+  row-gap: 0 !important;
 }
 
 .flex-gap-y-xs {
-  margin-top: -0.25em !important;
-}
-.flex-gap-y-xs > * {
-  margin-top: 0.25em !important;
+  row-gap: 0.25em !important;
 }
 
 .flex-gap-y-sm {
-  margin-top: -0.5em !important;
-}
-.flex-gap-y-sm > * {
-  margin-top: 0.5em !important;
+  row-gap: 0.5em !important;
 }
 
 .flex-gap-y-md {
-  margin-top: -1em !important;
-}
-.flex-gap-y-md > * {
-  margin-top: 1em !important;
+  row-gap: 1em !important;
 }
 
 .flex-gap-y-lg {
-  margin-top: -1.5em !important;
-}
-.flex-gap-y-lg > * {
-  margin-top: 1.5em !important;
+  row-gap: 1.5em !important;
 }
 
 .flex-gap-y-xl {
-  margin-top: -2em !important;
-}
-.flex-gap-y-xl > * {
-  margin-top: 2em !important;
+  row-gap: 2em !important;
 }
 
 .font-family-sans {
@@ -5334,7 +5136,7 @@ input::-moz-placeholder {
 }
 
 .font-size-base {
-  font-size: 16px !important;
+  font-size: 1rem !important;
 }
 
 .font-size-sm {