@planningcenter/tapestry 2.9.1-rc.1 → 2.10.0-rc.0

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

@@ -1,7 +1,12 @@
 import React, { InputHTMLAttributes } from "react";
 export type RadioSize = "md" | "sm";
-export interface RadioProps {
+interface RadioBaseProps {
     description?: string;
+    name: string;
+    size?: RadioSize;
+}
+interface RadioWithLabel extends RadioBaseProps {
+    "aria-labelledby"?: never;
     /**
      * Label content for the radio. When using non-string content
      * (e.g. JSX), it must not contain interactive elements. This
@@ -9,20 +14,28 @@ export interface RadioProps {
      * well as Tapestry or Tapestry-React interactive components.
      */
     label: React.ReactNode;
-    name: string;
-    size?: RadioSize;
 }
+interface RadioWithAriaLabelledBy extends RadioBaseProps {
+    "aria-labelledby": string;
+    label?: never;
+}
+export type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy;
 export type RadioElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof RadioProps | "type"> & RadioProps;
 /**
  * A radio component that renders as a radio input with label.
  * Supports various sizes.
  * Must have a name attribute.
  *
+ * **Required:** You must provide either:
+ * - `label` - Label content for the radio
+ * - `aria-labelledby` - ID of an external element that provides the label
+ *
  * When using non-string content for `label` (e.g. JSX), it must not contain
  * interactive elements. This includes native HTML elements such as `<a>` and
  * `<button>`, as well as Tapestry or Tapestry-React interactive components.
  *
  * @component
  */
-export declare const Radio: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | keyof RadioProps> & RadioProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Radio: React.ForwardRefExoticComponent<RadioElementProps & React.RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=Radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,WAAW,UAAU;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,oKAuCjB,CAAA"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,UAAU,cAAe,SAAQ,cAAc;IAC7C,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,uBAAwB,SAAQ,cAAc;IACtD,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,UAAU,GAAG,cAAc,GAAG,uBAAuB,CAAA;AAEjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,UAAU,GAAG,MAAM,CAC1B,GACC,UAAU,CAAA;AAEZ;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK,4FAuCjB,CAAA"}

package/dist/components/radio/Radio.js

@@ -7,6 +7,10 @@ import { useId } from '../../utilities/useId.js';
  * Supports various sizes.
  * Must have a name attribute.
  *
+ * **Required:** You must provide either:
+ * - `label` - Label content for the radio
+ * - `aria-labelledby` - ID of an external element that provides the label
+ *
  * When using non-string content for `label` (e.g. JSX), it must not contain
  * interactive elements. This includes native HTML elements such as `<a>` and
  * `<button>`, as well as Tapestry or Tapestry-React interactive components.
