@planningcenter/tapestry 1.9.1-rc.0 → 1.10.0-qa-341.0

package/dist/components/button/DropdownButton.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { BaseButtonElementProps } from "./BaseButton";
 export type DropdownButtonProps = {
-    "aria-controls": string;
-    "aria-expanded": boolean;
+    "aria-controls"?: string;
+    "aria-expanded"?: boolean;
+    innerRef?: React.Ref<HTMLButtonElement>;
     suffix?: never;
 };
 export declare function dropdownProps({ className }: {

package/dist/components/button/DropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,mBAAmB,GAAG;IAChC,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAKlE;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,sBAAsB,GAAG,mBAAmB,qBAGpD"}
+{"version":3,"file":"DropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAc,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,mBAAmB,GAAG;IAChC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACvC,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE;;;EAKlE;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,sBAAsB,GAAG,mBAAmB,qBAIpD"}

package/dist/components/button/DropdownButton.js

@@ -10,7 +10,8 @@ function dropdownProps({ className }) {
     };
 }
 function DropdownButton(props) {
-    return React.createElement(BaseButton, { ...props, ...dropdownProps(props) });
+    const { innerRef, ...restProps } = props;
+    return React.createElement(BaseButton, { ...restProps, ...dropdownProps(props), ref: innerRef });
 }
 
 export { DropdownButton, dropdownProps };

package/dist/components/button/DropdownButton.js.map

@@ -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 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 function DropdownButton(\n  props: BaseButtonElementProps & DropdownButtonProps\n) {\n  return <BaseButton {...props} {...dropdownProps(props)} />\n}\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;AAEK,SAAU,cAAc,CAC5B,KAAmD,EAAA;IAEnD,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,EAAA,CAAI,CAAA;AAC5D;;;;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/components/button/DropdownButton.tsx"],"sourcesContent":["import Icon from \"@utilities/Icon\"\nimport classNames from \"classnames\"\nimport React from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type DropdownButtonProps = {\n  \"aria-controls\"?: string\n  \"aria-expanded\"?: boolean\n  innerRef?: React.Ref<HTMLButtonElement>\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 function DropdownButton(\n  props: BaseButtonElementProps & DropdownButtonProps\n) {\n  const { innerRef, ...restProps } = props\n  return <BaseButton {...restProps} {...dropdownProps(props)} ref={innerRef} />\n}\n"],"names":[],"mappings":";;;;;AAagB,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;AAEK,SAAU,cAAc,CAC5B,KAAmD,EAAA;IAEnD,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;AACxC,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAK,EAAA,GAAA,SAAS,KAAM,aAAa,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,QAAQ,GAAI,CAAA;AAC/E;;;;"}

package/dist/components/button/DropdownIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,mBAAmB,EAAiB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAE1D,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,eAAe,GAAG,mBAAmB,qBAG7C"}
+{"version":3,"file":"DropdownIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/DropdownIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,mBAAmB,EAAiB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAA;AAK1D,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,eAAe,GAAG,mBAAmB,qBAuB7C"}

package/dist/components/button/DropdownIconButton.js

@@ -2,8 +2,25 @@ import React from 'react';
 import { dropdownProps } from './DropdownButton.js';
 import { IconButton } from './IconButton.js';
 
+// Store original icon to preserve it when tapestry-react overrides
+let originalIcon = null;
 function DropdownIconButton(props) {
-    return React.createElement(IconButton, { ...props, ...dropdownProps(props) });
+    const { innerRef, ...restProps } = props;
+    // Store original icon if it's a valid React element
+    if (React.isValidElement(props.icon)) {
+        originalIcon = props.icon;
+    }
+    // Use original icon if current icon is overridden with an object
+    const safeIcon = typeof props.icon === "object" &&
+        props.icon !== null &&
+        !React.isValidElement(props.icon)
+        ? originalIcon
+        : props.icon;
+    const safeProps = {
+        ...restProps,
+        icon: safeIcon,
+    };
+    return React.createElement(IconButton, { ...safeProps, ...dropdownProps(props), ref: innerRef });
 }
 
 export { DropdownIconButton };

