@planningcenter/tapestry 2.9.1-rc.0 → 2.9.1-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/checkbox/Checkbox.d.ts +12 -2
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +5 -1
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/radio/Radio.d.ts +12 -2
- package/dist/components/radio/Radio.d.ts.map +1 -1
- package/dist/components/radio/Radio.js +5 -1
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/toggle-switch/ToggleSwitch.d.ts +21 -4
- package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
- package/dist/components/toggle-switch/ToggleSwitch.js +5 -1
- package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/dist/reactRender.css +147 -147
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +147 -147
- package/dist/reactRenderLegacy.css.map +1 -1
- package/package.json +2 -2
|
@@ -9,7 +9,13 @@ interface CheckboxBaseProps {
|
|
|
9
9
|
}
|
|
10
10
|
interface CheckboxWithLabel extends CheckboxBaseProps {
|
|
11
11
|
"aria-labelledby"?: never;
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Label content for the checkbox. When using non-string content
|
|
14
|
+
* (e.g. JSX), it must not contain interactive elements. This
|
|
15
|
+
* includes native HTML elements such as `<a>` and `<button>`, as
|
|
16
|
+
* well as Tapestry or Tapestry-React interactive components.
|
|
17
|
+
*/
|
|
18
|
+
label: React.ReactNode;
|
|
13
19
|
}
|
|
14
20
|
interface CheckboxWithAriaLabelledBy extends CheckboxBaseProps {
|
|
15
21
|
"aria-labelledby": string;
|
|
@@ -22,9 +28,13 @@ export type CheckboxElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, k
|
|
|
22
28
|
* Supports various sizes, error states, and disabled states.
|
|
23
29
|
*
|
|
24
30
|
* **Required:** You must provide either:
|
|
25
|
-
* - `label` - Label
|
|
31
|
+
* - `label` - Label content for the checkbox
|
|
26
32
|
* - `aria-labelledby` - ID of an external element that provides the label
|
|
27
33
|
*
|
|
34
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
35
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
36
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
37
|
+
*
|
|
28
38
|
* @component
|
|
29
39
|
*/
|
|
30
40
|
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxElementProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAe,MAAM,OAAO,CAAA;AAI3E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtC,UAAU,iBAAiB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,UAAU,iBAAkB,SAAQ,iBAAiB;IACnD,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,0BAA2B,SAAQ,iBAAiB;IAC5D,iBAAiB,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,0BAA0B,CAAA;AAE1E,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,aAAa,GAAG,MAAM,CAC7B,GACC,aAAa,CAAA;AAEf;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,+FAqEpB,CAAA"}
|
|
@@ -8,9 +8,13 @@ import { useId } from '../../utilities/useId.js';
|
|
|
8
8
|
* Supports various sizes, error states, and disabled states.
|
|
9
9
|
*
|
|
10
10
|
* **Required:** You must provide either:
|
|
11
|
-
* - `label` - Label
|
|
11
|
+
* - `label` - Label content for the checkbox
|
|
12
12
|
* - `aria-labelledby` - ID of an external element that provides the label
|
|
13
13
|
*
|
|
14
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
15
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
16
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
17
|
+
*
|
|
14
18
|
* @component
|
|
15
19
|
*/
|
|
16
20
|
const Checkbox = forwardRef(({ className, description, id, indeterminate = false, invalid, label, size = "md", ...restProps }, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\ninterface CheckboxBaseProps {\n description?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}\n\ninterface CheckboxWithLabel extends CheckboxBaseProps {\n \"aria-labelledby\"?: never\n label:
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type CheckboxSize = \"md\" | \"sm\"\n\ninterface CheckboxBaseProps {\n description?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}\n\ninterface CheckboxWithLabel extends CheckboxBaseProps {\n \"aria-labelledby\"?: never\n /**\n * Label content for the checkbox. 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 CheckboxWithAriaLabelledBy extends CheckboxBaseProps {\n \"aria-labelledby\": string\n label?: never\n}\n\nexport type CheckboxProps = CheckboxWithLabel | CheckboxWithAriaLabelledBy\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the checkbox\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 Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n id,\n indeterminate = false,\n invalid,\n label,\n size = \"md\",\n ...restProps\n }: CheckboxElementProps,\n ref\n ) => {\n const callbackRef = useCallback(\n (element: HTMLInputElement | null) => {\n if (element) {\n element.indeterminate = indeterminate\n }\n\n // Handle the forwarded ref\n if (typeof ref === \"function\") {\n ref(element)\n } else if (ref && typeof ref === \"object\") {\n ref.current = element\n }\n },\n [ref, indeterminate]\n )\n\n const combinedClassName = classNames(\n \"tds-checkbox\",\n size && size === \"sm\" && `tds-checkbox--sm`,\n invalid && \"tds-checkbox--invalid\",\n className\n )\n\n const stableId = useId()\n const checkboxId = id || `tds-checkbox-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <input\n {...restProps}\n aria-describedby={\n description ? `${checkboxId}-description` : undefined\n }\n aria-invalid={invalid}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n {label && <label htmlFor={checkboxId}>{label}</label>}\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n <Icon\n className=\"tds-checkbox-description-invalid-icon\"\n symbol=\"general#exclamation-triangle\"\n aria-hidden\n />\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;;;AAyCA;;;;;;;;;;;;;AAaG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,EAAE,EACF,aAAa,GAAG,KAAK,EACrB,OAAO,EACP,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,OAAgC,KAAI;QACnC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,CAAC,aAAa,GAAG,aAAa;QACvC;;AAGA,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC;QACd;AAAO,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO;QACvB;AACF,IAAA,CAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB;IAED,MAAM,iBAAiB,GAAG,UAAU,CAClC,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,gBAAA,CAAkB,EAC3C,OAAO,IAAI,uBAAuB,EAClC,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,UAAU,GAAG,EAAE,IAAI,CAAA,aAAA,EAAgB,QAAQ,EAAE;AAEnD,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,EAEX,WAAW,GAAG,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,GAAG,SAAS,EAAA,cAAA,EAEzC,OAAO,EACrB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EAAA,CACf;AACD,QAAA,KAAK,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;QACpD,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAA,YAAA,CAAc,EAC/B,SAAS,EAAC,0BAA0B,EAAA;YAEpC,KAAA,CAAA,aAAA,CAAC,IAAI,IACH,SAAS,EAAC,uCAAuC,EACjD,MAAM,EAAC,8BAA8B,EAAA,aAAA,EAAA,IAAA,EAAA,CAErC;AACD,YAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
|
|
@@ -2,7 +2,13 @@ import React, { InputHTMLAttributes } from "react";
|
|
|
2
2
|
export type RadioSize = "md" | "sm";
|
|
3
3
|
export interface RadioProps {
|
|
4
4
|
description?: string;
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Label content for the radio. When using non-string content
|
|
7
|
+
* (e.g. JSX), it must not contain interactive elements. This
|
|
8
|
+
* includes native HTML elements such as `<a>` and `<button>`, as
|
|
9
|
+
* well as Tapestry or Tapestry-React interactive components.
|
|
10
|
+
*/
|
|
11
|
+
label: React.ReactNode;
|
|
6
12
|
name: string;
|
|
7
13
|
size?: RadioSize;
|
|
8
14
|
}
|
|
@@ -10,7 +16,11 @@ export type RadioElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyo
|
|
|
10
16
|
/**
|
|
11
17
|
* A radio component that renders as a radio input with label.
|
|
12
18
|
* Supports various sizes.
|
|
13
|
-
*
|
|
19
|
+
* Must have a name attribute.
|
|
20
|
+
*
|
|
21
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
22
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
23
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
14
24
|
*
|
|
15
25
|
* @component
|
|
16
26
|
*/
|
|
@@ -1 +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,KAAK,EAAE,
|
|
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"}
|
|
@@ -5,7 +5,11 @@ import { useId } from '../../utilities/useId.js';
|
|
|
5
5
|
/**
|
|
6
6
|
* A radio component that renders as a radio input with label.
|
|
7
7
|
* Supports various sizes.
|
|
8
|
-
*
|
|
8
|
+
* Must have a name attribute.
|
|
9
|
+
*
|
|
10
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
11
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
12
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
9
13
|
*
|
|
10
14
|
* @component
|
|
11
15
|
*/
|
|
@@ -1 +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 label:
|
|
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;;;;"}
|
|
@@ -9,24 +9,41 @@ interface ToggleSwitchBaseProps {
|
|
|
9
9
|
required?: never;
|
|
10
10
|
size?: ToggleSwitchSize;
|
|
11
11
|
}
|
|
12
|
-
interface
|
|
12
|
+
interface ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {
|
|
13
13
|
"aria-labelledby"?: never;
|
|
14
|
-
hideLabel?:
|
|
14
|
+
hideLabel?: false;
|
|
15
|
+
/**
|
|
16
|
+
* Label content for the toggle switch. When using non-string content
|
|
17
|
+
* (e.g. JSX), it must not contain interactive elements. This
|
|
18
|
+
* includes native HTML elements such as `<a>` and `<button>`, as
|
|
19
|
+
* well as Tapestry or Tapestry-React interactive components.
|
|
20
|
+
*/
|
|
21
|
+
label: React.ReactNode;
|
|
22
|
+
}
|
|
23
|
+
interface ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {
|
|
24
|
+
"aria-labelledby"?: never;
|
|
25
|
+
hideLabel: true;
|
|
26
|
+
/** Label text for the toggle switch, used as an accessible `aria-label`. */
|
|
15
27
|
label: string;
|
|
16
28
|
}
|
|
17
29
|
interface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {
|
|
18
30
|
"aria-labelledby": string;
|
|
19
31
|
hideLabel?: never;
|
|
32
|
+
/** Not available when `aria-labelledby` is provided. */
|
|
20
33
|
label?: never;
|
|
21
34
|
}
|
|
22
|
-
export type ToggleSwitchProps =
|
|
35
|
+
export type ToggleSwitchProps = ToggleSwitchWithVisibleLabel | ToggleSwitchWithHiddenLabel | ToggleSwitchWithAriaLabelledBy;
|
|
23
36
|
export type ToggleSwitchElementProps = Omit<InputHTMLAttributes<HTMLInputElement>, keyof ToggleSwitchProps | "type" | "required" | "aria-required"> & ToggleSwitchProps;
|
|
24
37
|
/**
|
|
25
38
|
* A toggle switch component that renders as a checkbox input styled as a switch.
|
|
26
39
|
*
|
|
27
40
|
* **Required:** You must provide either:
|
|
28
|
-
* - `label` - Label
|
|
41
|
+
* - `label` - Label content for the switch (must be a string when `hideLabel` is true)
|
|
29
42
|
* - `aria-labelledby` - ID of an external element that provides the label
|
|
43
|
+
*
|
|
44
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
45
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
46
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
30
47
|
*/
|
|
31
48
|
export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchElementProps & React.RefAttributes<HTMLInputElement>>;
|
|
32
49
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAA;CACxB;AAED,UAAU,
|
|
1
|
+
{"version":3,"file":"ToggleSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,EAAc,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAI9D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,UAAU,qBAAqB;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAA;IACtB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAA;CACxB;AAED,UAAU,4BAA6B,SAAQ,qBAAqB;IAClE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB;;;;;OAKG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,UAAU,2BAA4B,SAAQ,qBAAqB;IACjE,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,SAAS,EAAE,IAAI,CAAA;IACf,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,8BAA+B,SAAQ,qBAAqB;IACpE,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,MAAM,MAAM,iBAAiB,GACzB,4BAA4B,GAC5B,2BAA2B,GAC3B,8BAA8B,CAAA;AAElC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,iBAAiB,GAAG,MAAM,GAAG,UAAU,GAAG,eAAe,CAChE,GACC,iBAAiB,CAAA;AAEnB;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,mGA0DxB,CAAA"}
|
|
@@ -6,8 +6,12 @@ import { useId } from '../../utilities/useId.js';
|
|
|
6
6
|
* A toggle switch component that renders as a checkbox input styled as a switch.
|
|
7
7
|
*
|
|
8
8
|
* **Required:** You must provide either:
|
|
9
|
-
* - `label` - Label
|
|
9
|
+
* - `label` - Label content for the switch (must be a string when `hideLabel` is true)
|
|
10
10
|
* - `aria-labelledby` - ID of an external element that provides the label
|
|
11
|
+
*
|
|
12
|
+
* When using non-string content for `label` (e.g. JSX), it must not contain
|
|
13
|
+
* interactive elements. This includes native HTML elements such as `<a>` and
|
|
14
|
+
* `<button>`, as well as Tapestry or Tapestry-React interactive components.
|
|
11
15
|
*/
|
|
12
16
|
const ToggleSwitch = forwardRef(({ "aria-describedby": ariaDescribedby, checked, className, description, hideLabel = false, id, label, size = "md", ...restProps }, ref) => {
|
|
13
17
|
const combinedClassName = classNames("tds-toggle-switch", size && size === "sm" && `tds-toggle-switch--sm`, hideLabel && `tds-toggle-switch--hide-label`, className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSwitch.js","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type ToggleSwitchSize = \"md\" | \"sm\"\n\ninterface ToggleSwitchBaseProps {\n \"aria-invalid\"?: never\n \"aria-label\"?: never\n \"aria-required\"?: never\n description?: string\n required?: never\n size?: ToggleSwitchSize\n}\n\ninterface
|
|
1
|
+
{"version":3,"file":"ToggleSwitch.js","sources":["../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes } from \"react\"\n\nimport { useId } from \"../../utilities/useId\"\n\nexport type ToggleSwitchSize = \"md\" | \"sm\"\n\ninterface ToggleSwitchBaseProps {\n \"aria-invalid\"?: never\n \"aria-label\"?: never\n \"aria-required\"?: never\n description?: string\n required?: never\n size?: ToggleSwitchSize\n}\n\ninterface ToggleSwitchWithVisibleLabel extends ToggleSwitchBaseProps {\n \"aria-labelledby\"?: never\n hideLabel?: false\n /**\n * Label content for the toggle switch. 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 ToggleSwitchWithHiddenLabel extends ToggleSwitchBaseProps {\n \"aria-labelledby\"?: never\n hideLabel: true\n /** Label text for the toggle switch, used as an accessible `aria-label`. */\n label: string\n}\n\ninterface ToggleSwitchWithAriaLabelledBy extends ToggleSwitchBaseProps {\n \"aria-labelledby\": string\n hideLabel?: never\n /** Not available when `aria-labelledby` is provided. */\n label?: never\n}\n\nexport type ToggleSwitchProps =\n | ToggleSwitchWithVisibleLabel\n | ToggleSwitchWithHiddenLabel\n | ToggleSwitchWithAriaLabelledBy\n\nexport type ToggleSwitchElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof ToggleSwitchProps | \"type\" | \"required\" | \"aria-required\"\n> &\n ToggleSwitchProps\n\n/**\n * A toggle switch component that renders as a checkbox input styled as a switch.\n *\n * **Required:** You must provide either:\n * - `label` - Label content for the switch (must be a string when `hideLabel` is true)\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 */\nexport const ToggleSwitch = forwardRef<\n HTMLInputElement,\n ToggleSwitchElementProps\n>(\n (\n {\n \"aria-describedby\": ariaDescribedby,\n checked,\n className,\n description,\n hideLabel = false,\n id,\n label,\n size = \"md\",\n ...restProps\n }: ToggleSwitchElementProps,\n ref\n ) => {\n const combinedClassName = classNames(\n \"tds-toggle-switch\",\n size && size === \"sm\" && `tds-toggle-switch--sm`,\n hideLabel && `tds-toggle-switch--hide-label`,\n className\n )\n\n const stableId = useId()\n const toggleSwitchId = id || `tds-toggle-switch-${stableId}`\n\n return (\n <div className={combinedClassName}>\n <div className=\"tds-toggle-switch-track\" aria-hidden=\"true\"></div>\n <input\n {...restProps}\n id={toggleSwitchId}\n type=\"checkbox\"\n role=\"switch\"\n aria-checked={checked}\n aria-label={hideLabel ? (label as string) : undefined}\n aria-describedby={\n description && !hideLabel\n ? `${toggleSwitchId}-description`\n : ariaDescribedby\n }\n checked={checked}\n ref={ref}\n />\n {label && !hideLabel && <label htmlFor={toggleSwitchId}>{label}</label>}\n {description && !hideLabel && (\n <p\n id={`${toggleSwitchId}-description`}\n className=\"tds-toggle-switch-description\"\n >\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nToggleSwitch.displayName = \"ToggleSwitch\"\n"],"names":[],"mappings":";;;;AAuDA;;;;;;;;;;AAUG;AACI,MAAM,YAAY,GAAG,UAAU,CAIpC,CACE,EACE,kBAAkB,EAAE,eAAe,EACnC,OAAO,EACP,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACa,EAC3B,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,UAAU,CAClC,mBAAmB,EACnB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAA,qBAAA,CAAuB,EAChD,SAAS,IAAI,+BAA+B,EAC5C,SAAS,CACV;AAED,IAAA,MAAM,QAAQ,GAAG,KAAK,EAAE;AACxB,IAAA,MAAM,cAAc,GAAG,EAAE,IAAI,CAAA,kBAAA,EAAqB,QAAQ,EAAE;AAE5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,aAAA,EAAa,MAAM,EAAA,CAAO;AAClE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EACb,EAAE,EAAE,cAAc,EAClB,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,OAAO,EAAA,YAAA,EACT,SAAS,GAAI,KAAgB,GAAG,SAAS,EAAA,kBAAA,EAEnD,WAAW,IAAI,CAAC;kBACZ,CAAA,EAAG,cAAc,CAAA,YAAA;kBACjB,eAAe,EAErB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EAAA,CACR;QACD,KAAK,IAAI,CAAC,SAAS,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,cAAc,EAAA,EAAG,KAAK,CAAS;QACtE,WAAW,IAAI,CAAC,SAAS,KACxB,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,cAAc,cAAc,EACnC,SAAS,EAAC,+BAA+B,EAAA,EAExC,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}
|
package/dist/reactRender.css
CHANGED
|
@@ -2072,6 +2072,153 @@ a[class="tds-btn"]{
|
|
|
2072
2072
|
@media (prefers-color-scheme: dark){
|
|
2073
2073
|
}
|
|
2074
2074
|
|
|
2075
|
+
.tds-toggle-switch{
|
|
2076
|
+
--tds-toggle-switch-font-size:var(--t-font-size-md);
|
|
2077
|
+
--tds-toggle-switch-column-gap:var(--t-spacing-2);
|
|
2078
|
+
--tds-toggle-switch-cursor:pointer;
|
|
2079
|
+
--tds-toggle-switch-display:inline-grid;
|
|
2080
|
+
--tds-toggle-switch-line-height:1.4;
|
|
2081
|
+
|
|
2082
|
+
--tds-toggle-switch-label-color:var(--t-text-color);
|
|
2083
|
+
|
|
2084
|
+
--tds-toggle-switch-track-width:var(--t-container-size-md);
|
|
2085
|
+
--tds-toggle-switch-track-outline:none;
|
|
2086
|
+
--tds-toggle-switch-track-height:var(--t-container-size-xs);
|
|
2087
|
+
--tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
|
|
2088
|
+
--tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
|
|
2089
|
+
|
|
2090
|
+
--tds-toggle-switch-thumb-size:var(--t-element-size-md);
|
|
2091
|
+
--tds-toggle-switch-thumb-transform:translateX(0);
|
|
2092
|
+
--tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
|
|
2093
|
+
|
|
2094
|
+
--tds-toggle-switch-description-font-size:var(--t-font-size-sm);
|
|
2095
|
+
--tds-toggle-switch-description-line-height:1.35;
|
|
2096
|
+
--tds-toggle-switch-description-color:var(--t-text-color-secondary);
|
|
2097
|
+
|
|
2098
|
+
display:var(--tds-toggle-switch-display);
|
|
2099
|
+
grid-template-areas:"input label" ". description";
|
|
2100
|
+
grid-template-columns:var(--tds-toggle-switch-track-width) auto;
|
|
2101
|
+
-moz-column-gap:var(--tds-toggle-switch-column-gap);
|
|
2102
|
+
column-gap:var(--tds-toggle-switch-column-gap);
|
|
2103
|
+
-webkit-user-select:none;
|
|
2104
|
+
-moz-user-select:none;
|
|
2105
|
+
user-select:none;
|
|
2106
|
+
}
|
|
2107
|
+
|
|
2108
|
+
.tds-toggle-switch input[type="checkbox"]{
|
|
2109
|
+
position:absolute;
|
|
2110
|
+
grid-area:input;
|
|
2111
|
+
width:var(--tds-toggle-switch-track-width);
|
|
2112
|
+
height:var(--tds-toggle-switch-track-height);
|
|
2113
|
+
margin:0;
|
|
2114
|
+
-webkit-appearance:none;
|
|
2115
|
+
-moz-appearance:none;
|
|
2116
|
+
appearance:none;
|
|
2117
|
+
cursor:var(--tds-toggle-switch-cursor);
|
|
2118
|
+
background-color:transparent;
|
|
2119
|
+
border:0;
|
|
2120
|
+
border-radius:var(--t-border-radius-round);
|
|
2121
|
+
}
|
|
2122
|
+
|
|
2123
|
+
.tds-toggle-switch label{
|
|
2124
|
+
display:inline-flex;
|
|
2125
|
+
grid-area:label;
|
|
2126
|
+
-moz-column-gap:var(--tds-toggle-switch-column-gap);
|
|
2127
|
+
column-gap:var(--tds-toggle-switch-column-gap);
|
|
2128
|
+
margin-top:-.09375em;
|
|
2129
|
+
font-size:var(--tds-toggle-switch-font-size);
|
|
2130
|
+
font-weight:var(--t-font-weight-normal);
|
|
2131
|
+
line-height:var(--tds-toggle-switch-line-height);
|
|
2132
|
+
color:var(--tds-toggle-switch-label-color);
|
|
2133
|
+
cursor:var(--tds-toggle-switch-cursor);
|
|
2134
|
+
}
|
|
2135
|
+
|
|
2136
|
+
.tds-toggle-switch:has(.tds-toggle-switch-description){
|
|
2137
|
+
row-gap:var(--t-spacing-fourth);
|
|
2138
|
+
}
|
|
2139
|
+
|
|
2140
|
+
.tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
|
|
2141
|
+
--tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
|
|
2142
|
+
}
|
|
2143
|
+
|
|
2144
|
+
.tds-toggle-switch:has(input:focus-visible){
|
|
2145
|
+
--tds-toggle-switch-track-outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2148
|
+
.tds-toggle-switch:has(input:checked){
|
|
2149
|
+
--tds-toggle-switch-track-background-color:var(--t-fill-color-control);
|
|
2150
|
+
--tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
|
|
2151
|
+
}
|
|
2152
|
+
|
|
2153
|
+
.tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
|
|
2154
|
+
--tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
.tds-toggle-switch:has(input:disabled){
|
|
2158
|
+
--tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
|
|
2159
|
+
--tds-toggle-switch-label-color:var(--t-text-color-disabled);
|
|
2160
|
+
--tds-toggle-switch-description-color:var(--t-text-color-disabled);
|
|
2161
|
+
--tds-toggle-switch-cursor:not-allowed;
|
|
2162
|
+
}
|
|
2163
|
+
|
|
2164
|
+
.tds-toggle-switch-track{
|
|
2165
|
+
position:relative;
|
|
2166
|
+
flex-shrink:0;
|
|
2167
|
+
grid-area:input;
|
|
2168
|
+
width:var(--tds-toggle-switch-track-width);
|
|
2169
|
+
height:var(--tds-toggle-switch-track-height);
|
|
2170
|
+
outline:var(--tds-toggle-switch-track-outline);
|
|
2171
|
+
outline-offset:var(--t-spacing-fourth);
|
|
2172
|
+
background-color:var(--tds-toggle-switch-track-background-color);
|
|
2173
|
+
border-radius:var(--t-border-radius-round);
|
|
2174
|
+
transition:var(--tds-toggle-switch-track-transition);
|
|
2175
|
+
}
|
|
2176
|
+
|
|
2177
|
+
.tds-toggle-switch-track::before{
|
|
2178
|
+
position:absolute;
|
|
2179
|
+
top:var(--t-spacing-fourth);
|
|
2180
|
+
left:var(--t-spacing-fourth);
|
|
2181
|
+
width:var(--tds-toggle-switch-thumb-size);
|
|
2182
|
+
height:var(--tds-toggle-switch-thumb-size);
|
|
2183
|
+
content:"";
|
|
2184
|
+
background-color:#fff;
|
|
2185
|
+
border-radius:var(--t-border-radius-round);
|
|
2186
|
+
transform:var(--tds-toggle-switch-thumb-transform);
|
|
2187
|
+
transition:var(--tds-toggle-switch-thumb-transition);
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2190
|
+
@media (prefers-reduced-motion: reduce){
|
|
2191
|
+
|
|
2192
|
+
.tds-toggle-switch-track{
|
|
2193
|
+
--tds-toggle-switch-track-transition:none;
|
|
2194
|
+
--tds-toggle-switch-thumb-transition:none;
|
|
2195
|
+
}
|
|
2196
|
+
}
|
|
2197
|
+
|
|
2198
|
+
.tds-toggle-switch-description{
|
|
2199
|
+
display:flex;
|
|
2200
|
+
grid-area:description;
|
|
2201
|
+
align-items:flex-start;
|
|
2202
|
+
margin:0;
|
|
2203
|
+
font-size:var(--tds-toggle-switch-description-font-size);
|
|
2204
|
+
line-height:var(--tds-toggle-switch-description-line-height);
|
|
2205
|
+
color:var(--tds-toggle-switch-description-color);
|
|
2206
|
+
cursor:text;
|
|
2207
|
+
}
|
|
2208
|
+
|
|
2209
|
+
.tds-toggle-switch--sm{
|
|
2210
|
+
--tds-toggle-switch-font-size:var(--t-font-size-sm);
|
|
2211
|
+
--tds-toggle-switch-line-height:1.35;
|
|
2212
|
+
--tds-toggle-switch-track-height:var(--t-element-size-lg);
|
|
2213
|
+
--tds-toggle-switch-thumb-size:var(--t-element-size-sm);
|
|
2214
|
+
--tds-toggle-switch-description-font-size:var(--t-font-size-xs);
|
|
2215
|
+
--tds-toggle-switch-description-line-height:1.3;
|
|
2216
|
+
}
|
|
2217
|
+
|
|
2218
|
+
.tds-toggle-switch--hide-label{
|
|
2219
|
+
--tds-toggle-switch-display:inline-flex;
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2075
2222
|
.tds-checkbox{
|
|
2076
2223
|
--tds-checkbox-font-size:var(--t-font-size-md);
|
|
2077
2224
|
--tds-checkbox-cursor:pointer;
|
|
@@ -2262,153 +2409,6 @@ a[class="tds-btn"]{
|
|
|
2262
2409
|
--tds-checkbox-description-line-height:1.3;
|
|
2263
2410
|
}
|
|
2264
2411
|
|
|
2265
|
-
.tds-toggle-switch{
|
|
2266
|
-
--tds-toggle-switch-font-size:var(--t-font-size-md);
|
|
2267
|
-
--tds-toggle-switch-column-gap:var(--t-spacing-2);
|
|
2268
|
-
--tds-toggle-switch-cursor:pointer;
|
|
2269
|
-
--tds-toggle-switch-display:inline-grid;
|
|
2270
|
-
--tds-toggle-switch-line-height:1.4;
|
|
2271
|
-
|
|
2272
|
-
--tds-toggle-switch-label-color:var(--t-text-color);
|
|
2273
|
-
|
|
2274
|
-
--tds-toggle-switch-track-width:var(--t-container-size-md);
|
|
2275
|
-
--tds-toggle-switch-track-outline:none;
|
|
2276
|
-
--tds-toggle-switch-track-height:var(--t-container-size-xs);
|
|
2277
|
-
--tds-toggle-switch-track-background-color:var(--t-fill-color-control-neutral-off);
|
|
2278
|
-
--tds-toggle-switch-track-transition:background-color 180ms ease-in-out;
|
|
2279
|
-
|
|
2280
|
-
--tds-toggle-switch-thumb-size:var(--t-element-size-md);
|
|
2281
|
-
--tds-toggle-switch-thumb-transform:translateX(0);
|
|
2282
|
-
--tds-toggle-switch-thumb-transition:transform 180ms ease-in-out;
|
|
2283
|
-
|
|
2284
|
-
--tds-toggle-switch-description-font-size:var(--t-font-size-sm);
|
|
2285
|
-
--tds-toggle-switch-description-line-height:1.35;
|
|
2286
|
-
--tds-toggle-switch-description-color:var(--t-text-color-secondary);
|
|
2287
|
-
|
|
2288
|
-
display:var(--tds-toggle-switch-display);
|
|
2289
|
-
grid-template-areas:"input label" ". description";
|
|
2290
|
-
grid-template-columns:var(--tds-toggle-switch-track-width) auto;
|
|
2291
|
-
-moz-column-gap:var(--tds-toggle-switch-column-gap);
|
|
2292
|
-
column-gap:var(--tds-toggle-switch-column-gap);
|
|
2293
|
-
-webkit-user-select:none;
|
|
2294
|
-
-moz-user-select:none;
|
|
2295
|
-
user-select:none;
|
|
2296
|
-
}
|
|
2297
|
-
|
|
2298
|
-
.tds-toggle-switch input[type="checkbox"]{
|
|
2299
|
-
position:absolute;
|
|
2300
|
-
grid-area:input;
|
|
2301
|
-
width:var(--tds-toggle-switch-track-width);
|
|
2302
|
-
height:var(--tds-toggle-switch-track-height);
|
|
2303
|
-
margin:0;
|
|
2304
|
-
-webkit-appearance:none;
|
|
2305
|
-
-moz-appearance:none;
|
|
2306
|
-
appearance:none;
|
|
2307
|
-
cursor:var(--tds-toggle-switch-cursor);
|
|
2308
|
-
background-color:transparent;
|
|
2309
|
-
border:0;
|
|
2310
|
-
border-radius:var(--t-border-radius-round);
|
|
2311
|
-
}
|
|
2312
|
-
|
|
2313
|
-
.tds-toggle-switch label{
|
|
2314
|
-
display:inline-flex;
|
|
2315
|
-
grid-area:label;
|
|
2316
|
-
-moz-column-gap:var(--tds-toggle-switch-column-gap);
|
|
2317
|
-
column-gap:var(--tds-toggle-switch-column-gap);
|
|
2318
|
-
margin-top:-.09375em;
|
|
2319
|
-
font-size:var(--tds-toggle-switch-font-size);
|
|
2320
|
-
font-weight:var(--t-font-weight-normal);
|
|
2321
|
-
line-height:var(--tds-toggle-switch-line-height);
|
|
2322
|
-
color:var(--tds-toggle-switch-label-color);
|
|
2323
|
-
cursor:var(--tds-toggle-switch-cursor);
|
|
2324
|
-
}
|
|
2325
|
-
|
|
2326
|
-
.tds-toggle-switch:has(.tds-toggle-switch-description){
|
|
2327
|
-
row-gap:var(--t-spacing-fourth);
|
|
2328
|
-
}
|
|
2329
|
-
|
|
2330
|
-
.tds-toggle-switch:not(:has(input:disabled)):has(input:hover){
|
|
2331
|
-
--tds-toggle-switch-track-background-color:var(--t-fill-color-neutral-025);
|
|
2332
|
-
}
|
|
2333
|
-
|
|
2334
|
-
.tds-toggle-switch:has(input:focus-visible){
|
|
2335
|
-
--tds-toggle-switch-track-outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
|
|
2336
|
-
}
|
|
2337
|
-
|
|
2338
|
-
.tds-toggle-switch:has(input:checked){
|
|
2339
|
-
--tds-toggle-switch-track-background-color:var(--t-fill-color-control);
|
|
2340
|
-
--tds-toggle-switch-thumb-transform:translateX(calc(var(--tds-toggle-switch-track-width) - var(--tds-toggle-switch-thumb-size) - var(--t-spacing-half)));
|
|
2341
|
-
}
|
|
2342
|
-
|
|
2343
|
-
.tds-toggle-switch:has(input:checked):not(:has(input:disabled)):has(input:hover){
|
|
2344
|
-
--tds-toggle-switch-track-background-color:var(--t-fill-color-interaction-hover);
|
|
2345
|
-
}
|
|
2346
|
-
|
|
2347
|
-
.tds-toggle-switch:has(input:disabled){
|
|
2348
|
-
--tds-toggle-switch-track-background-color:var(--t-fill-color-control-disabled);
|
|
2349
|
-
--tds-toggle-switch-label-color:var(--t-text-color-disabled);
|
|
2350
|
-
--tds-toggle-switch-description-color:var(--t-text-color-disabled);
|
|
2351
|
-
--tds-toggle-switch-cursor:not-allowed;
|
|
2352
|
-
}
|
|
2353
|
-
|
|
2354
|
-
.tds-toggle-switch-track{
|
|
2355
|
-
position:relative;
|
|
2356
|
-
flex-shrink:0;
|
|
2357
|
-
grid-area:input;
|
|
2358
|
-
width:var(--tds-toggle-switch-track-width);
|
|
2359
|
-
height:var(--tds-toggle-switch-track-height);
|
|
2360
|
-
outline:var(--tds-toggle-switch-track-outline);
|
|
2361
|
-
outline-offset:var(--t-spacing-fourth);
|
|
2362
|
-
background-color:var(--tds-toggle-switch-track-background-color);
|
|
2363
|
-
border-radius:var(--t-border-radius-round);
|
|
2364
|
-
transition:var(--tds-toggle-switch-track-transition);
|
|
2365
|
-
}
|
|
2366
|
-
|
|
2367
|
-
.tds-toggle-switch-track::before{
|
|
2368
|
-
position:absolute;
|
|
2369
|
-
top:var(--t-spacing-fourth);
|
|
2370
|
-
left:var(--t-spacing-fourth);
|
|
2371
|
-
width:var(--tds-toggle-switch-thumb-size);
|
|
2372
|
-
height:var(--tds-toggle-switch-thumb-size);
|
|
2373
|
-
content:"";
|
|
2374
|
-
background-color:#fff;
|
|
2375
|
-
border-radius:var(--t-border-radius-round);
|
|
2376
|
-
transform:var(--tds-toggle-switch-thumb-transform);
|
|
2377
|
-
transition:var(--tds-toggle-switch-thumb-transition);
|
|
2378
|
-
}
|
|
2379
|
-
|
|
2380
|
-
@media (prefers-reduced-motion: reduce){
|
|
2381
|
-
|
|
2382
|
-
.tds-toggle-switch-track{
|
|
2383
|
-
--tds-toggle-switch-track-transition:none;
|
|
2384
|
-
--tds-toggle-switch-thumb-transition:none;
|
|
2385
|
-
}
|
|
2386
|
-
}
|
|
2387
|
-
|
|
2388
|
-
.tds-toggle-switch-description{
|
|
2389
|
-
display:flex;
|
|
2390
|
-
grid-area:description;
|
|
2391
|
-
align-items:flex-start;
|
|
2392
|
-
margin:0;
|
|
2393
|
-
font-size:var(--tds-toggle-switch-description-font-size);
|
|
2394
|
-
line-height:var(--tds-toggle-switch-description-line-height);
|
|
2395
|
-
color:var(--tds-toggle-switch-description-color);
|
|
2396
|
-
cursor:text;
|
|
2397
|
-
}
|
|
2398
|
-
|
|
2399
|
-
.tds-toggle-switch--sm{
|
|
2400
|
-
--tds-toggle-switch-font-size:var(--t-font-size-sm);
|
|
2401
|
-
--tds-toggle-switch-line-height:1.35;
|
|
2402
|
-
--tds-toggle-switch-track-height:var(--t-element-size-lg);
|
|
2403
|
-
--tds-toggle-switch-thumb-size:var(--t-element-size-sm);
|
|
2404
|
-
--tds-toggle-switch-description-font-size:var(--t-font-size-xs);
|
|
2405
|
-
--tds-toggle-switch-description-line-height:1.3;
|
|
2406
|
-
}
|
|
2407
|
-
|
|
2408
|
-
.tds-toggle-switch--hide-label{
|
|
2409
|
-
--tds-toggle-switch-display:inline-flex;
|
|
2410
|
-
}
|
|
2411
|
-
|
|
2412
2412
|
.t-banner{
|
|
2413
2413
|
--t-banner-font-size:var(--t-font-size-md);
|
|
2414
2414
|
--t-banner-font-color:var(--t-text-color);
|