@planningcenter/tapestry 1.5.0-rc.19 → 1.5.0-rc.20

package/dist/webComponents.css

@@ -636,397 +636,6 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
       flex-direction: column;
     }
 
-.tds-btn {
-  --tds-btn-padding-x: 12px;
-  --tds-btn-padding-truncated-x: 8px;
-  --tds-btn-padding-y: 3px;
-  --tds-btn-font-size: 16px;
-  --tds-btn-font-weight: 400;
-  --tds-btn-line-height: 1.5;
-  --tds-btn-color: var(--t-text-color-default-headline);
-  --tds-btn-bg: transparent;
-  --tds-btn-border-width: var(--t-border-width-default);
-  --tds-btn-border-color: transparent;
-  --tds-btn-border-radius: var(--t-border-radius-md);
-  --tds-btn-border-color-hover: transparent;
-  --tds-btn-disabled-opacity: 1;
-  --tds-btn-min-height: 32px;
-  display: inline-flex;
-  gap: 1ex;
-  align-items: center;
-  min-height: var(--tds-btn-min-height);
-  padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
-  font-size: var(--tds-btn-font-size);
-  font-weight: var(--tds-btn-font-weight);
-  line-height: var(--tds-btn-line-height);
-  vertical-align: middle;
-  color: var(--tds-btn-color);
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  background-color: var(--tds-btn-bg);
-  border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
-  border-radius: var(--tds-btn-border-radius);
-  transition:
-    color 0.15s ease-in-out,
-    background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-}
-
-.tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
-    padding-left: var(--tds-btn-padding-truncated-x);
-  }
-
-.tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
-    padding-right: var(--tds-btn-padding-truncated-x);
-  }
-
-.tds-btn:hover {
-    color: var(--tds-btn-color-hover);
-    background-color: var(--tds-btn-bg-hover);
-    border-color: var(--tds-btn-border-color-hover);
-  }
-
-.tds-btn:focus-visible {
-    color: var(--tds-btn-color-hover);
-    outline: solid 3px var(--t-border-color-status-info);
-    outline-offset: 1px;
-    background-color: var(--tds-btn-bg-hover);
-    border-color: var(--tds-btn-border-color-hover);
-  }
-
-.tds-btn:active,.tds-btn.active {
-    color: var(--tds-btn-color-active);
-    background-color: var(--tds-btn-bg-active);
-    border-color: var(--tds-btn-border-color-active);
-  }
-
-.tds-btn:disabled,.tds-btn.disabled {
-    color: var(--tds-btn-color-disabled);
-    pointer-events: none;
-    background-color: var(--tds-btn-bg-disabled);
-    border-color: var(--tds-btn-border-color-disabled);
-    opacity: var(--tds-btn-disabled-opacity);
-  }
-
-.tds-btn svg:not(.symbol) {
-    display: block;
-    inline-size: auto;
-    block-size: auto;
-    max-block-size: 0.66666667lh;
-    color: var(--tds-btn-icon-color, currentColor);
-  }
-
-@media (prefers-reduced-motion: reduce) {
-
-.tds-btn {
-    transition: none;
-}
-  }
-
-/* Effective height 48px */
-
-.tds-btn--xl {
-  --tds-btn-padding-y: 11px;
-  --tds-btn-padding-x: 18px;
-  --tds-btn-padding-truncated-x: 12px;
-  --tds-btn-min-height: 48px;
-}
-
-/* Effective height 40px */
-
-.tds-btn--lg {
-  --tds-btn-padding-y: 7px;
-  --tds-btn-padding-x: 14px;
-  --tds-btn-min-height: 40px;
-}
-
-/* Effective height 24px */
-
-.tds-btn--sm {
-  --tds-btn-padding-y: 0.5px;
-  --tds-btn-padding-x: 7px;
-  --tds-btn-padding-truncated-x: 4px;
-  --tds-btn-min-height: 24px;
-  --tds-btn-font-size: var(--t-font-size-sm);
-}
-
-/* Effective height 20px */
-
-.tds-btn--xs {
-  --tds-btn-padding-y: 0;
-  --tds-btn-padding-x: 5px;
-  --tds-btn-padding-truncated-x: 5px;
-  --tds-btn-min-height: 20px;
-  --tds-btn-font-size: var(--t-font-size-xs);
-}
-
-.tds-btn--neutral {
-  --tds-btn-color: var(--t-text-color-default-inverted);
-  --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
-  --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
-  --tds-btn-color-hover: var(--t-text-color-default-inverted);
-  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
-  --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
-  --tds-btn-color-active: var(--t-text-color-default-inverted);
-  --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
-  --tds-btn-border-color-active: var(
-    --t-fill-color-button-neutral-solid-active
-  );
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
-  --tds-btn-border-color-disabled: var(
-    --t-fill-color-button-neutral-solid-disabled
-  );
-}
-
-.tds-btn--interaction {
-  --tds-btn-color: var(--t-text-color-default-inverted);
-  --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
-  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
-  --tds-btn-color-hover: var(--t-text-color-default-inverted);
-  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
-  --tds-btn-border-color-hover: var(
-    --t-fill-color-button-interaction-solid-hover
-  );
-  --tds-btn-color-active: var(--t-text-color-default-inverted);
-  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
-  --tds-btn-border-color-active: var(
-    --t-fill-color-button-interaction-solid-active
-  );
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
-  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
-}
-
-.tds-btn--delete {
-  --tds-btn-color: var(--t-text-color-default-inverted);
-  --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
-  --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
-  --tds-btn-color-hover: var(--t-text-color-default-inverted);
-  --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
-  --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
-  --tds-btn-color-active: var(--t-text-color-default-inverted);
-  --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
-  --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
-  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
-}
-
-.tds-btn--outline-neutral {
-  --tds-btn-color: var(--t-text-color-status-neutral);
-  --tds-btn-border-color: var(--t-border-color-button-neutral);
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
-  --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
-  --tds-btn-border-color-active: var(--t-border-color-button-neutral);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(
-    --t-fill-color-button-neutral-outline-dim-disabled
-  );
-  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
-}
-
-.tds-btn--outline-interaction {
-  --tds-btn-color: var(--t-text-color-status-info);
-  --tds-btn-border-color: var(--t-border-color-button-info);
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
-  --tds-btn-border-color-hover: var(--tds-btn-border-color);
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(
-    --t-fill-color-button-interaction-outline-dim-active
-  );
-  --tds-btn-border-color-active: var(--tds-btn-border-color);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(
-    --t-fill-color-button-interaction-outline-dim-disabled
-  );
-  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
-}
-
-.tds-btn--outline-delete {
-  --tds-btn-color: var(--t-text-color-status-error);
-  --tds-btn-border-color: var(--t-border-color-button-delete);
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
-  --tds-btn-border-color-hover: var(--tds-btn-border-color);
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
-  --tds-btn-border-color-active: var(--tds-btn-border-color);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
-  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
-}
-
-.tds-btn--ghost-neutral {
-  --tds-btn-color: var(--t-text-color-status-neutral);
-  --tds-btn-border-color: transparent;
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
-  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
-  --tds-btn-border-color-active: var(--tds-btn-bg-active);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: transparent;
-  --tds-btn-border-color-disabled: transparent;
-}
-
-.tds-btn--ghost-interaction {
-  --tds-btn-color: var(--t-text-color-status-info);
-  --tds-btn-border-color: transparent;
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
-  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(
-    --t-fill-color-button-interaction-outline-dim-active
-  );
-  --tds-btn-border-color-active: var(--tds-btn-bg-active);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: transparent;
-  --tds-btn-border-color-disabled: transparent;
-}
-
-.tds-btn--ghost-delete {
-  --tds-btn-color: var(--t-text-color-status-error);
-  --tds-btn-border-color: transparent;
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
-  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
-  --tds-btn-border-color-active: var(--tds-btn-bg-active);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: transparent;
-  --tds-btn-border-color-disabled: transparent;
-}
-
-.tds-btn--primary-page-header {
-  --tds-btn-color: var(--t-text-color-default-inverted);
-  --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
-  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
-  --tds-btn-color-hover: var(--t-text-color-default-inverted);
-  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
-  --tds-btn-border-color-hover: var(
-    --t-fill-color-button-interaction-solid-hover
-  );
-  --tds-btn-color-active: var(--t-text-color-default-inverted);
-  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
-  --tds-btn-border-color-active: var(
-    --t-fill-color-button-interaction-solid-active
-  );
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
-  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
-}
-
-.tds-btn--secondary-page-header {
-  --tds-btn-border-width: 0;
-  --tds-btn-color: var(--t-text-color-status-neutral);
-  --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
-  --tds-btn-border-color: var(
-    --t-fill-color-button-neutral-responsive-header-default
-  );
-  --tds-btn-color-hover: var(--t-text-color-status-neutral);
-  --tds-btn-bg-hover: var(
-    --t-fill-color-button-neutral-responsive-header-hover
-  );
-  --tds-btn-border-color-hover: var(
-    --t-fill-color-button-neutral-responsive-header-hover
-  );
-  --tds-btn-color-active: var(--t-text-color-status-neutral);
-  --tds-btn-bg-active: var(
-    --t-fill-color-button-neutral-responsive-header-active
-  );
-  --tds-btn-border-color-active: var(
-    --t-fill-color-button-neutral-responsive-header-active
-  );
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(
-    --t-fill-color-button-neutral-responsive-header-disabled
-  );
-  --tds-btn-border-color-disabled: var(
-    --t-fill-color-button-neutral-responsive-header-disabled
-  );
-}
-
-@media (min-width: 720px) {
-
-.tds-btn--secondary-page-header {
-    --tds-btn-border-width: 1px;
-    --tds-btn-color: var(--t-text-color-status-neutral);
-    --tds-btn-bg: transparent;
-    --tds-btn-border-color: var(--t-border-color-button-neutral);
-    --tds-btn-color-hover: var(--tds-btn-color);
-    --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
-    --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
-    --tds-btn-color-active: var(--tds-btn-color);
-    --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
-    --tds-btn-border-color-active: var(--t-border-color-button-neutral);
-    --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-    --tds-btn-bg-disabled: var(
-      --t-fill-color-button-neutral-outline-dim-disabled
-    );
-    --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
-}
-  }
-
-.tds-btn--pill {
-  --tds-btn-border-radius: 999px;
-  --tds-btn-padding-y: 4px;
-  --tds-btn-padding-x: 13px;
-
-  --tds-btn-color: var(--t-text-color-default-primary);
-  --tds-btn-bg: var(--t-fill-color-button-pill-default);
-  --tds-btn-border-color: var(--tds-btn-bg);
-  --tds-btn-color-hover: var(--tds-btn-color);
-  --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
-  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
-
-  --tds-btn-color-active: var(--tds-btn-color);
-  --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
-  --tds-btn-border-color-active: var(--tds-btn-bg-active);
-  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
-  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
-  --tds-btn-border-color-disabled: var(
-    --t-fill-color-button-neutral-solid-disabled
-  );
-  --tds-btn-icon-color: var(--t-icon-color-default-secondary);
-  --tds-btn-min-height: 32px;
-}
-
-.tds-btn--pill:is(.tds-btn--sm) {
-    --tds-btn-padding-y: 1px;
-    --tds-btn-padding-x: 7px;
-    --tds-btn-min-height: auto;
-  }
-
-.tds-btn--pill:is(.tds-btn--xs) {
-    --tds-btn-padding-y: 1px;
-    --tds-btn-padding-x: 9px;
-    --tds-btn-min-height: auto;
-  }
-
-.tds-btn--pill:disabled,.tds-btn--pill.disabled {
-    --tds-btn-icon-color: inherit;
-  }
-
-.tds-btn--dropdown .suffix {
-  transition: transform 0.2s ease-in-out;
-}
-
-.tds-btn--dropdown[aria-expanded="true"] .suffix {
-  transform: rotate(-180deg);
-}
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -1567,9 +1176,409 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
   --t-fill-color-button-create-ghost-disabled: #ffffff00;
 }
 