package/dist/components/button/DropdownIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\nexport function DropdownIconButton(\n  props: IconButtonProps & DropdownButtonProps\n) {\n  return <IconButton {...props} {...dropdownProps(props)} />\n}\n"],"names":[],"mappings":";;;;AAKM,SAAU,kBAAkB,CAChC,KAA4C,EAAA;IAE5C,OAAO,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,EAAA,GAAM,aAAa,CAAC,KAAK,CAAC,EAAA,CAAI,CAAA;AAC5D;;;;"}
+{"version":3,"file":"DropdownIconButton.js","sources":["../../../src/components/button/DropdownIconButton.tsx"],"sourcesContent":["import React from \"react\"\n\nimport { DropdownButtonProps, dropdownProps } from \"./DropdownButton\"\nimport { IconButton, IconButtonProps } from \"./IconButton\"\n\n// Store original icon to preserve it when tapestry-react overrides\nlet originalIcon: React.ReactNode = null\n\nexport function DropdownIconButton(\n  props: IconButtonProps & DropdownButtonProps\n) {\n  const { innerRef, ...restProps } = props\n\n  // Store original icon if it's a valid React element\n  if (React.isValidElement(props.icon)) {\n    originalIcon = props.icon\n  }\n\n  // Use original icon if current icon is overridden with an object\n  const safeIcon =\n    typeof props.icon === \"object\" &&\n    props.icon !== null &&\n    !React.isValidElement(props.icon)\n      ? originalIcon\n      : props.icon\n\n  const safeProps = {\n    ...restProps,\n    icon: safeIcon,\n  }\n\n  return <IconButton {...safeProps} {...dropdownProps(props)} ref={innerRef} />\n}\n"],"names":[],"mappings":";;;;AAKA;AACA,IAAI,YAAY,GAAoB,IAAI,CAAA;AAElC,SAAU,kBAAkB,CAChC,KAA4C,EAAA;IAE5C,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAA;;IAGxC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;AACpC,QAAA,YAAY,GAAG,KAAK,CAAC,IAAI,CAAA;KAC1B;;AAGD,IAAA,MAAM,QAAQ,GACZ,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;QAC9B,KAAK,CAAC,IAAI,KAAK,IAAI;AACnB,QAAA,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC;AAC/B,UAAE,YAAY;AACd,UAAE,KAAK,CAAC,IAAI,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAG;AAChB,QAAA,GAAG,SAAS;AACZ,QAAA,IAAI,EAAE,QAAQ;KACf,CAAA;AAED,IAAA,OAAO,KAAC,CAAA,aAAA,CAAA,UAAU,EAAK,EAAA,GAAA,SAAS,KAAM,aAAa,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,QAAQ,GAAI,CAAA;AAC/E;;;;"}

package/dist/components/button/PageHeaderActionsDropdownButton.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { BaseButtonElementProps } from "./BaseButton";
+import { DropdownButtonProps } from "./DropdownButton";
+export type PageHeaderActionsDropdownButtonProps = Omit<BaseButtonElementProps, "kind"> & DropdownButtonProps & {
+    needsAttention?: boolean;
+};
+export declare function needsAttentionProps({ className, needsAttention, }: {
+    className?: string;
+    needsAttention?: boolean;
+}): {
+    className: string;
+    prefix: React.JSX.Element;
+} | {
+    className: string | undefined;
+    prefix?: undefined;
+};
+export declare function PageHeaderActionsDropdownButton({ needsAttention, className, ...props }: PageHeaderActionsDropdownButtonProps): React.JSX.Element;
+//# sourceMappingURL=PageHeaderActionsDropdownButton.d.ts.map

package/dist/components/button/PageHeaderActionsDropdownButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeaderActionsDropdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtE,MAAM,MAAM,oCAAoC,GAAG,IAAI,CACrD,sBAAsB,EACtB,MAAM,CACP,GACC,mBAAmB,GAAG;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAEH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;;;;;;EAWA;AAED,wBAAgB,+BAA+B,CAAC,EAC9C,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oCAAoC,qBAQtC"}