@@ -19,7 +23,7 @@ const Radio = forwardRef(({ className, description, id, label, size = "md", ...r
     const radioId = id || `tds-radio-${stableId}`;
     return (React.createElement("div", { className: combinedClassName },
         React.createElement("input", { ...restProps, "aria-describedby": description ? `${radioId}-description` : undefined, id: radioId, ref: ref, type: "radio" }),
-        React.createElement("label", { htmlFor: radioId }, label),
+        label && React.createElement("label", { htmlFor: radioId }, label),
         description && (React.createElement("p", { id: `${radioId}-description`, className: "tds-radio-description" }, description))));
 });
 Radio.displayName = "Radio";

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\nexport interface RadioProps {\n  description?: string\n  /**\n   * Label content for the radio. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n  name: string\n  size?: RadioSize\n}\n\nexport type RadioElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof RadioProps | \"type\"\n> &\n  RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n  (\n    {\n      className,\n      description,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: RadioElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-radio\",\n      size && size === \"sm\" && `tds-radio--sm`,\n      className\n    )\n\n    const stableId = useId()\n    const radioId = id || `tds-radio-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <input\n          {...restProps}\n          aria-describedby={description ? `${radioId}-description` : undefined}\n          id={radioId}\n          ref={ref}\n          type=\"radio\"\n        />\n        <label htmlFor={radioId}>{label}</label>\n        {description && (\n          <p id={`${radioId}-description`} className=\"tds-radio-description\">\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":[],"mappings":";;;;AA0BA;;;;;;;;;;AAUG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACvC,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type RadioSize = \"md\" | \"sm\"\n\ninterface RadioBaseProps {\n  description?: string\n  name: string\n  size?: RadioSize\n}\n\ninterface RadioWithLabel extends RadioBaseProps {\n  \"aria-labelledby\"?: never\n  /**\n   * Label content for the radio. When using non-string content\n   * (e.g. JSX), it must not contain interactive elements. This\n   * includes native HTML elements such as `<a>` and `<button>`, as\n   * well as Tapestry or Tapestry-React interactive components.\n   */\n  label: React.ReactNode\n}\n\ninterface RadioWithAriaLabelledBy extends RadioBaseProps {\n  \"aria-labelledby\": string\n  label?: never\n}\n\nexport type RadioProps = RadioWithLabel | RadioWithAriaLabelledBy\n\nexport type RadioElementProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  keyof RadioProps | \"type\"\n> &\n  RadioProps\n\n/**\n * A radio component that renders as a radio input with label.\n * Supports various sizes.\n * Must have a name attribute.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the radio\n * - `aria-labelledby` - ID of an external element that provides the label\n *\n * When using non-string content for `label` (e.g. JSX), it must not contain\n * interactive elements. This includes native HTML elements such as `<a>` and\n * `<button>`, as well as Tapestry or Tapestry-React interactive components.\n *\n * @component\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioElementProps>(\n  (\n    {\n      className,\n      description,\n      id,\n      label,\n      size = \"md\",\n      ...restProps\n    }: RadioElementProps,\n    ref\n  ) => {\n    const combinedClassName = classNames(\n      \"tds-radio\",\n      size && size === \"sm\" && `tds-radio--sm`,\n      className\n    )\n\n    const stableId = useId()\n    const radioId = id || `tds-radio-${stableId}`\n\n    return (\n      <div className={combinedClassName}>\n        <input\n          {...restProps}\n          aria-describedby={description ? `${radioId}-description` : undefined}\n          id={radioId}\n          ref={ref}\n          type=\"radio\"\n        />\n        {label && <label htmlFor={radioId}>{label}</label>}\n        {description && (\n          <p id={`${radioId}-description`} className=\"tds-radio-description\">\n            {description}\n          </p>\n        )}\n      </div>\n    )\n  }\n)\n\nRadio.displayName = \"Radio\"\n"],"names":[],"mappings":";;;;AAqCA;;;;;;;;;;;;;;AAcG;AACI,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACM,EACpB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,UAAU,CAClC,WAAW,EACX,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,aAAA,CAAe,EACxC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,OAAO,GAAG,EAAE,IAAI,CAAA,UAAA,EAAa,QAAQ,EAAE;AAE7C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;QAC/B,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EACK,WAAW,GAAG,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,GAAG,SAAS,EACpE,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EAAA,CACZ;AACD,QAAA,KAAK,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAS;AACjD,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,EAAE,EAAE,CAAA,EAAG,OAAO,CAAA,YAAA,CAAc,EAAE,SAAS,EAAC,uBAAuB,EAAA,EAC/D,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/reactRender.css

@@ -2072,153 +2072,6 @@ a[class="tds-btn"]{
 @media (prefers-color-scheme: dark){
 }
 
-.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-areas:"input label" ". description";
-  grid-template-columns:var(--tds-toggle-switch-track-width) auto;
-  -moz-column-gap:var(--tds-toggle-switch-column-gap);
-       column-gap: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;
-    grid-area:input;
-    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:label;
-    -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:has(.tds-toggle-switch-description){
-    row-gap:var(--t-spacing-fourth);
-  }
-
-.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;
-  grid-area:input;
-  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:description;
-  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;
-}
-
 .tds-checkbox{
   --tds-checkbox-font-size:var(--t-font-size-md);
   --tds-checkbox-cursor:pointer;
@@ -2409,6 +2262,146 @@ a[class="tds-btn"]{
   --tds-checkbox-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;
+}
+
 .t-banner{
   --t-banner-font-size:var(--t-font-size-md);
   --t-banner-font-color:var(--t-text-color);