@planningcenter/tapestry 2.5.0-qa-459.0 → 2.5.0-qa-459.1

package/dist/unstable.css

@@ -1,3 +1,178 @@
+.tds-checkbox{
+  --tds-checkbox-column-gap:var(--t-spacing-1);
+  --tds-checkbox-cursor:pointer;
+  --tds-checkbox-line-height:1.4;
+  --tds-checkbox-transition-property:background-color, border-color;
+
+  --tds-checkbox-input-size:var(--t-element-size-md);
+  --tds-checkbox-input-border-radius:3px;
+  --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
+  --tds-checkbox-input-background-color:transparent;
+  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
+  --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
+  --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
+  --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-primary);
+  --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
+  --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
+
+  --tds-checkbox-input-icon:none;
+  --tds-checkbox-input-icon-visibility:hidden;
+  --tds-checkbox-input-icon-opacity:0;
+  --tds-checkbox-input-icon-fill:var(--t-icon-color-default-inverted);
+  --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+
+  --tds-checkbox-font-size:var(--t-font-size-md);
+  --tds-checkbox-label-color:var(--t-text-color-default-primary);
+
+  --tds-checkbox-description-font-size:var(--t-font-size-sm);
+  --tds-checkbox-description-line-height:1.35;
+  --tds-checkbox-description-color:var(--t-text-color-default-secondary);
+
+  position:relative;
+  display:inline-grid;
+  grid-template-areas:"checkbox label" ". description";
+  grid-template-columns:auto 1fr;
+  gap:var(--t-spacing-fourth) var(--tds-checkbox-column-gap);
+  line-height:var(--tds-checkbox-line-height);
+  cursor:var(--tds-checkbox-cursor);
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+}
+
+.tds-checkbox label{
+    grid-area:label;
+    font-size:var(--tds-checkbox-font-size);
+    color:var(--tds-checkbox-label-color);
+    cursor:var(--tds-checkbox-cursor);
+  }
+
+.tds-checkbox input[type="checkbox"]{
+    position:relative;
+    grid-area:checkbox;
+    width:1em;
+    height:1em;
+    margin:calc((1lh - 1em) / 2) 0 0;
+    font-size:var(--tds-checkbox-font-size);
+    line-height:inherit;
+    -webkit-appearance:none;
+       -moz-appearance:none;
+            appearance:none;
+    cursor:var(--tds-checkbox-cursor);
+    background-color:var(--tds-checkbox-input-background-color);
+    border:var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
+    border-radius:var(--tds-checkbox-input-border-radius);
+    transition-timing-function:ease-in-out;
+    transition-duration:180ms;
+    transition-property:var(--tds-checkbox-transition-property);
+  }
+
+:is(.tds-checkbox input[type="checkbox"])::before{
+      position:absolute;
+      top:50%;
+      left:50%;
+      visibility:var(--tds-checkbox-input-icon-visibility);
+      width:100%;
+      height:100%;
+      content:"";
+      background-color:var(--tds-checkbox-input-icon-fill);
+      border-radius:var(--tds-checkbox-input-border-radius);
+      opacity:var(--tds-checkbox-input-icon-opacity);
+      -webkit-mask-image:var(--tds-checkbox-input-icon);
+              mask-image:var(--tds-checkbox-input-icon);
+      -webkit-mask-repeat:no-repeat;
+              mask-repeat:no-repeat;
+      -webkit-mask-size:contain;
+              mask-size:contain;
+      transform:translate(-50%, -50%);
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):hover{
+      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-hover);
+      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-hover);
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):focus-visible{
+      outline:solid 2px var(--t-border-color-status-info);
+      outline-offset:1px;
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate{
+      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-checked);
+      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-checked);
+      --tds-checkbox-input-icon-visibility:visible;
+      --tds-checkbox-input-icon-opacity:1;
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):disabled{
+      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
+      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
+      --tds-checkbox-input-icon-fill:var(--t-icon-color-default-disabled);
+      pointer-events:none;
+    }
+
+.tds-checkbox:has(input:disabled){
+    --tds-checkbox-label-color:var(--t-text-color-default-disabled);
+    --tds-checkbox-description-color:var(--t-text-color-default-disabled);
+    --tds-checkbox-cursor:not-allowed;
+    --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
+    --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
+  }
+
+.tds-checkbox:has(input:checked){
+    --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-checked);
+  }
+
+.tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate){
+    --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-indeterminate);
+  }
+
+@media (prefers-reduced-motion: reduce){
+
+.tds-checkbox{
+    --tds-checkbox-transition-property:none;
+}
+  }
+
+.tds-checkbox-description{
+  grid-area:description;
+  margin:0;
+  margin-top:var(--t-spacing-fourth);
+  font-size:var(--tds-checkbox-description-font-size);
+  line-height:var(--tds-checkbox-description-line-height);
+  color:var(--tds-checkbox-description-color);
+  cursor:text;
+}
+
+.tds-checkbox--invalid,
+.tds-checkbox:has(input:invalid){
+  --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
+  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
+  --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-dim-hover);
+  --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid-default);
+  --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid-default);
+  --tds-checkbox-description-color:var(--t-text-color-status-error);
+}
+
+.tds-checkbox--sm{
+  --tds-checkbox-column-gap:6px;
+  --tds-checkbox-line-height:1.35;
+  --tds-checkbox-input-size:var(--t-element-size-sm);
+  --tds-checkbox-font-size:var(--t-font-size-sm);
+  --tds-checkbox-description-font-size:var(--t-font-size-xs);
+  --tds-checkbox-description-line-height:1.3;
+}
+
+.tds-checkbox--xs{
+  --tds-checkbox-column-gap:var(--t-spacing-half);
+  --tds-checkbox-line-height:1.3;
+  --tds-checkbox-input-size:var(--t-element-size-xs);
+  --tds-checkbox-font-size:var(--t-font-size-xs);
+  --tds-checkbox-description-font-size:var(--t-font-size-xs);
+  --tds-checkbox-description-line-height:1.25;
+}
+
 @layer t-critical, t-component;
 
 :root{
@@ -459,7 +634,17 @@
   --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
   --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
   --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
-  --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
+  --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
   --t-icon-color-default-primary:hsl(0, 0%, 80%);
   --t-icon-color-default-secondary:hsl(0, 0%, 54%);
   --t-icon-color-default-dim:hsl(0, 0%, 38%);
@@ -522,30 +707,50 @@
   --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
   --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
   --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
-  --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
-  --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
-  --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
-  --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
-  --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
-  --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
-  --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
-  --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
-  --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
-  --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
-  --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
-  --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
-  --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
-  --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
-  --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
-  --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
+  --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
+  --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
+  --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
+  --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
+  --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
+  --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
+  --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
+  --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
+  --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
+  --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
+  --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
+  --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
+  --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
+  --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
+  --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
+  --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
+  --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
+  --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
+  --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
+  --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
+  --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
+  --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
+  --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
+  --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
+  --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
+  --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
+  --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
+  --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
   --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
-  --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
-  --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
-  --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
-  --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
-  --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
-  --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
-  --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
+  --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
+  --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
+  --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
+  --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
+  --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
+  --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
+  --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
+  --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
+  --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
+  --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
+  --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
+  --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
+  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
+  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
+  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
   --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
   --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
   --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
@@ -653,7 +858,17 @@
   --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
   --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
   --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
-  --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
+  --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
   --t-icon-color-default-primary:hsl(0, 0%, 80%);
   --t-icon-color-default-secondary:hsl(0, 0%, 54%);
   --t-icon-color-default-dim:hsl(0, 0%, 38%);
@@ -716,30 +931,50 @@
   --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
   --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
   --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
-  --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
-  --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
-  --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
-  --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
-  --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
-  --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
-  --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
-  --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
-  --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
-  --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
-  --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
-  --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
-  --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
-  --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
-  --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
-  --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
+  --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
+  --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
+  --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
+  --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
+  --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
+  --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
+  --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
+  --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
+  --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
+  --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
+  --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
+  --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
+  --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
+  --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
+  --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
+  --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
+  --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
+  --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
+  --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
+  --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
+  --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
+  --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
+  --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
+  --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
+  --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
+  --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
+  --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
+  --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
   --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
-  --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
-  --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
-  --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
-  --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
-  --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
-  --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
-  --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
+  --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
+  --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
+  --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
+  --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
+  --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
+  --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
+  --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
+  --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
+  --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
+  --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
+  --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
+  --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
+  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
+  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
+  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
   --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
   --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
   --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
@@ -1908,181 +2143,6 @@ a[class="tds-btn"]{
   }
 }
 