package/dist/components/button/PageHeaderActionsDropdownButton.js

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+import React from 'react';
+import { DropdownButton } from './DropdownButton.js';
+
+function needsAttentionProps({ className, needsAttention, }) {
+    return needsAttention
+        ? {
+            className: classNames(className, "tds-btn--attention"),
+            prefix: (React.createElement("span", { className: "attention-icon", "aria-label": "Needs attention!" })),
+        }
+        : {
+            className,
+        };
+}
+function PageHeaderActionsDropdownButton({ needsAttention, className, ...props }) {
+    return (React.createElement(DropdownButton, { ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
+}
+
+export { PageHeaderActionsDropdownButton, needsAttentionProps };
+//# sourceMappingURL=PageHeaderActionsDropdownButton.js.map

package/dist/components/button/PageHeaderActionsDropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React 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 function PageHeaderActionsDropdownButton({\n  needsAttention,\n  className,\n  ...props\n}: PageHeaderActionsDropdownButtonProps) {\n  return (\n    <DropdownButton\n      {...props}\n      kind=\"secondary-page-header\"\n      {...needsAttentionProps({ className, needsAttention })}\n    />\n  )\n}\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;AAEK,SAAU,+BAA+B,CAAC,EAC9C,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EAC6B,EAAA;IACrC,QACE,oBAAC,cAAc,EAAA,EAAA,GACT,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD,EACH;AACH;;;;"}

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

@@ -4,4 +4,5 @@ export { DropdownButton } from "./DropdownButton";
 export { DropdownIconButton } from "./DropdownIconButton";
 export { IconButton } from "./IconButton";
 export { LoadingButton } from "./LoadingButton";
+export { PageHeaderActionsDropdownButton } from "./PageHeaderActionsDropdownButton";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAElB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAA"}

package/dist/deprecated.css

@@ -6,146 +6,14 @@
   --t-border-size-default: var(--t-border-width-default);
   --t-border-size-thick: var(--t-border-width-thick);
   --t-font-weight-semi-bold: var(--t-font-weight-semibold);
-  --t-text-color-tag-gray: var(--t-text-color-tag-bold-gray);
-  --t-text-color-tag-magenta: var(--t-text-color-tag-bold-magenta);
-  --t-text-color-tag-blue: var(--t-text-color-tag-bold-blue);
-  --t-text-color-tag-aqua: var(--t-text-color-tag-bold-aqua);
-  --t-text-color-tag-teal: var(--t-text-color-tag-bold-teal);
-  --t-text-color-tag-green: var(--t-text-color-tag-bold-green);
-  --t-text-color-tag-yellow: var(--t-text-color-tag-bold-yellow);
-  --t-text-color-tag-orange: var(--t-text-color-tag-bold-orange);
-  --t-text-color-tag-pink: var(--t-text-color-tag-bold-pink);
-  --t-text-color-tag-purple: var(--t-text-color-tag-bold-purple);
   --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
   --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
   --t-fill-color-alert-info: hsl(204, 94%, 49%);
   --t-fill-color-alert-success: hsl(122, 60%, 41%);
   --t-fill-color-alert-warning: hsl(43, 96%, 58%);
   --t-fill-color-alert-error: hsl(4, 77%, 59%);
-  --t-fill-color-product-accounts-lightest: var(--t-fill-color-product-accounts-010);
-  --t-fill-color-product-accounts-lighter: var(--t-fill-color-product-accounts-020);
-  --t-fill-color-product-accounts-light: var(--t-fill-color-product-accounts-040);
-  --t-fill-color-product-accounts-base: var(--t-fill-color-product-accounts-050);
-  --t-fill-color-product-accounts-dark: var(--t-fill-color-product-accounts-060);
-  --t-fill-color-product-accounts-darker: var(--t-fill-color-product-accounts-070);
-  --t-fill-color-product-accounts-darkest: var(--t-fill-color-product-accounts-080);
-  --t-fill-color-product-calendar-lightest: var(--t-fill-color-product-calendar-020);
-  --t-fill-color-product-calendar-lighter: var(--t-fill-color-product-calendar-030);
-  --t-fill-color-product-calendar-light: var(--t-fill-color-product-calendar-040);
-  --t-fill-color-product-calendar-base: var(--t-fill-color-product-calendar-050);
-  --t-fill-color-product-calendar-dark: var(--t-fill-color-product-calendar-060);
-  --t-fill-color-product-calendar-darker: var(--t-fill-color-product-calendar-070);
-  --t-fill-color-product-calendar-darkest: var(--t-fill-color-product-calendar-080);
-  --t-fill-color-product-checkins-lightest: var(--t-fill-color-product-checkins-020);
-  --t-fill-color-product-checkins-lighter: var(--t-fill-color-product-checkins-030);
-  --t-fill-color-product-checkins-light: var(--t-fill-color-product-checkins-040);
-  --t-fill-color-product-checkins-base: var(--t-fill-color-product-checkins-050);
-  --t-fill-color-product-checkins-dark: var(--t-fill-color-product-checkins-060);
-  --t-fill-color-product-checkins-darker: var(--t-fill-color-product-checkins-070);
-  --t-fill-color-product-checkins-darkest: var(--t-fill-color-product-checkins-080);
-  --t-fill-color-product-giving-lightest: var(--t-fill-color-product-giving-020);
-  --t-fill-color-product-giving-lighter: var(--t-fill-color-product-giving-030);
-  --t-fill-color-product-giving-light: var(--t-fill-color-product-giving-040);
-  --t-fill-color-product-giving-base: var(--t-fill-color-product-giving-050);
-  --t-fill-color-product-giving-dark: var(--t-fill-color-product-giving-060);
-  --t-fill-color-product-giving-darker: var(--t-fill-color-product-giving-070);
-  --t-fill-color-product-giving-darkest: var(--t-fill-color-product-giving-080);
-  --t-fill-color-product-groups-lightest: var(--t-fill-color-product-groups-020);
-  --t-fill-color-product-groups-lighter: var(--t-fill-color-product-groups-030);
-  --t-fill-color-product-groups-light: var(--t-fill-color-product-groups-040);
-  --t-fill-color-product-groups-base: var(--t-fill-color-product-groups-050);
-  --t-fill-color-product-groups-dark: var(--t-fill-color-product-groups-060);
-  --t-fill-color-product-groups-darker: var(--t-fill-color-product-groups-070);
-  --t-fill-color-product-groups-darkest: var(--t-fill-color-product-groups-080);
-  --t-fill-color-product-home-lightest: var(--t-fill-color-product-home-020);
-  --t-fill-color-product-home-lighter: var(--t-fill-color-product-home-030);
-  --t-fill-color-product-home-light: var(--t-fill-color-product-home-040);
-  --t-fill-color-product-home-base: var(--t-fill-color-product-home-050);
-  --t-fill-color-product-home-dark: var(--t-fill-color-product-home-060);
-  --t-fill-color-product-home-darker: var(--t-fill-color-product-home-070);
-  --t-fill-color-product-home-darkest: var(--t-fill-color-product-home-080);
-  --t-fill-color-product-people-lightest: var(--t-fill-color-product-people-020);
-  --t-fill-color-product-people-lighter: var(--t-fill-color-product-people-030);
-  --t-fill-color-product-people-light: var(--t-fill-color-product-people-040);
-  --t-fill-color-product-people-base: var(--t-fill-color-product-people-050);
-  --t-fill-color-product-people-dark: var(--t-fill-color-product-people-060);
-  --t-fill-color-product-people-darker: var(--t-fill-color-product-people-070);
-  --t-fill-color-product-people-darkest: var(--t-fill-color-product-people-080);
-  --t-fill-color-product-publishing-lightest: var(--t-fill-color-product-publishing-020);
-  --t-fill-color-product-publishing-lighter: var(--t-fill-color-product-publishing-030);
-  --t-fill-color-product-publishing-light: var(--t-fill-color-product-publishing-040);
-  --t-fill-color-product-publishing-base: var(--t-fill-color-product-publishing-050);
-  --t-fill-color-product-publishing-dark: var(--t-fill-color-product-publishing-060);
-  --t-fill-color-product-publishing-darker: var(--t-fill-color-product-publishing-070);
-  --t-fill-color-product-publishing-darkest: var(--t-fill-color-product-publishing-080);
-  --t-fill-color-product-registrations-lightest: var(--t-fill-color-product-registrations-020);
-  --t-fill-color-product-registrations-lighter: var(--t-fill-color-product-registrations-030);
-  --t-fill-color-product-registrations-light: var(--t-fill-color-product-registrations-040);
-  --t-fill-color-product-registrations-base: var(--t-fill-color-product-registrations-050);
-  --t-fill-color-product-registrations-dark: var(--t-fill-color-product-registrations-060);
-  --t-fill-color-product-registrations-darker: var(--t-fill-color-product-registrations-070);
-  --t-fill-color-product-registrations-darkest: var(--t-fill-color-product-registrations-080);
-  --t-fill-color-product-services-lightest: var(--t-fill-color-product-services-020);
-  --t-fill-color-product-services-lighter: var(--t-fill-color-product-services-030);
-  --t-fill-color-product-services-light: var(--t-fill-color-product-services-040);
-  --t-fill-color-product-services-base: var(--t-fill-color-product-services-050);
-  --t-fill-color-product-services-dark: var(--t-fill-color-product-services-060);
-  --t-fill-color-product-services-darker: var(--t-fill-color-product-services-070);
-  --t-fill-color-product-services-darkest: var(--t-fill-color-product-services-080);
-  --t-fill-color-tag-subtle-gray: var(--t-fill-color-tag-gray-010);
-  --t-fill-color-tag-subtle-blue: var(--t-fill-color-tag-blue-010);
-  --t-fill-color-tag-subtle-aqua: var(--t-fill-color-tag-aqua-010);
-  --t-fill-color-tag-subtle-teal: var(--t-fill-color-tag-teal-010);
-  --t-fill-color-tag-subtle-green: var(--t-fill-color-tag-green-010);
-  --t-fill-color-tag-subtle-yellow: var(--t-fill-color-tag-yellow-010);
-  --t-fill-color-tag-subtle-orange: var(--t-fill-color-tag-orange-010);
-  --t-fill-color-tag-subtle-pink: var(--t-fill-color-tag-pink-010);
-  --t-fill-color-tag-subtle-purple: var(--t-fill-color-tag-purple-010);
-  --t-fill-color-tag-subtle-magenta: var(--t-fill-color-tag-magenta-010);
-  --t-fill-color-tag-subtle-label-gray: var(--t-fill-color-tag-gray-020);
-  --t-fill-color-tag-subtle-label-blue: var(--t-fill-color-tag-blue-020);
-  --t-fill-color-tag-subtle-label-aqua: var(--t-fill-color-tag-aqua-020);
-  --t-fill-color-tag-subtle-label-teal: var(--t-fill-color-tag-teal-020);
-  --t-fill-color-tag-subtle-label-green: var(--t-fill-color-tag-green-020);
-  --t-fill-color-tag-subtle-label-yellow: var(--t-fill-color-tag-yellow-020);
-  --t-fill-color-tag-subtle-label-orange: var(--t-fill-color-tag-orange-020);
-  --t-fill-color-tag-subtle-label-pink: var(--t-fill-color-tag-pink-020);
-  --t-fill-color-tag-subtle-label-purple: var(--t-fill-color-tag-purple-020);
-  --t-fill-color-tag-subtle-label-magenta: var(--t-fill-color-tag-magenta-020);
-  --t-fill-color-tag-bold-gray: var(--t-fill-color-tag-gray-030);
-  --t-fill-color-tag-bold-blue: var(--t-fill-color-tag-blue-030);
-  --t-fill-color-tag-bold-aqua: var(--t-fill-color-tag-aqua-030);
-  --t-fill-color-tag-bold-teal: var(--t-fill-color-tag-teal-030);
-  --t-fill-color-tag-bold-green: var(--t-fill-color-tag-green-030);
-  --t-fill-color-tag-bold-yellow: var(--t-fill-color-tag-yellow-030);
-  --t-fill-color-tag-bold-orange: var(--t-fill-color-tag-orange-030);
-  --t-fill-color-tag-bold-pink: var(--t-fill-color-tag-pink-030);
-  --t-fill-color-tag-bold-purple: var(--t-fill-color-tag-purple-030);
-  --t-fill-color-tag-bold-magenta: var(--t-fill-color-tag-magenta-030);
-  --t-fill-color-tag-bold-label-gray: var(--t-fill-color-tag-gray-040);
-  --t-fill-color-tag-bold-label-blue: var(--t-fill-color-tag-blue-040);
-  --t-fill-color-tag-bold-label-aqua: var(--t-fill-color-tag-aqua-040);
-  --t-fill-color-tag-bold-label-teal: var(--t-fill-color-tag-teal-040);
-  --t-fill-color-tag-bold-label-green: var(--t-fill-color-tag-green-040);
-  --t-fill-color-tag-bold-label-yellow: var(--t-fill-color-tag-yellow-040);
-  --t-fill-color-tag-bold-label-orange: var(--t-fill-color-tag-orange-040);
-  --t-fill-color-tag-bold-label-pink: var(--t-fill-color-tag-pink-040);
-  --t-fill-color-tag-bold-label-purple: var(--t-fill-color-tag-purple-040);
-  --t-fill-color-tag-bold-label-magenta: var(--t-fill-color-tag-magenta-040);
   --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
   --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
-  --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
-  --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
-  --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
-  --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
-  --t-fill-color-button-default-info-outline-dim-default: #ffffff00;
-  --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
-  --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
-  --t-fill-color-button-default-info-outline-dim-disabled: #ffffff00;
-  --t-fill-color-button-default-info-ghost-default: #ffffff00;
-  --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
-  --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
-  --t-fill-color-button-default-info-ghost-disabled: #ffffff00;
   --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
   --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
   --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);

package/dist/index.css

@@ -301,9 +301,9 @@
   --t-fill-color-tag-indigo-020: hsl(233, 79%, 87%);
   --t-fill-color-tag-indigo-030: hsl(233, 77%, 81%);
   --t-fill-color-tag-indigo-040: hsl(236, 79%, 74%);
-  --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 42%);
-  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);
-  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);
+  --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 93%);
+  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 88%);
+  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 81%);
   --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
   --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
   --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
