@planningcenter/tapestry 2.10.0-rc.4 → 2.10.0

package/dist/components/radio/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { RadioElementProps, RadioProps, RadioSize } from "./Radio";
+export { Radio } from "./Radio";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/toggle-switch/index.d.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+export type { ToggleSwitchElementProps, ToggleSwitchProps, ToggleSwitchSize, } from "./ToggleSwitch";
+export { ToggleSwitch } from "./ToggleSwitch";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle-switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,YAAY,EACV,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.css

@@ -2072,4 +2072,553 @@ a[class="tds-btn"]{
   }
 }
 
+.tds-checkbox{
+  --tds-checkbox-font-size:var(--t-font-size-md);
+  --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:var(--t-border-radius-sm);
+  --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
+  --tds-checkbox-input-background-color:transparent;
+
+  --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-inverted);
+
+  --tds-checkbox-label-color:var(--t-text-color);
+
+  --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-secondary);
+  --tds-checkbox-description-invalid-icon-display:none;
+
+  position:relative;
+  display:inline-grid;
+  grid-template-columns:auto;
+  grid-auto-columns:1fr;
+  gap:var(--t-spacing-fourth) var(--t-spacing-1);
+  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:1 / 2;
+    font-size:var(--tds-checkbox-font-size);
+    font-weight:var(--t-font-weight-normal);
+    color:var(--tds-checkbox-label-color);
+    cursor:var(--tds-checkbox-cursor);
+  }
+
+.tds-checkbox input[type="checkbox"]{
+    position:relative;
+    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) 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:not(:disabled){
+      --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
+      --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):focus-visible{
+      outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
+      outline-offset:var(--t-spacing-fourth);
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):disabled{
+      pointer-events:none;
+    }
+
+@media (prefers-reduced-motion: reduce){
+
+.tds-checkbox input[type="checkbox"]{
+      --tds-checkbox-transition-property:none;
+  }
+    }
+
+.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
+    --tds-checkbox-input-background-color:var(--t-fill-color-control);
+    --tds-checkbox-input-border-color:var(--t-border-color-control-info);
+    --tds-checkbox-input-icon-visibility:visible;
+    --tds-checkbox-input-icon-opacity:1;
+  }
+
+:is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
+      --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
+      --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
+    }
+
+.tds-checkbox:has(input:checked){
+    --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  }
+
+.tds-checkbox:has(input:indeterminate){
+    --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  }
+
+.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
+    --tds-checkbox-input-border-color:var(--t-border-color-control-error);
+    --tds-checkbox-description-color:var(--t-text-color-status-error);
+    --tds-checkbox-description-invalid-icon-display:inline-block;
+  }
+
+:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
+      --tds-checkbox-input-border-color:var(--t-border-color-control-error);
+      --tds-checkbox-input-background-color:var(--t-fill-color-status-error-dim);
+    }
+
+:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
+      --tds-checkbox-input-border-color:var(--t-fill-color-control-error);
+      --tds-checkbox-input-background-color:var(--t-fill-color-control-error);
+    }
+
+:is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
+        --tds-checkbox-input-border-color:hsl(9 60% 40%);
+        --tds-checkbox-input-background-color:hsl(9 60% 40%);
+      }
+
+.tds-checkbox:has(input:required) label::after{
+      margin-left:.25ch;
+      color:var(--t-text-color-status-error);
+      content:"*";
+    }
+
+.tds-checkbox:has(input:disabled){
+    --tds-checkbox-input-background-color:var(--t-fill-color-neutral-070);
+    --tds-checkbox-input-border-color:var(--t-border-color-control-disabled);
+
+    --tds-checkbox-label-color:var(--t-text-color-disabled);
+    --tds-checkbox-description-color:var(--t-text-color-disabled);
+    --tds-checkbox-cursor:not-allowed;
+  }
+
+.tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
+      --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
+    }
+
+.tds-checkbox-description{
+  display:flex;
+  grid-area:2 / 2;
+  gap:4px;
+  align-items:flex-start;
+  margin:0;
+  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-description .tds-checkbox-description-invalid-icon{
+    display:var(--tds-checkbox-description-invalid-icon-display);
+    flex-shrink:0;
+    margin-top:calc(.5lh - .5em);
+    line-height:var(--tds-checkbox-description-line-height);
+  }
+
+.tds-checkbox--sm{
+  --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-radio{
+  --tds-radio-font-size:var(--t-font-size-md);
+  --tds-radio-cursor:pointer;
+  --tds-radio-line-height:1.4;
+  --tds-radio-transition-property:border-width;
+
+  --tds-radio-input-size:var(--t-element-size-md);
+  --tds-radio-input-border-radius:var(--t-border-radius-round);
+  --tds-radio-input-border-color:var(--t-border-color-control-neutral);
+  --tds-radio-input-border-width:var(--t-border-width);
+  --tds-radio-input-background-color:transparent;
+
+  --tds-radio-label-color:var(--t-text-color);
+
+  --tds-radio-description-font-size:var(--t-font-size-sm);
+  --tds-radio-description-line-height:1.35;
+  --tds-radio-description-color:var(--t-text-color-secondary);
+
+  position:relative;
+  display:inline-grid;
+  grid-template-columns:auto;
+  grid-auto-columns:1fr;
+  gap:var(--t-spacing-fourth) var(--t-spacing-1);
+  line-height:var(--tds-radio-line-height);
+  cursor:var(--tds-radio-cursor);
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+}
+
+.tds-radio label{
+    grid-area:1 / 2;
+    font-size:var(--tds-radio-font-size);
+    font-weight:var(--t-font-weight-normal);
+    color:var(--tds-radio-label-color);
+    cursor:var(--tds-radio-cursor);
+  }
+
+.tds-radio input[type="radio"]{
+    position:relative;
+    width:1em;
+    height:1em;
+    margin:calc((1lh - 1em) / 2) 0 0;
+    font-size:var(--tds-radio-font-size);
+    line-height:inherit;
+    -webkit-appearance:none;
+       -moz-appearance:none;
+            appearance:none;
+    cursor:var(--tds-radio-cursor);
+    background-color:var(--tds-radio-input-background-color);
+    border:var(--tds-radio-input-border-width) solid var(--tds-radio-input-border-color);
+    border-radius:var(--tds-radio-input-border-radius);
+    transition-timing-function:ease-in-out;
+    transition-duration:180ms;
+    transition-property:var(--tds-radio-transition-property);
+  }
+
+:is(.tds-radio input[type="radio"]):hover:not(:disabled){
+      --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
+      --tds-radio-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
+    }
+
+:is(.tds-radio input[type="radio"]):focus-visible{
+      outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
+      outline-offset:var(--t-spacing-fourth);
+    }
+
+:is(.tds-radio input[type="radio"]):disabled{
+      pointer-events:none;
+    }
+
+@media (prefers-reduced-motion: reduce){
+
+.tds-radio input[type="radio"]{
+      --tds-radio-transition-property:none;
+  }
+    }
+
+.tds-radio:has(input:checked){
+    --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+    --tds-radio-input-border-color:var(--t-border-color-control-info);
+    --tds-radio-input-border-width:4px;
+  }
+
+.tds-radio:has(input:checked) input:hover:not(:disabled){
+      --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+      --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
+    }
+
+.tds-radio:has(input:user-invalid){
+    --tds-radio-input-border-color:var(--t-border-color-control-error);
+  }
+
+.tds-radio:has(input:user-invalid) input:hover:not(:disabled){
+      --tds-radio-input-border-color:var(--t-border-color-control-error);
+      --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
+    }
+
+.tds-radio:has(input:disabled){
+    --tds-radio-input-background-color:var(--t-fill-color-neutral-070);
+    --tds-radio-input-border-color:var(--t-border-color-control-disabled);
+
+    --tds-radio-label-color:var(--t-text-color-disabled);
+    --tds-radio-description-color:var(--t-text-color-disabled);
+    --tds-radio-cursor:not-allowed;
+  }
+
+.tds-radio:has(input:disabled) input:checked{
+      --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+      --tds-radio-input-border-color:var(--t-border-color-control-disabled);
+    }
+
+.tds-radio-description{
+  display:flex;
+  grid-area:2 / 2;
+  gap:4px;
+  align-items:flex-start;
+  margin:0;
+  font-size:var(--tds-radio-description-font-size);
+  line-height:var(--tds-radio-description-line-height);
+  color:var(--tds-radio-description-color);
+  cursor:text;
+}
+
+.tds-radio--sm{
+  --tds-radio-line-height:1.35;
+  --tds-radio-input-size:var(--t-element-size-sm);
+  --tds-radio-font-size:var(--t-font-size-sm);
+  --tds-radio-description-font-size:var(--t-font-size-xs);
+  --tds-radio-description-line-height:1.3;
+}
+
+.tds-radio-group{
+  --tds-radio-group-font-size:var(--t-font-size-md);
+  --tds-radio-group-line-height:1.4;
+  --tds-radio-group-gap:var(--t-spacing-1);
+
+  --tds-radio-group-legend-margin-bottom:var(--tds-radio-group-gap);
+
+  --tds-radio-group-description-font-size:var(--t-font-size-sm);
+  --tds-radio-group-description-line-height:1.35;
+  --tds-radio-group-description-color:var(--t-text-color-secondary);
+  --tds-radio-group-description-invalid-icon-display:none;
+
+  font-size:var(--tds-radio-group-font-size);
+  line-height:var(--tds-radio-group-line-height);
+  border:0;
+  padding:0;
+  margin:0;
+  display:flex;
+  flex-direction:column;
+  gap:var(--tds-radio-group-gap);
+}
+
+.tds-radio-group legend{
+    padding:0;
+    margin-bottom:var(--tds-radio-group-legend-margin-bottom);
+  }
+
+.tds-radio-group:has(.tds-radio-group-description){
+    --tds-radio-group-legend-margin-bottom:var(--t-spacing-fourth);
+  }
+
+.tds-radio-group[aria-invalid="true"]{
+    --tds-radio-group-description-color:var(--t-text-color-status-error);
+    --tds-radio-group-description-invalid-icon-display:inline-block;
+  }
+
+.tds-radio-group[aria-invalid="true"] .tds-radio{
+      --tds-radio-input-border-color:var(--t-border-color-control-error);
+    }
+
+:is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
+        --tds-radio-input-border-color:hsl(9 60% 40%);
+        --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
+      }
+
+:is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
+        --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+      }
+
+.tds-radio-group:has(input:required) legend::after{
+      margin-left:.25ch;
+      color:var(--t-text-color-status-error);
+      content:"*";
+    }
+
+.tds-radio-group-fields{
+  display:flex;
+  flex-direction:column;
+  gap:var(--tds-radio-group-gap);
+  align-items:flex-start;
+}
+
+.tds-radio-group-description{
+  display:flex;
+  gap:var(--t-spacing-half);
+  align-items:flex-start;
+  margin:0;
+  font-size:var(--tds-radio-group-description-font-size);
+  line-height:var(--tds-radio-group-description-line-height);
+  color:var(--tds-radio-group-description-color);
+  cursor:text;
+}
+
+.tds-radio-group-description-invalid-icon{
+  display:var(--tds-radio-group-description-invalid-icon-display);
+  flex-shrink:0;
+  margin-top:calc(.5lh - .5em);
+  line-height:var(--tds-radio-group-description-line-height);
+}
+
+.tds-radio-group--sm{
+  --tds-radio-group-line-height:1.35;
+  --tds-radio-group-font-size:var(--t-font-size-sm);
+  --tds-radio-group-description-font-size:var(--t-font-size-xs);
+  --tds-radio-group-description-line-height:1.3;
+}
+
+.tds-toggle-switch{
+  --tds-toggle-switch-font-size:var(--t-font-size-md);
+  --tds-toggle-switch-column-gap:var(--t-spacing-2);
+  --tds-toggle-switch-cursor:pointer;
+  --tds-toggle-switch-display:inline-grid;
+  --tds-toggle-switch-line-height:1.4;
+
+  --tds-toggle-switch-label-color:var(--t-text-color);
+
+  --tds-toggle-switch-track-width:var(--t-container-size-md);
+  --tds-toggle-switch-track-outline:none;
+  --tds-toggle-switch-track-height:var(--t-container-size-xs);
+  --tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
+  --tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
+
+  --tds-toggle-switch-thumb-size:var(--t-element-size-md);
+  --tds-toggle-switch-thumb-transform:translateX(0);
+  --tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
+
+  --tds-toggle-switch-description-font-size:var(--t-font-size-sm);
+  --tds-toggle-switch-description-line-height:1.35;
+  --tds-toggle-switch-description-color:var(--t-text-color-secondary);
+
+  display:var(--tds-toggle-switch-display);
+  grid-template-columns:auto;
+  grid-auto-columns:1fr;
+  gap:var(--t-spacing-fourth) var(--tds-toggle-switch-column-gap);
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+}
+
+.tds-toggle-switch input[type="checkbox"]{
+    position:absolute;
+    width:var(--tds-toggle-switch-track-width);
+    height:var(--tds-toggle-switch-track-height);
+    margin:0;
+    -webkit-appearance:none;
+       -moz-appearance:none;
+            appearance:none;
+    cursor:var(--tds-toggle-switch-cursor);
+    background-color:transparent;
+    border:0;
+    border-radius:var(--t-border-radius-round);
+  }
+
+.tds-toggle-switch label{
+    display:inline-flex;
+    grid-area:1 / 2;
+    -moz-column-gap:var(--tds-toggle-switch-column-gap);
+         column-gap:var(--tds-toggle-switch-column-gap);
+    margin-top:-.09375em;
+    font-size:var(--tds-toggle-switch-font-size);
+    font-weight:var(--t-font-weight-normal);
+    line-height:var(--tds-toggle-switch-line-height);
+    color:var(--tds-toggle-switch-label-color);
+    cursor:var(--tds-toggle-switch-cursor);
+  }
+
+.tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
+    --tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
+  }
+
+.tds-toggle-switch:has(input:focus-visible){
+    --tds-toggle-switch-track-outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
+  }
+
+.tds-toggle-switch:has(input:checked){
+    --tds-toggle-switch-track-background-color:var(--t-fill-color-control);
+    --tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
+  }
+
+.tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
+      --tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
+    }
+
+.tds-toggle-switch:has(input:disabled){
+    --tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
+    --tds-toggle-switch-label-color:var(--t-text-color-disabled);
+    --tds-toggle-switch-description-color:var(--t-text-color-disabled);
+    --tds-toggle-switch-cursor:not-allowed;
+  }
+
+.tds-toggle-switch-track{
+  position:relative;
+  flex-shrink:0;
+  width:var(--tds-toggle-switch-track-width);
+  height:var(--tds-toggle-switch-track-height);
+  outline:var(--tds-toggle-switch-track-outline);
+  outline-offset:var(--t-spacing-fourth);
+  background-color:var(--tds-toggle-switch-track-background-color);
+  border-radius:var(--t-border-radius-round);
+  transition:var(--tds-toggle-switch-track-transition);
+}
+
+.tds-toggle-switch-track::before{
+    position:absolute;
+    top:var(--t-spacing-fourth);
+    left:var(--t-spacing-fourth);
+    width:var(--tds-toggle-switch-thumb-size);
+    height:var(--tds-toggle-switch-thumb-size);
+    content:"";
+    background-color:#fff;
+    border-radius:var(--t-border-radius-round);
+    transform:var(--tds-toggle-switch-thumb-transform);
+    transition:var(--tds-toggle-switch-thumb-transition);
+  }
+
+@media (prefers-reduced-motion: reduce){
+
+.tds-toggle-switch-track{
+    --tds-toggle-switch-track-transition:none;
+    --tds-toggle-switch-thumb-transition:none;
+}
+  }
+
+.tds-toggle-switch-description{
+  display:flex;
+  grid-area:2 / 2;
+  align-items:flex-start;
+  margin:0;
+  font-size:var(--tds-toggle-switch-description-font-size);
+  line-height:var(--tds-toggle-switch-description-line-height);
+  color:var(--tds-toggle-switch-description-color);
+  cursor:text;
+}
+
+.tds-toggle-switch--sm{
+  --tds-toggle-switch-font-size:var(--t-font-size-sm);
+  --tds-toggle-switch-line-height:1.35;
+  --tds-toggle-switch-track-height:var(--t-element-size-lg);
+  --tds-toggle-switch-thumb-size:var(--t-element-size-sm);
+  --tds-toggle-switch-description-font-size:var(--t-font-size-xs);
+  --tds-toggle-switch-description-line-height:1.3;
+}
+
+.tds-toggle-switch--hide-label{
+  --tds-toggle-switch-display:inline-flex;
+}
+
 /*# sourceMappingURL=index.css.map */