q2-tecton-elements 1.10.6 → 1.10.9

package/dist/collection/components/q2-btn/styles.css

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 :host(.sr),
 :host(.sr) button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .sr,
 .sr button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 :host {
@@ -78,24 +78,24 @@ button {
 }
 
 :host {
-  --comp-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-button-primary-bg, #2e2e2e));
-  --comp-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-button-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));
+  --comp-btn-primary-bg: var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e));
+  --comp-btn-primary-font-color: var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--tct-white, var(--app-white, #ffffff))));
   --comp-btn-fallback-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   --comp-btn-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19),
       0 3px 3px rgba(0, 0, 0, 0.23);
   --comp-btn-neutral-fallback-hover-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.24),
       0 3px 3px rgba(0, 0, 0, 0.36);
-  --comp-btn-primary-box-shadow: var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-btn-primary-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow));
+  --comp-btn-primary-box-shadow: var(--tct-btn-primary-box-shadow, var(--t-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow)));
+  --comp-btn-primary-hover-box-shadow: var(--tct-btn-primary-hover-box-shadow, var(--t-btn-primary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));
   --comp-btn-secondary-bg: var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc));
-  --comp-btn-secondary-font-color: var(--tct-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e));
-  --comp-btn-secondary-box-shadow: var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-btn-secondary-hover-box-shadow: var(--tct-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow));
-  --comp-btn-tween: var(--tct-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
+  --comp-btn-secondary-font-color: var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--t-button-default-font-color, #2e2e2e)));
+  --comp-btn-secondary-box-shadow: var(--tct-btn-secondary-box-shadow, var(--t-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow)));
+  --comp-btn-secondary-hover-box-shadow: var(--tct-btn-secondary-hover-box-shadow, var(--t-btn-secondary-hover-box-shadow, var(--comp-btn-fallback-hover-box-shadow)));
+  --comp-btn-tween: var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));
   --comp-btn-neutral-bg: var(--tct-btn-neutral-bg, transparent);
