@planningcenter/tapestry 2.3.0-rc.6 → 2.3.0-rc.8

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.
Files changed (50) hide show
  1. package/dist/componentRegistration.js.map +1 -1
  2. package/dist/components/Banner/Banner.js.map +1 -1
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/Button.js.map +1 -1
  5. package/dist/components/button/DropdownButton.js.map +1 -1
  6. package/dist/components/button/DropdownIconButton.js.map +1 -1
  7. package/dist/components/button/IconButton.js.map +1 -1
  8. package/dist/components/button/LoadingButton.js.map +1 -1
  9. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  10. package/dist/components/checkbox/Checkbox.js.map +1 -1
  11. package/dist/components/internal/LoadingSpinner.js.map +1 -1
  12. package/dist/components/link/BaseLink.js.map +1 -1
  13. package/dist/components/link/IconLink.js.map +1 -1
  14. package/dist/components/link/Link.js.map +1 -1
  15. package/dist/components/page-header/PageHeader.js.map +1 -1
  16. package/dist/components/page-header/index.js.map +1 -1
  17. package/dist/components/sidenav/Sidenav.js.map +1 -1
  18. package/dist/components/sidenav/SidenavItem.js.map +1 -1
  19. package/dist/components/sidenav/SidenavSection.js.map +1 -1
  20. package/dist/components/sidenav/index.js.map +1 -1
  21. package/dist/index.css +31 -37
  22. package/dist/index.css.map +1 -1
  23. package/dist/jsTokens.js.map +1 -1
  24. package/dist/reactRender.css +520 -526
  25. package/dist/reactRender.css.map +1 -1
  26. package/dist/reactRenderLegacy.css +520 -526
  27. package/dist/reactRenderLegacy.css.map +1 -1
  28. package/dist/tapestry-render/dist/{buildComponent-D0S78fIn.js → buildComponent-DTliJ3_n.js} +146 -146
  29. package/dist/tapestry-render/dist/buildComponent-DTliJ3_n.js.map +1 -0
  30. package/dist/tapestry-render/dist/index.js +1 -1
  31. package/dist/tapestry-render/dist/index.js.map +1 -1
  32. package/dist/tapestry-render/dist/legacy.js +1 -1
  33. package/dist/tapestry-render/dist/legacy.js.map +1 -1
  34. package/dist/tapestry-render/dist/registry.js.map +1 -1
  35. package/dist/tapestry-wc/dist/components/p-BGI0jdHO.js.map +1 -1
  36. package/dist/tapestry-wc/dist/components/p-CLwAWmuf.js.map +1 -1
  37. package/dist/tapestry-wc/dist/components/p-CeCAMGrz.js.map +1 -1
  38. package/dist/tapestry-wc/dist/components/p-D_UI812x.js.map +1 -1
  39. package/dist/tapestry-wc/dist/components/p-m4YsmAHe.js.map +1 -1
  40. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  41. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  42. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  43. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  44. package/dist/tokens/ts/tokens.js.map +1 -1
  45. package/dist/unstable.css +31 -37
  46. package/dist/unstable.css.map +1 -1
  47. package/dist/utilities/Icon.js.map +1 -1
  48. package/dist/utilities/buttonLinkShared.js.map +1 -1
  49. package/package.json +3 -3
  50. package/dist/tapestry-render/dist/buildComponent-D0S78fIn.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"PageHeader\", PageHeader)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":";;;;;;AAOAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC;AAClCA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC"}