@@ -390,146 +390,14 @@
   --t-border-size-default: var(--t-border-width-default);
   --t-border-size-thick: var(--t-border-width-thick);
   --t-font-weight-semi-bold: var(--t-font-weight-semibold);
-  --t-text-color-tag-gray: var(--t-text-color-tag-bold-gray);
-  --t-text-color-tag-magenta: var(--t-text-color-tag-bold-magenta);
-  --t-text-color-tag-blue: var(--t-text-color-tag-bold-blue);
-  --t-text-color-tag-aqua: var(--t-text-color-tag-bold-aqua);
-  --t-text-color-tag-teal: var(--t-text-color-tag-bold-teal);
-  --t-text-color-tag-green: var(--t-text-color-tag-bold-green);
-  --t-text-color-tag-yellow: var(--t-text-color-tag-bold-yellow);
-  --t-text-color-tag-orange: var(--t-text-color-tag-bold-orange);
-  --t-text-color-tag-pink: var(--t-text-color-tag-bold-pink);
-  --t-text-color-tag-purple: var(--t-text-color-tag-bold-purple);
   --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
   --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
   --t-fill-color-alert-info: hsl(204, 94%, 49%);
   --t-fill-color-alert-success: hsl(122, 60%, 41%);
   --t-fill-color-alert-warning: hsl(43, 96%, 58%);
   --t-fill-color-alert-error: hsl(4, 77%, 59%);