-  --comp-btn-neutral-font-color: var(--tct-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e));
-  --comp-btn-neutral-box-shadow: var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));
-  --comp-btn-neutral-hover-box-shadow: var(--tct-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow));
+  --comp-btn-neutral-font-color: var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--t-button-default-font-color, #2e2e2e)));
+  --comp-btn-neutral-box-shadow: var(--tct-btn-neutral-box-shadow, var(--t-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow)));
+  --comp-btn-neutral-hover-box-shadow: var(--tct-btn-neutral-hover-box-shadow, var(--t-btn-neutral-hover-box-shadow, var(--comp-btn-neutral-fallback-hover-box-shadow)));
 }
 
 button {
@@ -115,14 +115,14 @@ button {
   outline: 0;
 }
 button:disabled {
-  opacity: var(--tct-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
+  opacity: var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));
   cursor: not-allowed;
 }
 :host([size="1"]) button {
   padding: var(--tct-scale-1, var(--app-scale-1, 5px));
 }
 :host([color]:not([size])) button, :host([intent]:not([size])) button {
-  padding: var(--tct-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px)));
+  padding: var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2, 10px))));
 }
 :host([size="2"]) button {
   padding: var(--tct-scale-2, var(--app-scale-2, 10px));
@@ -138,23 +138,23 @@ button:disabled {
 }
 :host([color]) button, :host([intent]) button {
   border-style: solid;
-  font-size: var(--tct-btn-font-size, inherit);
+  font-size: var(--tct-btn-font-size, var(--t-btn-font-size, inherit));
 }
 :host([color=primary]) button, :host([intent=workflow-primary]) button {
   background: var(--comp-btn-primary-bg);
   color: var(--comp-btn-primary-font-color);
-  border-color: var(--tct-btn-primary-border-color, transparent);
-  border-width: var(--tct-btn-primary-border-width, 0);
-  border-radius: var(--tct-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
+  border-color: var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent));
+  border-width: var(--tct-btn-primary-border-width, var(--t-btn-primary-border-width, 0));
+  border-radius: var(--tct-btn-primary-border-radius, var(--t-btn-primary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   box-shadow: var(--comp-btn-primary-box-shadow);
-  font-weight: var(--tct-btn-primary-font-weight, 600);
-  text-transform: var(--tct-btn-primary-text-transform, none);
-  letter-spacing: var(--tct-btn-primary-letter-spacing, normal);
+  font-weight: var(--tct-btn-primary-font-weight, var(--t-btn-primary-font-weight, 600));
+  text-transform: var(--tct-btn-primary-text-transform, var(--t-btn-primary-text-transform, none));
+  letter-spacing: var(--tct-btn-primary-letter-spacing, var(--t-btn-primary-letter-spacing, normal));
 }
 :host([color=primary]) button:enabled:hover, :host([color=primary]) button:enabled:focus, :host([color=primary]) button:enabled:active, :host([intent=workflow-primary]) button:enabled:hover, :host([intent=workflow-primary]) button:enabled:focus, :host([intent=workflow-primary]) button:enabled:active {
-  background: var(--tct-btn-primary-hover-bg, var(--t-button-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));
-  color: var(--tct-btn-primary-hover-font-color, var(--t-button-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));
-  border-color: var(--tct-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, transparent));
+  background: var(--tct-btn-primary-hover-bg, var(--t-btn-primary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));
+  color: var(--tct-btn-primary-hover-font-color, var(--t-btn-primary-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));
+  border-color: var(--tct-btn-primary-hover-border-color, var(--t-btn-primary-hover-border-color, var(--tct-btn-primary-border-color, var(--t-btn-primary-border-color, transparent))));
 }
 :host([color=primary]) button:hover:enabled, :host([color=primary]) button:active:enabled, :host([intent=workflow-primary]) button:hover:enabled, :host([intent=workflow-primary]) button:active:enabled {
   box-shadow: var(--comp-btn-primary-hover-box-shadow);
@@ -163,25 +163,25 @@ button:disabled {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-primary-hover-box-shadow, 0 0 0 2px #33b4ff)));
 }
 :host([color=primary]) button:disabled, :host([intent=workflow-primary]) button:disabled {
-  background: var(--tct-btn-primary-disabled-bg, var(--comp-btn-primary-bg));
-  color: var(--tct-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color));
-  box-shadow: var(--tct-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow));
+  background: var(--tct-btn-primary-disabled-bg, var(--t-btn-primary-disabled-bg, var(--comp-btn-primary-bg)));
+  color: var(--tct-btn-primary-disabled-font-color, var(--t-btn-primary-disabled-font-color, var(--comp-btn-primary-font-color)));
+  box-shadow: var(--tct-btn-primary-disabled-box-shadow, var(--t-btn-primary-disabled-box-shadow, var(--comp-btn-primary-box-shadow)));
 }
 :host([color=secondary]) button, :host([intent=workflow-secondary]) button {
   background: var(--comp-btn-secondary-bg);
-  color: var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-button-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));
-  border-color: var(--tct-btn-secondary-border-color, transparent);
-  border-width: var(--tct-btn-secondary-border-width, 0);
-  border-radius: var(--tct-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
+  color: var(--comp-btn-secondary-font-color, var(--tct-btn-secondary-font-color, var(--t-btn-secondary-font-color, var(--tct-white, var(--app-white, #ffffff)))));
+  border-color: var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent));
+  border-width: var(--tct-btn-secondary-border-width, var(--t-btn-secondary-border-width, 0));
+  border-radius: var(--tct-btn-secondary-border-radius, var(--t-btn-secondary-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   box-shadow: var(--comp-btn-secondary-box-shadow);
-  font-weight: var(--tct-btn-secondary-font-weight, 600);
-  text-transform: var(--tct-btn-secondary-text-transform, none);
-  letter-spacing: var(--tct-btn-secondary-letter-spacing, normal);
+  font-weight: var(--tct-btn-secondary-font-weight, var(--t-btn-secondary-font-weight, 600));
+  text-transform: var(--tct-btn-secondary-text-transform, var(--t-btn-secondary-text-transform, none));
+  letter-spacing: var(--tct-btn-secondary-letter-spacing, var(--t-btn-secondary-letter-spacing, normal));
 }
 :host([color=secondary]) button:enabled:hover, :host([color=secondary]) button:enabled:focus, :host([color=secondary]) button:enabled:active, :host([intent=workflow-secondary]) button:enabled:hover, :host([intent=workflow-secondary]) button:enabled:focus, :host([intent=workflow-secondary]) button:enabled:active {
-  background: var(--tct-btn-secondary-hover-bg, var(--t-button-default-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));
-  color: var(--tct-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));
-  border-color: var(--tct-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, transparent));
+  background: var(--tct-btn-secondary-hover-bg, var(--t-btn-secondary-hover-bg, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));
+  color: var(--tct-btn-secondary-hover-font-color, var(--t-btn-secondary-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff)))));
+  border-color: var(--tct-btn-secondary-hover-border-color, var(--t-btn-secondary-hover-border-color, var(--tct-btn-secondary-border-color, var(--t-btn-secondary-border-color, transparent))));
 }
 :host([color=secondary]) button:hover:enabled, :host([color=secondary]) button:active:enabled, :host([intent=workflow-secondary]) button:hover:enabled, :host([intent=workflow-secondary]) button:active:enabled {
   box-shadow: var(--comp-btn-secondary-hover-box-shadow);
@@ -190,25 +190,25 @@ button:disabled {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-secondary-hover-box-shadow)));
 }
 :host([color=secondary]) button:disabled, :host([intent=workflow-secondary]) button:disabled {
-  background: var(--tct-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg));
-  color: var(--tct-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color));
-  box-shadow: var(--tct-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow));
+  background: var(--tct-btn-secondary-disabled-bg, var(--t-btn-secondary-disabled-bg, var(--comp-btn-secondary-bg)));
+  color: var(--tct-btn-secondary-disabled-font-color, var(--t-btn-secondary-disabled-font-color, var(--comp-btn-secondary-font-color)));
+  box-shadow: var(--tct-btn-secondary-disabled-box-shadow, var(--t-btn-secondary-disabled-box-shadow, var(--comp-btn-secondary-box-shadow)));
 }
 :host([intent=neutral]) button {
-  background: var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, transparent));
-  color: var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-button-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));
-  border-color: var(--tct-btn-neutral-border-color, transparent);
-  border-width: var(--tct-btn-neutral-border-width, 0);
-  border-radius: var(--tct-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
+  background: var(--comp-btn-neutral-bg, var(--tct-btn-neutral-bg, var(--t-btn-neutral-bg, transparent)));
+  color: var(--comp-btn-neutral-font-color, var(--tct-btn-neutral-font-color, var(--t-btn-neutral-font-color, var(--tct-gray-1, var(--t-gray-1, var(--tct-black, var(--app-black, #0d0d0d)))))));
+  border-color: var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent));
+  border-width: var(--tct-btn-neutral-border-width, var(--t-btn-neutral-border-width, 0));
+  border-radius: var(--tct-btn-neutral-border-radius, var(--t-btn-neutral-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   box-shadow: var(--comp-btn-neutral-box-shadow);
-  font-weight: var(--tct-btn-neutral-font-weight, 600);
-  text-transform: var(--tct-btn-neutral-text-transform, none);
-  letter-spacing: var(--tct-btn-neutral-letter-spacing, normal);
+  font-weight: var(--tct-btn-neutral-font-weight, var(--t-btn-neutral-font-weight, 600));
+  text-transform: var(--tct-btn-neutral-text-transform, var(--t-btn-neutral-text-transform, none));
+  letter-spacing: var(--tct-btn-neutral-letter-spacing, var(--t-btn-neutral-letter-spacing, normal));
 }
 :host([intent=neutral]) button:enabled:hover, :host([intent=neutral]) button:enabled:focus, :host([intent=neutral]) button:enabled:active {
-  background: var(--tct-btn-neutral-hover-bg, transparent);
-  color: var(--tct-btn-neutral-hover-font-color, var(--t-button-default-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));
-  border-color: var(--tct-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, transparent));
+  background: var(--tct-btn-neutral-hover-bg, var(--t-btn-neutral-hover-bg, transparent));
+  color: var(--tct-btn-neutral-hover-font-color, var(--t-btn-neutral-hover-font-color, var(--tct-white, var(--app-white, #ffffff))));
+  border-color: var(--tct-btn-neutral-hover-border-color, var(--t-btn-neutral-hover-border-color, var(--tct-btn-neutral-border-color, var(--t-btn-neutral-border-color, transparent))));
 }
 :host([intent=neutral]) button:hover:enabled, :host([intent=neutral]) button:active:enabled {
   box-shadow: var(--comp-btn-neutral-hover-box-shadow);
@@ -217,41 +217,41 @@ button:disabled {
   box-shadow: var(--tct-global-focus, var(--const-global-focus, var(--comp-btn-neutral-hover-box-shadow)));
 }
 :host([intent=neutral]) button:disabled {
-  background: var(--tct-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg));
-  color: var(--tct-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color));
+  background: var(--tct-btn-neutral-disabled-bg, var(--t-btn-neutral-disabled-bg, var(--comp-btn-neutral-bg)));
+  color: var(--tct-btn-neutral-disabled-font-color, var(--t-btn-neutral-disabled-font-color, var(--comp-btn-neutral-font-color)));
   box-shadow: var(--tct-btn-neutral-disabled-box-shadow, var(--comp-btn-neutral-box-shadow));
 }
 :host button.icon-only {
-  width: var(--tct-btn-icon-width, 44px);
-  height: var(--tct-btn-icon-height, 44px);
-  border-radius: var(--tct-btn-icon-border-radius, 0);
+  width: var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));
+  height: var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));
+  border-radius: var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, 0));
 }
 :host button.icon-only:hover, :host button.icon-only:focus {
-  background-color: var(--tct-btn-icon-hover-bg, var(--tct-gray-14, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
+  background-color: var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
 }
 :host(:not([intent])[active]) button.icon-only {
-  background-color: var(--tct-btn-icon-active-bg, var(--tct-btn-icon-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
+  background-color: var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
 }
 :host(:not([intent])) button.icon-only:hover *, :host(:not([intent])) button.icon-only:focus *, :host(:not([intent])[active]) button.icon-only * {
-  color: var(--tct-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808)));
+  color: var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))));
 }
 :host([badge]) button {
-  padding: var(--tct-btn-badge-padding, 2px 5px);
-  font-size: var(--tct-btn-badge-font-size, var(--tct-btn-font-size, inherit));
-  border-radius: var(--tct-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
-  background-color: var(--tct-btn-badge-bg, transparent);
-  color: var(--tct-btn-badge-font-color, inherit);
+  padding: var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));
+  font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct---btn-font-size, var(--t---btn-font-size, inherit))));
+  border-radius: var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
+  background-color: var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));
+  color: var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit));
 }
 :host([badge]) button ::slotted(q2-icon) {
   --tct-icon-size: 1em;
 }
 :host([badge]:hover) button:enabled {
-  background-color: var(--tct-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
-  color: var(--tct-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040)))));
+  background-color: var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))));
+  color: var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))));
 }
 :host(.selected[badge]) button, :host([active][badge]) button {
-  background-color: var(--tct-btn-badge-active-bg, var(--comp-btn-primary-bg));
-  color: var(--tct-btn-badge-active-font-color, var(--comp-btn-primary-font-color));
+  background-color: var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-bg)));
+  color: var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)));
 }
 
 div {

package/dist/collection/components/q2-calendar/helpers.js

@@ -1,15 +1,10 @@
-import moment from 'moment';
-import parseFormat from 'moment-parseformat';
-import { loc } from 'src/utils';
-export function isValidDate(date) {
-  return date instanceof Date && !isNaN(date.getTime());
-}
+import { isValid as isValidDate, formatISO, setMinutes } from 'date-fns';
+import { loc } from '../../utils';
 export function formatDateISO(value) {
   const date = new Date(value);
   if (!isValidDate(date))
     return;
-  const isoDate = date.toISOString();
-  return isoDate.substring(0, 10);
+  return formatISO(date, { representation: 'date' });
 }
 export function formatDateShort(value) {
   const date = new Date(value);
@@ -33,8 +28,15 @@ export function formatDateLong(value) {
     year: 'numeric'
   }).format(date);
 }