-/**
- * Do not edit directly, this file was auto-generated.
- */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.symbol {
+  display: inline-block;
+  vertical-align: text-top;
+  fill: currentColor;
+  height: 1em;
+  width: 1em;
+}
+
+.tds-btn {
+  --tds-btn-padding-x: 12px;
+  --tds-btn-padding-truncated-x: 8px;
+  --tds-btn-padding-y: 3px;
+  --tds-btn-font-size: 16px;
+  --tds-btn-font-weight: 400;
+  --tds-btn-line-height: 1.5;
+  --tds-btn-color: var(--t-text-color-default-headline);
+  --tds-btn-bg: transparent;
+  --tds-btn-border-width: var(--t-border-width-default);
+  --tds-btn-border-color: transparent;
+  --tds-btn-border-radius: var(--t-border-radius-md);
+  --tds-btn-border-color-hover: transparent;
+  --tds-btn-disabled-opacity: 1;
+  --tds-btn-min-height: 32px;
+  display: inline-flex;
+  gap: 1ex;
+  align-items: center;
+  min-height: var(--tds-btn-min-height);
+  padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
+  font-size: var(--tds-btn-font-size);
+  font-weight: var(--tds-btn-font-weight);
+  line-height: var(--tds-btn-line-height);
+  vertical-align: middle;
+  color: var(--tds-btn-color);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background-color: var(--tds-btn-bg);
+  border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
+  border-radius: var(--tds-btn-border-radius);
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+.tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
+    padding-left: var(--tds-btn-padding-truncated-x);
+  }
+
+.tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
+    padding-right: var(--tds-btn-padding-truncated-x);
+  }
+
+.tds-btn:hover {
+    color: var(--tds-btn-color-hover);
+    background-color: var(--tds-btn-bg-hover);
+    border-color: var(--tds-btn-border-color-hover);
+  }
+
+.tds-btn:focus-visible {
+    color: var(--tds-btn-color-hover);
+    outline: solid 3px var(--t-border-color-status-info);
+    outline-offset: 1px;
+    background-color: var(--tds-btn-bg-hover);
+    border-color: var(--tds-btn-border-color-hover);
+  }
+
+.tds-btn:active,.tds-btn.active {
+    color: var(--tds-btn-color-active);
+    background-color: var(--tds-btn-bg-active);
+    border-color: var(--tds-btn-border-color-active);
+  }
+
+.tds-btn:disabled,.tds-btn.disabled {
+    color: var(--tds-btn-color-disabled);
+    pointer-events: none;
+    background-color: var(--tds-btn-bg-disabled);
+    border-color: var(--tds-btn-border-color-disabled);
+    opacity: var(--tds-btn-disabled-opacity);
+  }
+
+.tds-btn svg:not(.symbol) {
+    display: block;
+    inline-size: auto;
+    block-size: auto;
+    max-block-size: 0.66666667lh;
+    color: var(--tds-btn-icon-color, currentColor);
+  }
+
+@media (prefers-reduced-motion: reduce) {
+
+.tds-btn {
+    transition: none;
+}
+  }
+
+/* Effective height 48px */
+
+.tds-btn--xl {
+  --tds-btn-padding-y: 11px;
+  --tds-btn-padding-x: 18px;
+  --tds-btn-padding-truncated-x: 12px;
+  --tds-btn-min-height: 48px;
+}
+
+/* Effective height 40px */
+
+.tds-btn--lg {
+  --tds-btn-padding-y: 7px;
+  --tds-btn-padding-x: 14px;
+  --tds-btn-min-height: 40px;
+}
+
+/* Effective height 24px */
+
+.tds-btn--sm {
+  --tds-btn-padding-y: 0.5px;
+  --tds-btn-padding-x: 7px;
+  --tds-btn-padding-truncated-x: 4px;
+  --tds-btn-min-height: 24px;
+  --tds-btn-font-size: var(--t-font-size-sm);
+}
+
+/* Effective height 20px */
+
+.tds-btn--xs {
+  --tds-btn-padding-y: 0;
+  --tds-btn-padding-x: 5px;
+  --tds-btn-padding-truncated-x: 5px;
+  --tds-btn-min-height: 20px;
+  --tds-btn-font-size: var(--t-font-size-xs);
+}
+
+.tds-btn--neutral {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
+  --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
+  --tds-btn-border-color-active: var(
+    --t-fill-color-button-neutral-solid-active
+  );
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-border-color-disabled: var(
+    --t-fill-color-button-neutral-solid-disabled
+  );
+}
+
+.tds-btn--interaction {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
+  --tds-btn-border-color-hover: var(
+    --t-fill-color-button-interaction-solid-hover
+  );
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
+  --tds-btn-border-color-active: var(
+    --t-fill-color-button-interaction-solid-active
+  );
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
+  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
+}
+
+.tds-btn--delete {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
+  --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
+  --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
+  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
+}
+
+.tds-btn--outline-neutral {
+  --tds-btn-color: var(--t-text-color-status-neutral);
+  --tds-btn-border-color: var(--t-border-color-button-neutral);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
+  --tds-btn-border-color-active: var(--t-border-color-button-neutral);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(
+    --t-fill-color-button-neutral-outline-dim-disabled
+  );
+  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+
+.tds-btn--outline-interaction {
+  --tds-btn-color: var(--t-text-color-status-info);
+  --tds-btn-border-color: var(--t-border-color-button-info);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-border-color);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(
+    --t-fill-color-button-interaction-outline-dim-active
+  );
+  --tds-btn-border-color-active: var(--tds-btn-border-color);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(
+    --t-fill-color-button-interaction-outline-dim-disabled
+  );
+  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+
+.tds-btn--outline-delete {
+  --tds-btn-color: var(--t-text-color-status-error);
+  --tds-btn-border-color: var(--t-border-color-button-delete);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-border-color);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-border-color);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
+  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+
+.tds-btn--ghost-neutral {
+  --tds-btn-color: var(--t-text-color-status-neutral);
+  --tds-btn-border-color: transparent;
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: transparent;
+  --tds-btn-border-color-disabled: transparent;
+}
+
+.tds-btn--ghost-interaction {
+  --tds-btn-color: var(--t-text-color-status-info);
+  --tds-btn-border-color: transparent;
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(
+    --t-fill-color-button-interaction-outline-dim-active
+  );
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: transparent;
+  --tds-btn-border-color-disabled: transparent;
+}
+
+.tds-btn--ghost-delete {
+  --tds-btn-color: var(--t-text-color-status-error);
+  --tds-btn-border-color: transparent;
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: transparent;
+  --tds-btn-border-color-disabled: transparent;
+}
+
+.tds-btn--primary-page-header {
+  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
+  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
+  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
+  --tds-btn-border-color-hover: var(
+    --t-fill-color-button-interaction-solid-hover
+  );
+  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
+  --tds-btn-border-color-active: var(
+    --t-fill-color-button-interaction-solid-active
+  );
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
+  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
+}
+
+.tds-btn--secondary-page-header {
+  --tds-btn-border-width: 0;
+  --tds-btn-color: var(--t-text-color-status-neutral);
+  --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
+  --tds-btn-border-color: var(
+    --t-fill-color-button-neutral-responsive-header-default
+  );
+  --tds-btn-color-hover: var(--t-text-color-status-neutral);
+  --tds-btn-bg-hover: var(
+    --t-fill-color-button-neutral-responsive-header-hover
+  );
+  --tds-btn-border-color-hover: var(
+    --t-fill-color-button-neutral-responsive-header-hover
+  );
+  --tds-btn-color-active: var(--t-text-color-status-neutral);
+  --tds-btn-bg-active: var(
+    --t-fill-color-button-neutral-responsive-header-active
+  );
+  --tds-btn-border-color-active: var(
+    --t-fill-color-button-neutral-responsive-header-active
+  );
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(
+    --t-fill-color-button-neutral-responsive-header-disabled
+  );
+  --tds-btn-border-color-disabled: var(
+    --t-fill-color-button-neutral-responsive-header-disabled
+  );
+}
+
+@media (min-width: 720px) {
+
+.tds-btn--secondary-page-header {
+    --tds-btn-border-width: 1px;
+    --tds-btn-color: var(--t-text-color-status-neutral);
+    --tds-btn-bg: transparent;
+    --tds-btn-border-color: var(--t-border-color-button-neutral);
+    --tds-btn-color-hover: var(--tds-btn-color);
+    --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
+    --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
+    --tds-btn-color-active: var(--tds-btn-color);
+    --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
+    --tds-btn-border-color-active: var(--t-border-color-button-neutral);
+    --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+    --tds-btn-bg-disabled: var(
+      --t-fill-color-button-neutral-outline-dim-disabled
+    );
+    --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
+}
+  }
+
+.tds-btn--pill {
+  --tds-btn-border-radius: 999px;
+  --tds-btn-padding-y: 4px;
+  --tds-btn-padding-x: 13px;
+
+  --tds-btn-color: var(--t-text-color-default-primary);
+  --tds-btn-bg: var(--t-fill-color-button-pill-default);
+  --tds-btn-border-color: var(--tds-btn-bg);
+  --tds-btn-color-hover: var(--tds-btn-color);
+  --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
+  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
+
+  --tds-btn-color-active: var(--tds-btn-color);
+  --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
+  --tds-btn-border-color-active: var(--tds-btn-bg-active);
+  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
+  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
+  --tds-btn-border-color-disabled: var(
+    --t-fill-color-button-neutral-solid-disabled
+  );
+  --tds-btn-icon-color: var(--t-icon-color-default-secondary);
+  --tds-btn-min-height: 32px;
+}
+
+.tds-btn--pill:is(.tds-btn--sm) {
+    --tds-btn-padding-y: 1px;
+    --tds-btn-padding-x: 7px;
+    --tds-btn-min-height: auto;
+  }
+
+.tds-btn--pill:is(.tds-btn--xs) {
+    --tds-btn-padding-y: 1px;
+    --tds-btn-padding-x: 9px;
+    --tds-btn-min-height: auto;
+  }
+
+.tds-btn--pill:disabled,.tds-btn--pill.disabled {
+    --tds-btn-icon-color: inherit;
+  }
+
+.tds-btn--dropdown .suffix {
+  transition: transform 0.2s ease-in-out;
+}
+
+.tds-btn--dropdown[aria-expanded="true"] .suffix {
+  transform: rotate(-180deg);
+}
 
 /**
  * Do not edit directly, this file was auto-generated.