-  --t-fill-color-product-accounts-lightest: var(--t-fill-color-product-accounts-010);
-  --t-fill-color-product-accounts-lighter: var(--t-fill-color-product-accounts-020);
-  --t-fill-color-product-accounts-light: var(--t-fill-color-product-accounts-040);
-  --t-fill-color-product-accounts-base: var(--t-fill-color-product-accounts-050);
-  --t-fill-color-product-accounts-dark: var(--t-fill-color-product-accounts-060);
-  --t-fill-color-product-accounts-darker: var(--t-fill-color-product-accounts-070);
-  --t-fill-color-product-accounts-darkest: var(--t-fill-color-product-accounts-080);
-  --t-fill-color-product-calendar-lightest: var(--t-fill-color-product-calendar-020);
-  --t-fill-color-product-calendar-lighter: var(--t-fill-color-product-calendar-030);
-  --t-fill-color-product-calendar-light: var(--t-fill-color-product-calendar-040);
-  --t-fill-color-product-calendar-base: var(--t-fill-color-product-calendar-050);
-  --t-fill-color-product-calendar-dark: var(--t-fill-color-product-calendar-060);
-  --t-fill-color-product-calendar-darker: var(--t-fill-color-product-calendar-070);
-  --t-fill-color-product-calendar-darkest: var(--t-fill-color-product-calendar-080);
-  --t-fill-color-product-checkins-lightest: var(--t-fill-color-product-checkins-020);
-  --t-fill-color-product-checkins-lighter: var(--t-fill-color-product-checkins-030);
-  --t-fill-color-product-checkins-light: var(--t-fill-color-product-checkins-040);
-  --t-fill-color-product-checkins-base: var(--t-fill-color-product-checkins-050);
-  --t-fill-color-product-checkins-dark: var(--t-fill-color-product-checkins-060);
-  --t-fill-color-product-checkins-darker: var(--t-fill-color-product-checkins-070);
-  --t-fill-color-product-checkins-darkest: var(--t-fill-color-product-checkins-080);
-  --t-fill-color-product-giving-lightest: var(--t-fill-color-product-giving-020);
-  --t-fill-color-product-giving-lighter: var(--t-fill-color-product-giving-030);
-  --t-fill-color-product-giving-light: var(--t-fill-color-product-giving-040);
-  --t-fill-color-product-giving-base: var(--t-fill-color-product-giving-050);
-  --t-fill-color-product-giving-dark: var(--t-fill-color-product-giving-060);
-  --t-fill-color-product-giving-darker: var(--t-fill-color-product-giving-070);
-  --t-fill-color-product-giving-darkest: var(--t-fill-color-product-giving-080);
-  --t-fill-color-product-groups-lightest: var(--t-fill-color-product-groups-020);
-  --t-fill-color-product-groups-lighter: var(--t-fill-color-product-groups-030);
-  --t-fill-color-product-groups-light: var(--t-fill-color-product-groups-040);
-  --t-fill-color-product-groups-base: var(--t-fill-color-product-groups-050);
-  --t-fill-color-product-groups-dark: var(--t-fill-color-product-groups-060);
-  --t-fill-color-product-groups-darker: var(--t-fill-color-product-groups-070);
-  --t-fill-color-product-groups-darkest: var(--t-fill-color-product-groups-080);
-  --t-fill-color-product-home-lightest: var(--t-fill-color-product-home-020);
-  --t-fill-color-product-home-lighter: var(--t-fill-color-product-home-030);
-  --t-fill-color-product-home-light: var(--t-fill-color-product-home-040);
-  --t-fill-color-product-home-base: var(--t-fill-color-product-home-050);
-  --t-fill-color-product-home-dark: var(--t-fill-color-product-home-060);
-  --t-fill-color-product-home-darker: var(--t-fill-color-product-home-070);
-  --t-fill-color-product-home-darkest: var(--t-fill-color-product-home-080);
-  --t-fill-color-product-people-lightest: var(--t-fill-color-product-people-020);
-  --t-fill-color-product-people-lighter: var(--t-fill-color-product-people-030);
-  --t-fill-color-product-people-light: var(--t-fill-color-product-people-040);
-  --t-fill-color-product-people-base: var(--t-fill-color-product-people-050);
-  --t-fill-color-product-people-dark: var(--t-fill-color-product-people-060);
-  --t-fill-color-product-people-darker: var(--t-fill-color-product-people-070);
-  --t-fill-color-product-people-darkest: var(--t-fill-color-product-people-080);
-  --t-fill-color-product-publishing-lightest: var(--t-fill-color-product-publishing-020);
-  --t-fill-color-product-publishing-lighter: var(--t-fill-color-product-publishing-030);
-  --t-fill-color-product-publishing-light: var(--t-fill-color-product-publishing-040);
-  --t-fill-color-product-publishing-base: var(--t-fill-color-product-publishing-050);
-  --t-fill-color-product-publishing-dark: var(--t-fill-color-product-publishing-060);
-  --t-fill-color-product-publishing-darker: var(--t-fill-color-product-publishing-070);
-  --t-fill-color-product-publishing-darkest: var(--t-fill-color-product-publishing-080);
-  --t-fill-color-product-registrations-lightest: var(--t-fill-color-product-registrations-020);
-  --t-fill-color-product-registrations-lighter: var(--t-fill-color-product-registrations-030);
-  --t-fill-color-product-registrations-light: var(--t-fill-color-product-registrations-040);
-  --t-fill-color-product-registrations-base: var(--t-fill-color-product-registrations-050);
-  --t-fill-color-product-registrations-dark: var(--t-fill-color-product-registrations-060);
-  --t-fill-color-product-registrations-darker: var(--t-fill-color-product-registrations-070);
-  --t-fill-color-product-registrations-darkest: var(--t-fill-color-product-registrations-080);
-  --t-fill-color-product-services-lightest: var(--t-fill-color-product-services-020);
-  --t-fill-color-product-services-lighter: var(--t-fill-color-product-services-030);
-  --t-fill-color-product-services-light: var(--t-fill-color-product-services-040);
-  --t-fill-color-product-services-base: var(--t-fill-color-product-services-050);
-  --t-fill-color-product-services-dark: var(--t-fill-color-product-services-060);
-  --t-fill-color-product-services-darker: var(--t-fill-color-product-services-070);
-  --t-fill-color-product-services-darkest: var(--t-fill-color-product-services-080);
-  --t-fill-color-tag-subtle-gray: var(--t-fill-color-tag-gray-010);
-  --t-fill-color-tag-subtle-blue: var(--t-fill-color-tag-blue-010);
-  --t-fill-color-tag-subtle-aqua: var(--t-fill-color-tag-aqua-010);
-  --t-fill-color-tag-subtle-teal: var(--t-fill-color-tag-teal-010);
-  --t-fill-color-tag-subtle-green: var(--t-fill-color-tag-green-010);
-  --t-fill-color-tag-subtle-yellow: var(--t-fill-color-tag-yellow-010);
-  --t-fill-color-tag-subtle-orange: var(--t-fill-color-tag-orange-010);
-  --t-fill-color-tag-subtle-pink: var(--t-fill-color-tag-pink-010);
-  --t-fill-color-tag-subtle-purple: var(--t-fill-color-tag-purple-010);
-  --t-fill-color-tag-subtle-magenta: var(--t-fill-color-tag-magenta-010);
-  --t-fill-color-tag-subtle-label-gray: var(--t-fill-color-tag-gray-020);
-  --t-fill-color-tag-subtle-label-blue: var(--t-fill-color-tag-blue-020);
-  --t-fill-color-tag-subtle-label-aqua: var(--t-fill-color-tag-aqua-020);
-  --t-fill-color-tag-subtle-label-teal: var(--t-fill-color-tag-teal-020);
-  --t-fill-color-tag-subtle-label-green: var(--t-fill-color-tag-green-020);
-  --t-fill-color-tag-subtle-label-yellow: var(--t-fill-color-tag-yellow-020);
-  --t-fill-color-tag-subtle-label-orange: var(--t-fill-color-tag-orange-020);
-  --t-fill-color-tag-subtle-label-pink: var(--t-fill-color-tag-pink-020);
-  --t-fill-color-tag-subtle-label-purple: var(--t-fill-color-tag-purple-020);
-  --t-fill-color-tag-subtle-label-magenta: var(--t-fill-color-tag-magenta-020);
-  --t-fill-color-tag-bold-gray: var(--t-fill-color-tag-gray-030);
-  --t-fill-color-tag-bold-blue: var(--t-fill-color-tag-blue-030);
-  --t-fill-color-tag-bold-aqua: var(--t-fill-color-tag-aqua-030);
-  --t-fill-color-tag-bold-teal: var(--t-fill-color-tag-teal-030);
-  --t-fill-color-tag-bold-green: var(--t-fill-color-tag-green-030);
-  --t-fill-color-tag-bold-yellow: var(--t-fill-color-tag-yellow-030);
-  --t-fill-color-tag-bold-orange: var(--t-fill-color-tag-orange-030);
-  --t-fill-color-tag-bold-pink: var(--t-fill-color-tag-pink-030);
-  --t-fill-color-tag-bold-purple: var(--t-fill-color-tag-purple-030);
-  --t-fill-color-tag-bold-magenta: var(--t-fill-color-tag-magenta-030);
-  --t-fill-color-tag-bold-label-gray: var(--t-fill-color-tag-gray-040);
-  --t-fill-color-tag-bold-label-blue: var(--t-fill-color-tag-blue-040);
-  --t-fill-color-tag-bold-label-aqua: var(--t-fill-color-tag-aqua-040);
-  --t-fill-color-tag-bold-label-teal: var(--t-fill-color-tag-teal-040);
-  --t-fill-color-tag-bold-label-green: var(--t-fill-color-tag-green-040);
-  --t-fill-color-tag-bold-label-yellow: var(--t-fill-color-tag-yellow-040);
-  --t-fill-color-tag-bold-label-orange: var(--t-fill-color-tag-orange-040);
-  --t-fill-color-tag-bold-label-pink: var(--t-fill-color-tag-pink-040);
-  --t-fill-color-tag-bold-label-purple: var(--t-fill-color-tag-purple-040);
-  --t-fill-color-tag-bold-label-magenta: var(--t-fill-color-tag-magenta-040);
   --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
   --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