-export function stringToMoment(date, useDateOnly = false) {
-  let newMoment;
+export function convertMomentFormat(stringFormat) {
+  return stringFormat
+    .replace(/[d]/g, 'E')
+    .replace(/[D]/g, 'd')
+    .replace(/[Y]/g, 'y')
+    .replace(/[l]/g, 'P')
+    .replace(/[W]/g, 'I');
+}
+export function stringToDate(date) {
   const isString = typeof date === 'string';
   if (!isString && date && isValidDate(new Date(date || undefined))) {
     date = formatDateISO(date);
@@ -42,60 +44,68 @@ export function stringToMoment(date, useDateOnly = false) {
   else if (!date || !isValidDate(new Date(date))) {
     return undefined;
   }
-  if (useDateOnly && isString) {
-    const datePartOnly = date.split('T')[0];
-    newMoment = moment(datePartOnly, parseFormat(datePartOnly));
+  let result;
+  let dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
+  const isIsoString = isString && date.length >= 24 && date[10] === 'T';
+  const isCompleteDate = dateParts.length === 3;
+  const isPartialDate = dateParts.length < 3;
+  if (isIsoString) {
+    date = date.split('T')[0];
+    result = new Date(date);
   }
-  else {
-    const now = moment();
-    const sp = date.split(/[\/\-]/);
-    if (sp.length === 1) {
-      if (date.match(/[\-]/)) {
-        date = `${now.year()}-${sp[0]}-01`;
-      }
-      else if (date.match(/[\/]/)) {
-        date = `${sp[0]}/01/${now.year()}`;
-      }
-    }
-    else if (sp.length === 2) {
-      let dd = sp[1] === '0' ? '01' : sp[1];
-      if (date.match(/[\-]/)) {
-        date = `${now.year()}-${sp[0]}-${dd}`;
-      }
-      else if (date.match(/[\/]/)) {
-        date = `${sp[0]}/${dd}/${now.year()}`;
-      }
-    }
-    else if (sp.length === 3) {
-      if (date.match(/[\-]/)) {
-        date = `${sp[1]}/${sp[2] || '01'}/${sp[0]}`;
-      }
-      else if (date.match(/[\/]/)) {
-        date = `${sp[0]}/${sp[1] || '01'}/${sp[2]}`;
-      }
+  else if (isCompleteDate) {
+    const isStandardSlashDate = date.includes('/') && dateParts[2].length === 4;
+    // Reorder mm/dd/yyyy dates for ISO formatting
+    // [mm, dd, yyyy] -> [yyyy, mm, dd]
+    if (isStandardSlashDate)
+      dateParts.unshift(dateParts.pop());
+    result = new Date(dateParts.join('-'));
+  }
+  else if (isPartialDate) {
+    const now = new Date();
+    let yearNumber;
+    let monthNumber;
+    let dayNumber;
+    switch (dateParts.length) {
+      case 1:
+        yearNumber = now.getFullYear();
+        monthNumber = dateParts[0];
+        dayNumber = '01';
+        break;
+      case 2:
+        yearNumber = now.getFullYear();
+        monthNumber = dateParts[0];
+        dayNumber = dateParts[1];
+        break;
     }
-    newMoment = moment(date, parseFormat(date));
+    result = new Date(`${yearNumber}-${monthNumber}-${dayNumber}`);
   }
-  return newMoment.isValid() ? newMoment : undefined;
+  if (!isValidDate(result))
+    return undefined;
+  // result = setHours(result, 0);
+  result = removeTimezoneOffset(result);
+  return isValidDate(result) ? result : undefined;
 }
-export function stringArrayToMoment(dateArray, useDateOnly = false) {
+export function removeTimezoneOffset(date) {
+  const timeZoneOffset = date.getTimezoneOffset();
+  return setMinutes(date, timeZoneOffset);
+}
+export function stringArrayToDate(dateArray) {
   if (!Array.isArray(dateArray) || dateArray.length === 0) {
     return [];
   }
-  const momentArray = dateArray.map(date => stringToMoment(date, useDateOnly));
-  return momentArray;
+  return dateArray.map(date => stringToDate(date));
 }
-export function setupMonthYear(value = new Date(), months) {
+export function setupMonthYear(value = new Date()) {
   const monthIndex = Number(value.toISOString().split('-')[1]) - 1;
   return {
     monthIndex,
-    selectedMonth: months[monthIndex],
     selectedYear: value.getFullYear()
   };
 }
 export function validateInput(input = '', validDays = [], validDates = [], // white list
 invalidDates = [], // black list
-startDate, endDate, formatString = 'mm/dd/yyyy') {
+startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
   let isValid = false;
   let isAvailable = false;
   let messageType = 'info';
@@ -103,7 +113,7 @@ startDate, endDate, formatString = 'mm/dd/yyyy') {
   if (!input) {
     return { isValid, inputDate: new Date(''), isAvailable, messageType, message };
   }
-  const inputDate = buildInputDate(input);
+  const inputDate = buildInputDate(input, assume);
   const month = inputDate.getMonth() + 1;
   const date = inputDate.getDate();
   const year = inputDate.getFullYear();
@@ -158,15 +168,15 @@ startDate, endDate, formatString = 'mm/dd/yyyy') {
     calendarPosition
   };
 }
-function buildInputDate(input) {
-  let [month, day, year] = input.split('/');
+function buildInputDate(input, assume) {
   const now = new Date();
+  let [month, day, year] = input.split('/');
   if (input.length === 10) {
     return new Date(input);
   }
   else if (month && day && Number(day) > 0) {
     day = Number(day) < 10 ? `0${Number(day)}` : day;
-    year = !year || year.length < 4 ? now.getFullYear().toString() : year;
+    year = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
     return new Date(`${month}/${day}/${year}`);
   }
   else if (month && day && Number(day) === 0) {
@@ -176,6 +186,21 @@ function buildInputDate(input) {
     return new Date(`${month}/01/${now.getFullYear()}`);
   }
 }
+function assumeYear(month, day, assume) {
+  const monthDay = `${month}/${day}`;
+  const now = new Date();
+  const mm = now.getMonth() < 9 ? `0${now.getMonth() + 1}` : `${now.getMonth() + 1}`;
+  const dd = now.getDate() < 10 ? `0${now.getDate()}` : `${now.getDate()}`;
+  const nowLocal = `${mm}/${dd}/${now.getFullYear()}`;
+  let assumedYear = now.getFullYear();
+  if (assume === 'future' && nowLocal.slice(0, 5) > monthDay) {
+    assumedYear = now.getFullYear() + 1;
+  }
+  else if (assume === 'past' && nowLocal.slice(0, 5) < monthDay) {
+    assumedYear = now.getFullYear() - 1;
+  }
+  return assumedYear.toString();
+}
 export function handleMissingZeros(input) {
   if (!input) {
     return '';