-.tds-checkbox{
-  --tds-checkbox-column-gap:var(--t-spacing-1);
-  --tds-checkbox-cursor:pointer;
-  --tds-checkbox-line-height:1.4;
-  --tds-checkbox-transition-property:background-color, border-color;
-
-  --tds-checkbox-input-size:var(--t-element-size-md);
-  --tds-checkbox-input-border-radius:3px;
-  --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
-  --tds-checkbox-input-background-color:transparent;
-  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
-  --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
-  --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
-  --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-primary);
-  --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
-  --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
-
-  --tds-checkbox-input-icon:none;
-  --tds-checkbox-input-icon-visibility:hidden;
-  --tds-checkbox-input-icon-opacity:0;
-  --tds-checkbox-input-icon-fill:var(--t-icon-color-default-inverted);
-  --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
-  --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
-
-  --tds-checkbox-font-size:var(--t-font-size-md);
-  --tds-checkbox-label-color:var(--t-text-color-default-primary);
-
-  --tds-checkbox-description-font-size:var(--t-font-size-sm);
-  --tds-checkbox-description-line-height:1.35;
-  --tds-checkbox-description-color:var(--t-text-color-default-secondary);
-
-  position:relative;
-  display:inline-grid;
-  grid-template-areas:"checkbox label" ". description";
-  grid-template-columns:auto 1fr;
-  gap:var(--t-spacing-fourth) var(--tds-checkbox-column-gap);
-  line-height:var(--tds-checkbox-line-height);
-  cursor:var(--tds-checkbox-cursor);
-  -webkit-user-select:none;
-     -moz-user-select:none;
-          user-select:none;
-}
-
-.tds-checkbox label{
-    grid-area:label;
-    font-size:var(--tds-checkbox-font-size);
-    color:var(--tds-checkbox-label-color);
-    cursor:var(--tds-checkbox-cursor);
-  }
-
-.tds-checkbox input[type="checkbox"]{
-    position:relative;
-    grid-area:checkbox;
-    width:1em;
-    height:1em;
-    margin:calc((1lh - 1em) / 2) 0 0;
-    font-size:var(--tds-checkbox-font-size);
-    line-height:inherit;
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-    cursor:var(--tds-checkbox-cursor);
-    background-color:var(--tds-checkbox-input-background-color);
-    border:var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
-    border-radius:var(--tds-checkbox-input-border-radius);
-    transition-timing-function:ease-in-out;
-    transition-duration:180ms;
-    transition-property:var(--tds-checkbox-transition-property);
-  }
-
-:is(.tds-checkbox input[type="checkbox"])::before{
-      position:absolute;
-      top:50%;
-      left:50%;
-      visibility:var(--tds-checkbox-input-icon-visibility);
-      width:100%;
-      height:100%;
-      content:"";
-      background-color:var(--tds-checkbox-input-icon-fill);
-      border-radius:var(--tds-checkbox-input-border-radius);
-      opacity:var(--tds-checkbox-input-icon-opacity);
-      -webkit-mask-image:var(--tds-checkbox-input-icon);
-              mask-image:var(--tds-checkbox-input-icon);
-      -webkit-mask-repeat:no-repeat;
-              mask-repeat:no-repeat;
-      -webkit-mask-size:contain;
-              mask-size:contain;
-      transform:translate(-50%, -50%);
-    }
-
-:is(.tds-checkbox input[type="checkbox"]):hover{
-      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-hover);
-      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-hover);
-    }
-
-:is(.tds-checkbox input[type="checkbox"]):focus-visible{
-      outline:solid 2px var(--t-border-color-status-info);
-      outline-offset:1px;
-    }
-
-:is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate{
-      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-checked);
-      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-checked);
-      --tds-checkbox-input-icon-visibility:visible;
-      --tds-checkbox-input-icon-opacity:1;
-    }
-
-:is(.tds-checkbox input[type="checkbox"]):disabled{
-      --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
-      --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
-      --tds-checkbox-input-icon-fill:var(--t-icon-color-default-disabled);
-      pointer-events:none;
-    }
-
-.tds-checkbox:has(input:disabled){
-    --tds-checkbox-label-color:var(--t-text-color-default-disabled);
-    --tds-checkbox-description-color:var(--t-text-color-default-disabled);
-    --tds-checkbox-cursor:not-allowed;
-    --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
-    --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
-  }
-
-.tds-checkbox:has(input:checked){
-    --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-checked);
-  }
-
-.tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate){
-    --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-indeterminate);
-  }
-
-@media (prefers-reduced-motion: reduce){
-
-.tds-checkbox{
-    --tds-checkbox-transition-property:none;
-}
-  }
-
-.tds-checkbox-description{
-  grid-area:description;
-  margin:0;
-  margin-top:var(--t-spacing-fourth);
-  font-size:var(--tds-checkbox-description-font-size);
-  line-height:var(--tds-checkbox-description-line-height);
-  color:var(--tds-checkbox-description-color);
-  cursor:text;
-}
-
-.tds-checkbox--invalid,
-.tds-checkbox:has(input:invalid){
-  --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
-  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
-  --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-dim-hover);
-  --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid-default);
-  --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid-default);
-  --tds-checkbox-description-color:var(--t-text-color-status-error);
-}
-
-.tds-checkbox--sm{
-  --tds-checkbox-column-gap:6px;
-  --tds-checkbox-line-height:1.35;
-  --tds-checkbox-input-size:var(--t-element-size-sm);
-  --tds-checkbox-font-size:var(--t-font-size-sm);
-  --tds-checkbox-description-font-size:var(--t-font-size-xs);
-  --tds-checkbox-description-line-height:1.3;
-}
-
-.tds-checkbox--xs{
-  --tds-checkbox-column-gap:var(--t-spacing-half);
-  --tds-checkbox-line-height:1.3;
-  --tds-checkbox-input-size:var(--t-element-size-xs);
-  --tds-checkbox-font-size:var(--t-font-size-xs);
-  --tds-checkbox-description-font-size:var(--t-font-size-xs);
-  --tds-checkbox-description-line-height:1.25;
-}
-
 .t-banner{
   --t-banner-font-size:var(--t-font-size-md);
   --t-banner-font-color:var(--t-text-color-default-primary);