-  --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
-  --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
-  --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
-  --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
-  --t-fill-color-button-default-info-outline-dim-default: #ffffff00;
-  --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
-  --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
-  --t-fill-color-button-default-info-outline-dim-disabled: #ffffff00;
-  --t-fill-color-button-default-info-ghost-default: #ffffff00;
-  --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
-  --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
-  --t-fill-color-button-default-info-ghost-disabled: #ffffff00;
   --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
   --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
   --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
@@ -1161,6 +1029,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
   --tds-btn-disabled-opacity: 1;
   --tds-btn-min-height: 32px;
   --tds-btn-text-decoration: none;
+  --tds-btn-attention-icon-size: 1em;
   display: inline-flex;
   gap: 1ex;
   align-items: center;
@@ -1287,13 +1156,13 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
   }
 
 .tds-btn--neutral {
-  --tds-btn-color: var(--t-text-color-default-inverted);
+  --tds-btn-color: var(--t-text-color-status-neutral);
   --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
   --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
-  --tds-btn-color-hover: var(--t-text-color-default-inverted);
+  --tds-btn-color-hover: var(--t-text-color-status-neutral);
   --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
   --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
-  --tds-btn-color-active: var(--t-text-color-default-inverted);
+  --tds-btn-color-active: var(--t-text-color-status-neutral);
   --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
   --tds-btn-border-color-active: var(--t-fill-color-button-neutral-solid-active);
   --tds-btn-color-disabled: var(--t-text-color-default-disabled);
@@ -1559,6 +1428,15 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
     visibility: hidden;
   }
 
+.tds-btn--attention .attention-icon {
+  display: inline-block;
+  width: var(--tds-btn-attention-icon-size);
+  height: var(--tds-btn-attention-icon-size);
+  background-color: var(--t-icon-color-status-warning-primary);
+  border: .125em solid var(--t-border-color-default-white);
+  border-radius: var(--t-border-radius-round);
+}
+
 .tds-loading-spinner {
   --tds-loading-spinner-border-width: 4px; /* Default for md size */
   --tds-loading-spinner-border-color: var(--t-fill-color-transparency-light-040);