1
+ {"version":3,"file":"componentRegistration.js","sources":["../src/componentRegistration.ts"],"sourcesContent":["import { register } from \"@planningcenter/tapestry-render/registry\"\n\nimport { PageHeader } from \"./components/page-header/PageHeader\"\nimport { Sidenav } from \"./components/sidenav/Sidenav\"\nimport { SidenavItem } from \"./components/sidenav/SidenavItem\"\nimport { SidenavSection } from \"./components/sidenav/SidenavSection\"\n\nregister(\"PageHeader\", PageHeader)\nregister(\"Sidenav\", Sidenav)\nregister(\"SidenavItem\", SidenavItem)\nregister(\"SidenavSection\", SidenavSection)\n"],"names":["register"],"mappings":";;;;;;AAOAA,CAAQ,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;AAClCA,CAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AAC5BA,CAAQ,CAAC,aAAa,EAAE,WAAW,CAAC,CAAA;AACpCA,CAAQ,CAAC,gBAAgB,EAAE,cAAc,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import \"./Banner.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\ntype BannerProps = {\n /** The content to display in the banner */\n children: React.ReactNode\n\n /**\n * Set the size of the banner (adjusts padding)\n * @default \"md\"\n */\n size?: \"sm\" | \"md\"\n\n /**\n * Set the status of the banner\n * @default \"neutral\"\n */\n status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"\n\n /** Set the title of the banner */\n title?: string\n}\n\nconst ICONS = {\n error: \"general#exclamation-triangle\",\n info: \"general#info-circle\",\n neutral: null,\n success: \"general#check-circle\",\n warning: \"general#exclamation-triangle\",\n}\n\nconst SIZES = {\n md: \"\",\n sm: \"t-banner--sm\",\n}\n\nconst STATUSES = {\n error: \"t-banner--status-error\",\n info: \"t-banner--status-info\",\n neutral: \"t-banner--status-neutral\",\n success: \"t-banner--status-success\",\n warning: \"t-banner--status-warning\",\n}\n\nexport const Banner = ({\n children = \"\",\n size = \"md\",\n status = \"neutral\",\n title = \"\",\n}: BannerProps) => {\n return (\n <div className={classnames(\"t-banner\", SIZES[size], STATUSES[status])}>\n {ICONS[status] && (\n <span className=\"t-banner-icon\">\n <Icon symbol={ICONS[status]} aria-hidden />\n </span>\n )}\n <div>\n {title && <span className=\"t-banner-title\">{title}</span>}\n <div className=\"t-banner-body\">{children}</div>\n </div>\n </div>\n )\n}\n\nexport default Banner\n"],"names":["classnames"],"mappings":";;;;AA0BA,MAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,8BAA8B;CACxC;AAED,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,cAAc;CACnB;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,wBAAwB;AAC/B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;CACpC;MAEY,MAAM,GAAG,CAAC,EACrB,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,GACE,KAAI;AAChB,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAA;QAClE,KAAK,CAAC,MAAM,CAAC,KACZ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;YAC7B,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAgB,aAAA,EAAA,IAAA,EAAA,CAAA,CACtC,CACR;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACG,YAAA,KAAK,IAAI,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAQ;YACzD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CAC3C,CACF;AAEV;;;;"}
1
+ {"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import \"./Banner.css\"\n\nimport Icon from \"@utilities/Icon\"\nimport classnames from \"classnames\"\nimport React from \"react\"\n\ntype BannerProps = {\n /** The content to display in the banner */\n children: React.ReactNode\n\n /**\n * Set the size of the banner (adjusts padding)\n * @default \"md\"\n */\n size?: \"sm\" | \"md\"\n\n /**\n * Set the status of the banner\n * @default \"neutral\"\n */\n status?: \"neutral\" | \"info\" | \"warning\" | \"error\" | \"success\"\n\n /** Set the title of the banner */\n title?: string\n}\n\nconst ICONS = {\n error: \"general#exclamation-triangle\",\n info: \"general#info-circle\",\n neutral: null,\n success: \"general#check-circle\",\n warning: \"general#exclamation-triangle\",\n}\n\nconst SIZES = {\n md: \"\",\n sm: \"t-banner--sm\",\n}\n\nconst STATUSES = {\n error: \"t-banner--status-error\",\n info: \"t-banner--status-info\",\n neutral: \"t-banner--status-neutral\",\n success: \"t-banner--status-success\",\n warning: \"t-banner--status-warning\",\n}\n\nexport const Banner = ({\n children = \"\",\n size = \"md\",\n status = \"neutral\",\n title = \"\",\n}: BannerProps) => {\n return (\n <div className={classnames(\"t-banner\", SIZES[size], STATUSES[status])}>\n {ICONS[status] && (\n <span className=\"t-banner-icon\">\n <Icon symbol={ICONS[status]} aria-hidden />\n </span>\n )}\n <div>\n {title && <span className=\"t-banner-title\">{title}</span>}\n <div className=\"t-banner-body\">{children}</div>\n </div>\n </div>\n )\n}\n\nexport default Banner\n"],"names":["classnames"],"mappings":";;;;AA0BA,MAAM,KAAK,GAAG;AACZ,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,OAAO,EAAE,8BAA8B;CACxC,CAAA;AAED,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,cAAc;CACnB,CAAA;AAED,MAAM,QAAQ,GAAG;AACf,IAAA,KAAK,EAAE,wBAAwB;AAC/B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;AACnC,IAAA,OAAO,EAAE,0BAA0B;CACpC,CAAA;MAEY,MAAM,GAAG,CAAC,EACrB,QAAQ,GAAG,EAAE,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,GACE,KAAI;AAChB,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEA,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,EAAA;QAClE,KAAK,CAAC,MAAM,CAAC,KACZ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA;YAC7B,KAAC,CAAA,aAAA,CAAA,IAAI,EAAC,EAAA,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,EAAgB,aAAA,EAAA,IAAA,EAAA,CAAA,CACtC,CACR;AACD,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACG,YAAA,KAAK,IAAI,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,EAAE,KAAK,CAAQ;YACzD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,eAAe,EAAA,EAAE,QAAQ,CAAO,CAC3C,CACF,EACP;AACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\nimport { LoadingSpinner } from \"../internal\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind = \"secondary\",\n label,\n className,\n fullWidth,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n \"aria-label\": ariaLabel,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n aria-disabled={loading}\n disabled={loading}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n aria-busy={loading}\n {...restProps}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV;AACH,CAAC;AAEY,MAAA,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,mBACO,OAAO,EACtB,QAAQ,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,GAAG,gBAAgB,GAAG,SAAS,EACvC,WAAA,EAAA,OAAO,KACd,SAAS,EAAA;QAEZ,OAAO,IAAI,KAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\nimport { LoadingSpinner } from \"../internal\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind = \"secondary\",\n label,\n className,\n fullWidth,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n \"aria-label\": ariaLabel,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n aria-disabled={loading}\n disabled={loading}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n aria-busy={loading}\n {...restProps}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV,CAAA;AACH,CAAC,CAAA;AAEY,MAAA,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC,CAAA;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;AAEnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,mBACO,OAAO,EACtB,QAAQ,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,GAAG,gBAAgB,GAAG,SAAS,EACvC,WAAA,EAAA,OAAO,KACd,SAAS,EAAA;QAEZ,OAAO,IAAI,KAAC,CAAA,aAAA,CAAA,cAAc,EAAG,IAAA,CAAA;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP,EACV;AACH,CAAC,EACF;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":[],"mappings":";;;AAUA;;;;;;AAMG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type ButtonElementProps = Omit<BaseButtonElementProps, \"label\"> & {\n label: string\n}\n\n/**\n * A button component that renders as a button element.\n * Supports various sizes, styles, and content types.\n * Label must be a string.\n *\n * @component\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonElementProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nButton.displayName = \"Button\"\n"],"names":[],"mappings":";;;AAUA;;;;;;AAMG;AACU,MAAA,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AAC5C,CAAC,EACF;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n \"aria-controls\": string\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;AAYgB,SAAA,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAE,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAe,aAAA,EAAA,IAAA,EAAA,CAAA;KACzD;AACH;AAEa,MAAA,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
1
+ {"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n \"aria-controls\": string\n \"aria-expanded\": boolean\n suffix?: never\n}\n\nexport function dropdownProps({ className }: { className?: string }) {\n return {\n className: classNames(className, \"tds-btn--dropdown\"),\n suffix: <Icon symbol=\"general#down-caret\" aria-hidden />,\n }\n}\n\nexport const DropdownButton = forwardRef<\n HTMLButtonElement,\n BaseButtonElementProps & DropdownButtonProps\n>((props, ref) => {\n return <BaseButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownButton.displayName = \"DropdownButton\"\n"],"names":[],"mappings":";;;;;AAYgB,SAAA,aAAa,CAAC,EAAE,SAAS,EAA0B,EAAA;IACjE,OAAO;AACL,QAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,mBAAmB,CAAC;AACrD,QAAA,MAAM,EAAE,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,MAAM,EAAC,oBAAoB,EAAe,aAAA,EAAA,IAAA,EAAA,CAAA;KACzD,CAAA;AACH,CAAC;AAEY,MAAA,cAAc,GAAG,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI,CAAA;AACtE,CAAC,EAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":[],"mappings":";;;;AAKa,MAAA,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI;AACtE,CAAC;AAED,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
1
+ {"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport const DropdownIconButton = forwardRef<\n HTMLButtonElement,\n IconButtonProps & DropdownButtonProps\n>((props, ref) => {\n return <IconButton ref={ref} {...props} {...dropdownProps(props)} />\n})\n\nDropdownIconButton.displayName = \"DropdownIconButton\"\n"],"names":[],"mappings":";;;;AAKa,MAAA,kBAAkB,GAAG,UAAU,CAG1C,CAAC,KAAK,EAAE,GAAG,KAAI;AACf,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,GAAM,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,GAAI,CAAA;AACtE,CAAC,EAAC;AAEF,kBAAkB,CAAC,WAAW,GAAG,oBAAoB;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ icon, className, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACU,MAAA,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ icon, className, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACU,MAAA,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;AAEpE,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR,EACH;AACH,CAAC,EACF;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n loading?: boolean\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;AAeG;AACU,MAAA,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI;AAC5C,CAAC;AAGH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
1
+ {"version":3,"file":"LoadingButton.js","sources":["../../../src/components/button/LoadingButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\n/**\n * @deprecated Use ButtonElementProps with loading prop instead. LoadingButton will be removed in a future version.\n */\nexport interface LoadingButtonProps extends BaseButtonElementProps {\n loading?: boolean\n loadingAriaLabel?: string\n}\n\n/**\n * @deprecated Use Button with loading prop instead. LoadingButton will be removed in a future version.\n *\n * A loading button component that shows a loading indicator when the loading prop is true.\n * When loading, the button is automatically disabled and shows a spinner.\n * Supports all BaseButton props including prefix and suffix.\n *\n * @example\n * // Deprecated\n * <LoadingButton loading={true} label=\"Submit\" />\n *\n * // Use this instead:\n * <Button loading={true} label=\"Submit\" />\n *\n * @component\n */\nexport const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(\n (props, ref) => {\n return <BaseButton {...props} ref={ref} />\n }\n)\n\nLoadingButton.displayName = \"LoadingButton\"\n"],"names":[],"mappings":";;;AAcA;;;;;;;;;;;;;;;AAeG;AACU,MAAA,aAAa,GAAG,UAAU,CACrC,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAK,EAAA,GAAA,KAAK,EAAE,GAAG,EAAE,GAAG,EAAA,CAAI,CAAA;AAC5C,CAAC,EACF;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n needsAttention,\n className,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAcgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEa,MAAA,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EACxB,GAAA,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EACtD,CAAA;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
1
+ {"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n needsAttention,\n className,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAcgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO,cAAc;AACnB,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF,SAAA;AACH,UAAE;YACE,SAAS;SACV,CAAA;AACP,CAAC;AAEY,MAAA,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EACxB,GAAA,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EACtD,CAAA,EACH;AACH,CAAC,EACF;AAED,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\" | \"xs\"\n\nexport interface CheckboxProps {\n description?: string\n disabled?: boolean\n id?: string\n indeterminate?: boolean\n invalid?: boolean\n label: string\n size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\nlet idCounter = 0\n\nconst buildCheckboxClassName = ({\n className,\n invalid,\n indeterminate,\n size,\n}: {\n className?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}): string => {\n return classNames(\n \"tds-checkbox\",\n size && size !== \"md\" && `tds-checkbox--${size}`,\n invalid && \"tds-checkbox--invalid\",\n indeterminate && \"tds-checkbox--indeterminate\",\n className\n )\n}\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n disabled,\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 = buildCheckboxClassName({\n className,\n indeterminate,\n invalid,\n size,\n })\n\n const checkboxId = id || `tds-checkbox-${idCounter++}`\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 disabled={disabled}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n <label htmlFor={checkboxId}>{label}</label>\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;AAuBA,IAAI,SAAS,GAAG,CAAC;AAEjB,MAAM,sBAAsB,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,IAAI,GAML,KAAY;IACX,OAAO,UAAU,CACf,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAiB,cAAA,EAAA,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV;AACH,CAAC;AAED;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,QAAQ,EACR,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;;;AAIvC,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC;;AACP,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO;;AAEzB,KAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB;IAED,MAAM,iBAAiB,GAAG,sBAAsB,CAAC;QAC/C,SAAS;QACT,aAAa;QACb,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,UAAU,GAAG,EAAE,IAAI,gBAAgB,SAAS,EAAE,EAAE;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAG,EAAA,UAAU,CAAc,YAAA,CAAA,GAAG,SAAS,EAEzC,cAAA,EAAA,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;AAC1C,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAc,YAAA,CAAA,EAC/B,SAAS,EAAC,0BAA0B,EAEnC,EAAA,WAAW,CACV,CACL,CACG;AAEV,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef, InputHTMLAttributes, useCallback } from \"react\"\n\nexport type CheckboxSize = \"md\" | \"sm\" | \"xs\"\n\nexport interface CheckboxProps {\n description?: string\n disabled?: boolean\n id?: string\n indeterminate?: boolean\n invalid?: boolean\n label: string\n size?: CheckboxSize\n}\n\nexport type CheckboxElementProps = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n keyof CheckboxProps | \"type\"\n> &\n CheckboxProps\n\nlet idCounter = 0\n\nconst buildCheckboxClassName = ({\n className,\n invalid,\n indeterminate,\n size,\n}: {\n className?: string\n indeterminate?: boolean\n invalid?: boolean\n size?: CheckboxSize\n}): string => {\n return classNames(\n \"tds-checkbox\",\n size && size !== \"md\" && `tds-checkbox--${size}`,\n invalid && \"tds-checkbox--invalid\",\n indeterminate && \"tds-checkbox--indeterminate\",\n className\n )\n}\n\n/**\n * A checkbox component that renders as a checkbox input with label.\n * Supports various sizes, error states, and disabled states.\n * Label must be a string.\n *\n * @component\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxElementProps>(\n (\n {\n className,\n description,\n disabled,\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 = buildCheckboxClassName({\n className,\n indeterminate,\n invalid,\n size,\n })\n\n const checkboxId = id || `tds-checkbox-${idCounter++}`\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 disabled={disabled}\n id={checkboxId}\n ref={callbackRef}\n type=\"checkbox\"\n />\n <label htmlFor={checkboxId}>{label}</label>\n {description && (\n <p\n id={`${checkboxId}-description`}\n className=\"tds-checkbox-description\"\n >\n {description}\n </p>\n )}\n </div>\n )\n }\n)\n\nCheckbox.displayName = \"Checkbox\"\n"],"names":[],"mappings":";;;AAuBA,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,MAAM,sBAAsB,GAAG,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,aAAa,EACb,IAAI,GAML,KAAY;IACX,OAAO,UAAU,CACf,cAAc,EACd,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,CAAiB,cAAA,EAAA,IAAI,EAAE,EAChD,OAAO,IAAI,uBAAuB,EAClC,aAAa,IAAI,6BAA6B,EAC9C,SAAS,CACV,CAAA;AACH,CAAC,CAAA;AAED;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,WAAW,EACX,QAAQ,EACR,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,CAAA;SACtC;;AAGD,QAAA,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,OAAO,CAAC,CAAA;SACb;AAAM,aAAA,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AACzC,YAAA,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;SACtB;AACH,KAAC,EACD,CAAC,GAAG,EAAE,aAAa,CAAC,CACrB,CAAA;IAED,MAAM,iBAAiB,GAAG,sBAAsB,CAAC;QAC/C,SAAS;QACT,aAAa;QACb,OAAO;QACP,IAAI;AACL,KAAA,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,EAAE,IAAI,gBAAgB,SAAS,EAAE,EAAE,CAAA;AAEtD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,iBAAiB,EAAA;AAC/B,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GACM,SAAS,EAAA,kBAAA,EAEX,WAAW,GAAG,CAAG,EAAA,UAAU,CAAc,YAAA,CAAA,GAAG,SAAS,EAEzC,cAAA,EAAA,OAAO,EACrB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,UAAU,EACf,CAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,UAAU,EAAA,EAAG,KAAK,CAAS;AAC1C,QAAA,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,EAAE,EAAE,CAAA,EAAG,UAAU,CAAc,YAAA,CAAA,EAC/B,SAAS,EAAC,0BAA0B,EAEnC,EAAA,WAAW,CACV,CACL,CACG,EACP;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n return <div className=\"tds-loading-spinner\" />\n}\n"],"names":[],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,GAAG;AAChD;;;;"}
1
+ {"version":3,"file":"LoadingSpinner.js","sources":["../../../src/components/internal/LoadingSpinner.tsx"],"sourcesContent":["import \"./LoadingSpinner.css\"\n\nimport React from \"react\"\n\nexport default function LoadingSpinner() {\n return <div className=\"tds-loading-spinner\" />\n}\n"],"names":[],"mappings":";;AAIc,SAAU,cAAc,GAAA;AACpC,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,GAAG,CAAA;AAChD;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps | \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n className?: string\n): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind,\n label,\n children,\n className,\n href,\n external = false,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(size, kind, className)\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...externalProps}\n {...restProps}\n >\n {prefixElement}\n {label || children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA2BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC;IAExE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,aAAa,KACb,SAAS,EAAA;QAEZ,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n BaseComponentProps,\n COMPONENT_KIND_CLASS_MAP,\n COMPONENT_SIZE_CLASS_MAP,\n ComponentKind,\n ComponentSize,\n enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\n\nexport interface BaseLinkElementProps\n extends BaseComponentProps,\n Omit<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n keyof BaseComponentProps | \"children\"\n > {\n children?: React.ReactNode\n external?: boolean\n href: string\n kind?: ComponentKind\n label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n size?: ComponentSize,\n kind?: ComponentKind,\n className?: string\n): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n className\n )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind,\n label,\n children,\n className,\n href,\n external = false,\n ...restProps\n }: BaseLinkElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName(size, kind, className)\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n const externalProps = external\n ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n : {}\n\n return (\n <a\n href={href}\n className={combinedClassName}\n ref={ref}\n {...externalProps}\n {...restProps}\n >\n {prefixElement}\n {label || children}\n {suffixElement}\n </a>\n )\n }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA2BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,CACV,CAAA;AACH,CAAC,CAAA;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,CAAA;IAExE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IACnE,MAAM,aAAa,GAAG,QAAQ;UAC1B,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ,EAAE;UAChD,EAAE,CAAA;AAEN,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,aAAa,KACb,SAAS,EAAA;QAEZ,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ,EACL;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":[],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;IAEpE,QACE,oBAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,SAAS,EACb,CAAA;AAEN,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"IconLink.js","sources":["../../../src/components/link/IconLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type IconLinkProps = Omit<BaseLinkElementProps, \"label\" | \"children\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\nexport const IconLink = forwardRef<HTMLAnchorElement, IconLinkProps>(\n ({ className, href, icon, ...restProps }: IconLinkProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseLink\n href={href}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n {...restProps}\n />\n )\n }\n)\n\nIconLink.displayName = \"IconLink\"\n"],"names":[],"mappings":";;;;MAYa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,SAAS,EAAiB,EAAE,GAAG,KAAI;IAC9D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;IAEpE,QACE,oBAAC,QAAQ,EAAA,EACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EACJ,GAAA,SAAS,EACb,CAAA,EACH;AACH,CAAC,EACF;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type LinkProps = Omit<BaseLinkElementProps, \"label\"> & {\n children?: React.ReactNode\n label?: string\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ href, ...restProps }: LinkProps, ref) => {\n return <BaseLink href={href} ref={ref} {...restProps} />\n }\n)\n\nLink.displayName = \"Link\"\n"],"names":[],"mappings":";;;AAWa,MAAA,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAa,EAAE,GAAG,KAAI;AACzC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAM,GAAA,SAAS,GAAI;AAC1D,CAAC;AAGH,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
1
+ {"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport React, { forwardRef } from \"react\"\n\nimport { BaseLink, BaseLinkElementProps } from \"./BaseLink\"\n\nexport type LinkProps = Omit<BaseLinkElementProps, \"label\"> & {\n children?: React.ReactNode\n label?: string\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n ({ href, ...restProps }: LinkProps, ref) => {\n return <BaseLink href={href} ref={ref} {...restProps} />\n }\n)\n\nLink.displayName = \"Link\"\n"],"names":[],"mappings":";;;AAWa,MAAA,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAa,EAAE,GAAG,KAAI;AACzC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAM,GAAA,SAAS,GAAI,CAAA;AAC1D,CAAC,EACF;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import React from \"react\"\n\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /**\n * Additional content (typically actions) that complements the primary slot.\n */\n actions?: React.ReactNode\n /**\n * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n */\n children: React.ReactNode\n className?: string\n /**\n * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n */\n inactive?: boolean\n /**\n * Navigation for the page. Should contain an unstyled unordered list (ul)\n * that contains a list of links or buttons.\n */\n navigation?: React.ReactNode\n /**\n * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const inactiveProps = inactive ? { inactive } : {}\n const profileProps = profile ? { profile } : {}\n return (\n <tds-page-header {...inactiveProps} {...profileProps} class={className}>\n {children}\n {actions && <div slot=\"actions\">{actions}</div>}\n {navigation && <nav slot=\"navigation\">{navigation}</nav>}\n </tds-page-header>\n )\n}\n"],"names":[],"mappings":";;SAEgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GAwBhB,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE;AAClD,IAAA,MAAM,YAAY,GAAG,OAAO,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;IAC/C,QACE,4CAAqB,aAAa,EAAA,GAAM,YAAY,EAAE,KAAK,EAAE,SAAS,EAAA;QACnE,QAAQ;AACR,QAAA,OAAO,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAO;QAC9C,UAAU,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,YAAY,IAAE,UAAU,CAAO,CACxC;AAEtB;;;;"}
1
+ {"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import React from \"react\"\n\nexport function PageHeader({\n children,\n actions,\n navigation,\n className,\n inactive = false,\n profile = false,\n}: {\n /**\n * Additional content (typically actions) that complements the primary slot.\n */\n actions?: React.ReactNode\n /**\n * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n */\n children: React.ReactNode\n className?: string\n /**\n * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n */\n inactive?: boolean\n /**\n * Navigation for the page. Should contain an unstyled unordered list (ul)\n * that contains a list of links or buttons.\n */\n navigation?: React.ReactNode\n /**\n * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n */\n profile?: boolean\n}) {\n const inactiveProps = inactive ? { inactive } : {}\n const profileProps = profile ? { profile } : {}\n return (\n <tds-page-header {...inactiveProps} {...profileProps} class={className}>\n {children}\n {actions && <div slot=\"actions\">{actions}</div>}\n {navigation && <nav slot=\"navigation\">{navigation}</nav>}\n </tds-page-header>\n )\n}\n"],"names":[],"mappings":";;SAEgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GAwBhB,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAClD,IAAA,MAAM,YAAY,GAAG,OAAO,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAA;IAC/C,QACE,4CAAqB,aAAa,EAAA,GAAM,YAAY,EAAE,KAAK,EAAE,SAAS,EAAA;QACnE,QAAQ;AACR,QAAA,OAAO,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAO;QAC9C,UAAU,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,YAAY,IAAE,UAAU,CAAO,CACxC,EACnB;AACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/page-header/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsPageHeader,\n defineCustomElementTdsPageHeaderNav,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsPageHeader()\ndefineCustomElementTdsPageHeaderNav()\n"],"names":["defineCustomElementTdsPageHeader","defineCustomElementTdsPageHeaderNav"],"mappings":";;;;AAOAA,mBAAgC,EAAE;AAClCC,qBAAmC,EAAE"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/page-header/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsPageHeader,\n defineCustomElementTdsPageHeaderNav,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsPageHeader()\ndefineCustomElementTdsPageHeaderNav()\n"],"names":["defineCustomElementTdsPageHeader","defineCustomElementTdsPageHeaderNav"],"mappings":";;;;AAOAA,mBAAgC,EAAE,CAAA;AAClCC,qBAAmC,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"file":"Sidenav.js","sources":["../../../src/components/sidenav/Sidenav.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The sidenav lets users navigate through subsets of data pertaining to a resource.\n * It can be nested under the page header navigation, as secondary navigation.\n *\n * The expected structure of a `Sidenav` is:\n * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`\n *\n * Please refer to each component's documentation for more information on how to use them.\n */\nexport function Sidenav({\n children,\n label,\n selectedItemLabel,\n className,\n popoverId,\n}: {\n /**\n * Default slot used to nest `SidenavSection` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the sidenav, used for accessibility.\n */\n label?: string\n /**\n * The id of the popover container.\n */\n popoverId?: string\n /**\n * Label displayed in the responsive header of the sidenav.\n */\n selectedItemLabel?: string\n}) {\n const popoverIdProp =\n popoverId && popoverId.trim() ? { \"popover-id\": popoverId } : {}\n\n return (\n <tds-sidenav\n label={label}\n selected-item-label={selectedItemLabel}\n class={className}\n {...popoverIdProp}\n >\n {children}\n </tds-sidenav>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACa,SAAA,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GAmBV,EAAA;IACC,MAAM,aAAa,GACjB,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE;AAElE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,KAAK,yBACS,iBAAiB,EACtC,KAAK,EAAE,SAAS,EACZ,GAAA,aAAa,IAEhB,QAAQ,CACG;AAElB;;;;"}
1
+ {"version":3,"file":"Sidenav.js","sources":["../../../src/components/sidenav/Sidenav.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The sidenav lets users navigate through subsets of data pertaining to a resource.\n * It can be nested under the page header navigation, as secondary navigation.\n *\n * The expected structure of a `Sidenav` is:\n * `<Sidenav> <SidenavSection> <SidenavItem /> </SidenavSection> </Sidenav>`\n *\n * Please refer to each component's documentation for more information on how to use them.\n */\nexport function Sidenav({\n children,\n label,\n selectedItemLabel,\n className,\n popoverId,\n}: {\n /**\n * Default slot used to nest `SidenavSection` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the sidenav, used for accessibility.\n */\n label?: string\n /**\n * The id of the popover container.\n */\n popoverId?: string\n /**\n * Label displayed in the responsive header of the sidenav.\n */\n selectedItemLabel?: string\n}) {\n const popoverIdProp =\n popoverId && popoverId.trim() ? { \"popover-id\": popoverId } : {}\n\n return (\n <tds-sidenav\n label={label}\n selected-item-label={selectedItemLabel}\n class={className}\n {...popoverIdProp}\n >\n {children}\n </tds-sidenav>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;AAQG;AACa,SAAA,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,GAmBV,EAAA;IACC,MAAM,aAAa,GACjB,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,CAAA;AAElE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,aAAA,EAAA,EAAA,KAAK,EAAE,KAAK,yBACS,iBAAiB,EACtC,KAAK,EAAE,SAAS,EACZ,GAAA,aAAa,IAEhB,QAAQ,CACG,EACf;AACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"SidenavItem.js","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavItem` component is used to display a single item in the sidenav.\n *\n * @example\n * ```html\n * <SidenavItem>\n * <a href=\"#\">Home</a>\n * </SidenavItem>\n *\n * <SidenavItem>\n * <button>Foo</button>\n * <SidenavSection subnav>\n * <SidenavItem><a href=\"#\">Nested Link</a></SidenavItem>\n * </SidenavSection>\n * </SidenavItem>\n * ```\n */\nexport function SidenavItem({\n children,\n className,\n selected,\n}: {\n /**\n * Should be a link or button without any classes or styles applied.\n */\n children: React.ReactNode\n className?: string\n /**\n * Whether the sidenav item is selected.\n */\n selected?: boolean\n}) {\n const selectedProps = selected ? { selected: true } : {}\n return (\n <tds-sidenav-item class={className} {...selectedProps}>\n {children}\n </tds-sidenav-item>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE;IACxD,QACE,KAAkB,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAA,KAAK,EAAE,SAAS,EAAM,GAAA,aAAa,EAClD,EAAA,QAAQ,CACQ;AAEvB;;;;"}
1
+ {"version":3,"file":"SidenavItem.js","sources":["../../../src/components/sidenav/SidenavItem.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavItem` component is used to display a single item in the sidenav.\n *\n * @example\n * ```html\n * <SidenavItem>\n * <a href=\"#\">Home</a>\n * </SidenavItem>\n *\n * <SidenavItem>\n * <button>Foo</button>\n * <SidenavSection subnav>\n * <SidenavItem><a href=\"#\">Nested Link</a></SidenavItem>\n * </SidenavSection>\n * </SidenavItem>\n * ```\n */\nexport function SidenavItem({\n children,\n className,\n selected,\n}: {\n /**\n * Should be a link or button without any classes or styles applied.\n */\n children: React.ReactNode\n className?: string\n /**\n * Whether the sidenav item is selected.\n */\n selected?: boolean\n}) {\n const selectedProps = selected ? { selected: true } : {}\n return (\n <tds-sidenav-item class={className} {...selectedProps}>\n {children}\n </tds-sidenav-item>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;AAgBG;AACG,SAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,QAAQ,GAWT,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAAA;IACxD,QACE,KAAkB,CAAA,aAAA,CAAA,kBAAA,EAAA,EAAA,KAAK,EAAE,SAAS,EAAM,GAAA,aAAa,EAClD,EAAA,QAAQ,CACQ,EACpB;AACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"SidenavSection.js","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavSection` component is used to display a section of the sidenav.\n * All `SidenavItem` components should be nested within a `SidenavSection`.\n *\n * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.\n */\nexport function SidenavSection({\n children,\n className,\n label,\n subnav,\n}: {\n /**\n * Default slot used to nest `SidenavItem` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the section.\n */\n label?: string\n /**\n * Add subnav if this section is a subnav of a SidenavItem.\n */\n subnav?: boolean\n}) {\n const subnavProps = subnav ? { slot: \"subnav\" } : {}\n return (\n <tds-sidenav-section class={className} label={label} {...subnavProps}>\n {children}\n </tds-sidenav-section>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GAeP,EAAA;AACC,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE;AACpD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAqB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,EAAA,EACjE,QAAQ,CACW;AAE1B;;;;"}
1
+ {"version":3,"file":"SidenavSection.js","sources":["../../../src/components/sidenav/SidenavSection.tsx"],"sourcesContent":["import React from \"react\"\n\n/**\n * The `SidenavSection` component is used to display a section of the sidenav.\n * All `SidenavItem` components should be nested within a `SidenavSection`.\n *\n * If the `label` prop is provided, it will be used to generate a header for the section, and the section will be labelled by the `aria-labelledby` attribute.\n */\nexport function SidenavSection({\n children,\n className,\n label,\n subnav,\n}: {\n /**\n * Default slot used to nest `SidenavItem` components.\n */\n children: React.ReactNode\n className?: string\n /**\n * Label for the section.\n */\n label?: string\n /**\n * Add subnav if this section is a subnav of a SidenavItem.\n */\n subnav?: boolean\n}) {\n const subnavProps = subnav ? { slot: \"subnav\" } : {}\n return (\n <tds-sidenav-section class={className} label={label} {...subnavProps}>\n {children}\n </tds-sidenav-section>\n )\n}\n"],"names":[],"mappings":";;AAEA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,GAeP,EAAA;AACC,IAAA,MAAM,WAAW,GAAG,MAAM,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AACpD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA,EAAqB,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,KAAM,WAAW,EAAA,EACjE,QAAQ,CACW,EACvB;AACH;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsSidenav,\n defineCustomElementTdsSidenavItem,\n defineCustomElementTdsSidenavResponsiveHeader,\n defineCustomElementTdsSidenavSection,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsSidenav()\ndefineCustomElementTdsSidenavItem()\ndefineCustomElementTdsSidenavSection()\ndefineCustomElementTdsSidenavResponsiveHeader()\n"],"names":["defineCustomElementTdsSidenav","defineCustomElementTdsSidenavItem","defineCustomElementTdsSidenavSection","defineCustomElementTdsSidenavResponsiveHeader"],"mappings":";;;;;;AASAA,mBAA6B,EAAE;AAC/BC,qBAAiC,EAAE;AACnCC,qBAAoC,EAAE;AACtCC,qBAA6C,EAAE"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/sidenav/index.tsx"],"sourcesContent":["import \"./index.css\"\n\nimport {\n defineCustomElementTdsSidenav,\n defineCustomElementTdsSidenavItem,\n defineCustomElementTdsSidenavResponsiveHeader,\n defineCustomElementTdsSidenavSection,\n} from \"tapestry-wc\"\n\ndefineCustomElementTdsSidenav()\ndefineCustomElementTdsSidenavItem()\ndefineCustomElementTdsSidenavSection()\ndefineCustomElementTdsSidenavResponsiveHeader()\n"],"names":["defineCustomElementTdsSidenav","defineCustomElementTdsSidenavItem","defineCustomElementTdsSidenavSection","defineCustomElementTdsSidenavResponsiveHeader"],"mappings":";;;;;;AASAA,mBAA6B,EAAE,CAAA;AAC/BC,qBAAiC,EAAE,CAAA;AACnCC,qBAAoC,EAAE,CAAA;AACtCC,qBAA6C,EAAE"}
package/dist/index.css CHANGED
@@ -1111,16 +1111,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1111
1111
  }
1112
1112
 
1113
1113
  .tds-btn:disabled,.tds-btn.disabled {
1114
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-dark-020);
1115
+ --tds-btn-loading-spinner-color: var(--t-text-color-status-neutral);
1116
+ color: var(--tds-btn-color-disabled);
1114
1117
  pointer-events: none;
1118
+ background-color: var(--tds-btn-bg-disabled);
1119
+ border-color: var(--tds-btn-border-color-disabled);
1120
+ opacity: var(--tds-btn-disabled-opacity);
1115
1121
  }
1116
1122
 
1117
- :is(.tds-btn:disabled,.tds-btn.disabled):not(.tds-btn--loading) {
1118
- color: var(--tds-btn-color-disabled);
1119
- background-color: var(--tds-btn-bg-disabled);
1120
- border-color: var(--tds-btn-border-color-disabled);
1121
- opacity: var(--tds-btn-disabled-opacity);
1122
- }
1123
-
1124
1123
  .tds-btn svg:not(.symbol) {
1125
1124
  display: block;
1126
1125
  inline-size: auto;
@@ -1129,7 +1128,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1129
1128
  color: var(--tds-btn-icon-color, currentColor);
1130
1129
  }
1131
1130
 
1132
- .tds-btn .tds-loading-spinner { --tds-loading-spinner-border-color: var(--tds-btn-loading-spinner-border-color); }
1131
+ .tds-btn .tds-loading-spinner {
1132
+ --tds-loading-spinner-track-color: var(--tds-btn-loading-spinner-track-color);
1133
+ --tds-loading-spinner-track-width: var(--tds-btn-loading-spinner-track-width);
1134
+ --tds-loading-spinner-color: var(--tds-btn-loading-spinner-color);
1135
+ --tds-loading-spinner-visibility: var(--tds-btn-loading-spinner-visibility);
1136
+ --tds-loading-spinner-animation-play-state: var(--tds-btn-loading-spinner-animation-play-state);
1137
+ }
1133
1138
 
1134
1139
  @media (prefers-reduced-motion: reduce) {
1135
1140
 
@@ -1163,12 +1168,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1163
1168
  --tds-btn-padding-truncated-x: 4px;
1164
1169
  --tds-btn-min-height: 24px;
1165
1170
  --tds-btn-font-size: var(--t-font-size-sm);
1171
+ --tds-btn-loading-spinner-track-width: 3px;
1166
1172
  }
1167
1173
 
1168
- .tds-btn--sm .tds-loading-spinner {
1169
- --tds-loading-spinner-border-width: 3px;
1170
- }
1171
-
1172
1174
  /* Effective height 20px */
1173
1175
 
1174
1176
  .tds-btn--xs {
@@ -1177,12 +1179,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1177
1179
  --tds-btn-padding-truncated-x: 5px;
1178
1180
  --tds-btn-min-height: 20px;
1179
1181
  --tds-btn-font-size: var(--t-font-size-xs);
1182
+ --tds-btn-loading-spinner-track-width: 3px;
1180
1183
  }
1181
1184
 
1182
- .tds-btn--xs .tds-loading-spinner {
1183
- --tds-loading-spinner-border-width: 3px;
1184
- }
1185
-
1186
1185
  .tds-btn--neutral {
1187
1186
  --tds-btn-color: var(--t-text-color-status-neutral);
1188
1187
  --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
@@ -1211,7 +1210,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1211
1210
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1212
1211
  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1213
1212
  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1214
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-transparency-light-020);
1213
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1215
1214
  }
1216
1215
 
1217
1216
  .tds-btn--delete {
@@ -1227,7 +1226,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1227
1226
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1228
1227
  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
1229
1228
  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1230
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-transparency-light-020);
1229
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1231
1230
  }
1232
1231
 
1233
1232
  .tds-btn--outline-neutral {
@@ -1256,7 +1255,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1256
1255
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1257
1256
  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-outline-dim-disabled);
1258
1257
  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1259
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-status-info-ghost);
1258
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1260
1259
  }
1261
1260
 
1262
1261
  .tds-btn--outline-delete {
@@ -1271,7 +1270,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1271
1270
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1272
1271
  --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
1273
1272
  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1274
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-status-error-ghost);
1273
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
1275
1274
  }
1276
1275
 
1277
1276
  .tds-btn--ghost-neutral {
@@ -1300,7 +1299,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1300
1299
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1301
1300
  --tds-btn-bg-disabled: transparent;
1302
1301
  --tds-btn-border-color-disabled: transparent;
1303
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-status-info-ghost);
1302
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1304
1303
  }
1305
1304
 
1306
1305
  .tds-btn--ghost-delete {
@@ -1315,7 +1314,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1315
1314
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1316
1315
  --tds-btn-bg-disabled: transparent;
1317
1316
  --tds-btn-border-color-disabled: transparent;
1318
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-status-error-ghost);
1317
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
1319
1318
  }
1320
1319
 
1321
1320
  .tds-btn--inline-text {
@@ -1333,7 +1332,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1333
1332
  --tds-btn-font-size: inherit;
1334
1333
  --tds-btn-font-weight: inherit;
1335
1334
  --tds-btn-line-height: inherit;
1336
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-status-info-ghost);
1335
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1337
1336
  font-family: inherit;
1338
1337
  font-style: inherit;
1339
1338
  vertical-align: inherit;
@@ -1356,7 +1355,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1356
1355
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1357
1356
  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1358
1357
  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1359
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-transparency-light-020);
1358
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1360
1359
  }
1361
1360
 
1362
1361
  .tds-btn--secondary-page-header {
@@ -1405,7 +1404,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1405
1404
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1406
1405
  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1407
1406
  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1408
- --tds-btn-loading-spinner-border-color: var(--t-fill-color-transparency-light-020);
1407
+ --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1409
1408
  }
1410
1409
 
1411
1410
  .tds-btn--pill {
@@ -1459,14 +1458,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1459
1458
  }
1460
1459
 
1461
1460
  .tds-btn--loading {
1461
+ --tds-btn-loading-spinner-visibility: visible;
1462
+ --tds-btn-loading-spinner-animation-play-state: running;
1463
+
1462
1464
  position: relative;
1463
1465
  }
1464
1466
 
1465
- .tds-btn--loading .tds-loading-spinner {
1466
- --tds-loading-spinner-visibility: visible;
1467
- --tds-loading-spinner-animation-play-state: running;
1468
- }
1469
-
1470
1467
  .tds-btn--loading :not(.tds-loading-spinner) {
1471
1468
  visibility: hidden;
1472
1469
  }
@@ -1481,23 +1478,20 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1481
1478
  }
1482
1479
 
1483
1480
  .tds-loading-spinner {
1484
- --tds-loading-spinner-border-width: 4px; /* Default for md size */
1485
1481
  --tds-loading-spinner-size: 1.25em;
1486
- --tds-loading-spinner-visibility: hidden;
1487
- --tds-loading-spinner-animation-play-state: paused;
1488
1482
 
1489
1483
  position: absolute;
1490
1484
  right: 0;
1491
1485
  left: 0;
1492
- visibility: var(--tds-loading-spinner-visibility);
1486
+ visibility: var(--tds-loading-spinner-visibility, hidden);
1493
1487
  width: var(--tds-loading-spinner-size);
1494
1488
  height: var(--tds-loading-spinner-size);
1495
1489
  margin: auto;
1496
- border: var(--tds-loading-spinner-border-width) solid var(--tds-loading-spinner-border-color, var(--t-fill-color-transparency-dark-020));
1497
- border-top-color: var(--tds-loading-spinner-border-top-color, currentcolor);
1490
+ border: var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1491
+ border-top-color: var(--tds-loading-spinner-color, currentcolor);
1498
1492
  border-radius: 50%;
1499
1493
  animation: spinner-rotate 500ms infinite linear;
1500
- animation-play-state: var(--tds-loading-spinner-animation-play-state);
1494
+ animation-play-state: var(--tds-loading-spinner-animation-play-state, paused);
1501
1495
  }
1502
1496
 
1503
1497
  @keyframes spinner-rotate {