@salt-ds/core 1.70.0 → 1.71.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @salt-ds/core
 
+## 1.71.0
+
+### Minor Changes
+
+- 5da6723: Added `LinkButton`, a button-styled link for prominent navigation. Supports neutral and accented sentiments, icons, icon-only labels, and routing-library integration via the `render` prop.
+
+  ```tsx
+  import { LinkButton } from "@salt-ds/core";
+
+  <LinkButton href="/reports">View reports</LinkButton>;
+  ```
+
+- 0f92b84: Added `elevation` support to `Card`, `InteractableCard`, `LinkCard`, and `Panel`. Cards default to raised elevation to preserve their existing appearance, while `Panel` defaults to flat elevation. Added `borderColor` support to `Card`, `InteractableCard`, and `LinkCard`, including `borderColor="none"` for ghost cards.
+- d7e777c: Added `DrawerHeader`, `DrawerContent` and `DrawerFooter`, implementing header and footer blocks in core `Drawer`. Composing a `Drawer` from `DrawerHeader`, `DrawerContent` and `DrawerFooter` is the recommended approach.
+
+  `DrawerHeader` takes optional `header`, `preheader`, `description` and `actions`, and displays an accent bar unless `disableAccent` is set. A close action should be passed to `actions` as a `Button`. `DrawerHeader` stays pinned to the top, `DrawerContent` is scrollable.
+
+  `DrawerHeader` names `Drawer` with its `header` and `preheader`, and describes it with its `description`, so `aria-labelledby` and `aria-describedby` no longer need to be set manually.
+
+  ```tsx
+  import {
+    Button,
+    Drawer,
+    DrawerContent,
+    DrawerFooter,
+    DrawerHeader,
+  } from "@salt-ds/core";
+  import { CloseIcon } from "@salt-ds/icons";
+
+  <Drawer open={open} onOpenChange={setOpen}>
+    <DrawerHeader
+      header="Check deposit #1278"
+      actions={
+        <Button
+          aria-label="Close drawer"
+          appearance="transparent"
+          onClick={() => setOpen(false)}
+        >
+          <CloseIcon aria-hidden />
+        </Button>
+      }
+    />
+    <DrawerContent>{content}</DrawerContent>
+    <DrawerFooter>
+      <Button appearance="transparent">Cancel</Button>
+      <Button sentiment="accented">Save</Button>
+    </DrawerFooter>
+  </Drawer>;
+  ```
+
+  Deprecated `DrawerCloseButton`. Use a `Button` with a `CloseIcon` in `DrawerHeader`'s `actions` instead.
+
+### Patch Changes
+
+- 0f92b84: Prevented disabled `Card` and `InteractableCard` components from receiving hover styling.
+- 1417fa9: Fixed Tabs from announcing an ignored overflow selection when that value was later selected externally.
+- dd17c26: Fixed duplicate menu close notifications during keyboard activation and prevented announcements from being queued after `AriaAnnouncerProvider` unmounts.
+- d7e777c: Fixed `disableDismiss` on `Drawer` also preventing Escape from closing the drawer. It now only prevents dismissal on click away, matching its documentation and `Dialog`.
+- 86080e7: Changed flat `Panel` instances to use sharp corners.
+- f705932: Deprecated the `hoverable` prop on `Card`. Use `LinkCard` or `InteractableCard` when the entire card is interactive.
+- 5ab650a: Fixed vertical alignment of smaller controls with larger controls in FormField.
+
 ## 1.70.0
 
 ### Minor Changes

package/css/salt-core.css

@@ -865,14 +865,17 @@ a.saltAvatar::after {
 .saltCard {
   border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));
   border-style: var(--salt-borderStyle-solid);
+  border-color: var(--saltCard-borderColor, var(--card-borderColor));
   padding: var(--saltCard-padding, var(--card-padding));
   position: relative;
-  box-shadow: var(--salt-overlayable-shadow);
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   box-sizing: border-box;
   border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   overflow: hidden;
   --card-accent-color: var(--salt-sentiment-accent-background);
+  --card-borderColor: var(--salt-container-borderColor);
+  --card-borderColor-strong: var(--salt-container-bold-borderColor);
+  --card-borderColor-subtle: var(--salt-container-subtle-borderColor);
   --card-padding: var(--salt-spacing-200);
 }
 .saltCard.saltCard-sectioned {
@@ -889,19 +892,33 @@ a.saltAvatar::after {
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-secondary {
   background: var(--saltCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-tertiary {
   background: var(--saltCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltCard-ghost {
   background: var(--saltCard-background, var(--salt-container-ghost-background));
-  border-color: var(--salt-container-ghost-borderColor);
+  --card-borderColor: var(--salt-container-ghost-borderColor);
+  --card-borderColor-strong: var(--salt-container-ghost-bold-borderColor);
+  --card-borderColor-subtle: var(--salt-container-ghost-subtle-borderColor);
+}
+.saltCard-flat {
+  box-shadow: var(--saltCard-boxShadow-flat, none);
+}
+.saltCard-raised {
+  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));
+}
+.saltCard-borderColorStrong {
+  --card-borderColor: var(--card-borderColor-strong);
+}
+.saltCard-borderColorSubtle {
+  --card-borderColor: var(--card-borderColor-subtle);
+}
+.saltCard-borderColorNone {
+  --card-borderColor: transparent;
 }
 .saltCard-accent::after {
   content: "";
@@ -941,10 +958,9 @@ a:focus .saltCard-interactable,
   box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
   cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));
   border-color: var(--salt-actionable-accented-borderColor-hover);
-  position: relative;
 }
 @media (hover: hover) {
-  .saltCard-hoverable:hover {
+  .saltCard-hoverable:not(.saltCard-disabled):hover {
     box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
     border-color: var(--salt-actionable-accented-borderColor-hover);
   }
@@ -1480,6 +1496,14 @@ a:focus .saltCard-interactable.saltCard-disabled {
   top: 0;
   box-sizing: border-box;
 }
+.saltDrawer.saltDrawer-sectioned {
+  padding: 0;
+}
+@supports selector(:has(*)) {
+  .saltDrawer:has(> .saltDrawerHeader, > .saltDrawerContent, > .saltDrawerFooter) {
+    padding: 0;
+  }
+}
 .saltDrawer-primary {
   --drawer-background: var(--salt-container-primary-background);
 }
@@ -1547,6 +1571,94 @@ a:focus .saltCard-interactable.saltCard-disabled {
   margin-right: calc(var(--salt-spacing-300) * -1);
 }
 
+/* src/drawer/DrawerContent.css */
+.saltDrawerContent {
+  color: var(--salt-content-primary-foreground);
+  padding: 0 var(--salt-spacing-300);
+  flex: 1 1 auto;
+  min-height: var(--salt-text-lineHeight);
+  display: flex;
+  box-sizing: border-box;
+}
+.saltDrawerContent:first-child {
+  padding-top: var(--salt-spacing-300);
+}
+.saltDrawerContent:last-child {
+  padding-bottom: var(--salt-spacing-300);
+}
+.saltDrawerContent-inner {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;
+  box-sizing: border-box;
+}
+.saltDrawerContent-inner:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));
+}
+.saltDrawerContent-inner.saltDrawerContent-scrollTop {
+  border-top-color: var(--salt-separable-tertiary-borderColor);
+}
+.saltDrawerContent-inner.saltDrawerContent-scrollBottom {
+  border-bottom-color: var(--salt-separable-tertiary-borderColor);
+}
+
+/* src/drawer/DrawerFooter.css */
+.saltDrawerFooter {
+  padding: var(--salt-spacing-300);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+/* src/drawer/DrawerHeader.css */
+.saltDrawerHeader {
+  padding: var(--salt-spacing-300);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.saltDrawerHeader-header {
+  margin: 0;
+}
+.saltDrawerHeader-container {
+  flex-grow: 1;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--salt-spacing-50);
+  padding-top: calc((var(--salt-size-base) - var(--salt-text-h2-lineHeight)) / 2);
+  align-items: flex-start;
+  min-width: 0;
+  word-break: break-word;
+}
+.saltDrawerHeader-header > .saltText {
+  display: block;
+  margin: 0;
+}
+.saltDrawerHeader-actionsContainer {
+  align-self: flex-start;
+  display: flex;
+}
+.saltDrawerHeader-withAccent {
+  position: relative;
+}
+.saltDrawerHeader-withAccent::before {
+  content: "";
+  position: absolute;
+  top: var(--salt-spacing-300);
+  bottom: var(--salt-spacing-300);
+  left: 0;
+  width: var(--salt-size-bar);
+  background: var(--salt-sentiment-accent-background);
+}
+
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   all: unset;
@@ -1855,6 +1967,10 @@ a:focus .saltCard-interactable.saltCard-disabled {
   grid-auto-rows: min-content;
   grid-template-areas: "label" "controls";
 }
+.saltFormField-labelTop.saltFormField-hasControls {
+  align-content: start;
+  grid-template-rows: min-content minmax(var(--salt-size-base), auto);
+}
 .saltFormField-labelTop .saltFormFieldHelperText {
   grid-area: 3 / 1;
 }
@@ -1862,10 +1978,16 @@ a:focus .saltCard-interactable.saltCard-disabled {
   grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
+.saltFormField-labelLeft.saltFormField-hasControls {
+  grid-template-rows: minmax(var(--salt-size-base), auto);
+}
 .saltFormField-labelRight {
   grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
+.saltFormField-labelRight.saltFormField-hasControls {
+  grid-template-rows: minmax(var(--salt-size-base), auto);
+}
 .saltFormField-labelLeft .saltFormFieldHelperText,
 .saltFormField-labelRight .saltFormFieldHelperText {
   grid-area: 2 / 2;
@@ -1877,19 +1999,15 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltFormField-labelRight .saltFormFieldLabel {
   text-align: right;
 }
-.saltFormField-controls {
-  align-items: center;
-  display: grid;
-  grid-auto-columns: minmax(0, 1fr);
-  grid-auto-flow: column;
-  grid-column-gap: var(--salt-spacing-100);
-}
 .saltFormFieldLabel {
   grid-area: label;
 }
 .saltFormFieldHelperText {
   grid-area: helperText;
 }
+.saltFormField-labelTop > :not(.saltFormFieldLabel):not(.saltFormFieldHelperText) {
+  align-self: center;
+}
 .saltFormField-disabled {
   --saltInput-outline: none;
   --saltCheckbox-outline: none;
@@ -1899,6 +2017,9 @@ a:focus .saltCard-interactable.saltCard-disabled {
   .saltFormField:not(:has(.saltFormFieldLabel)) {
     grid-template-areas: "controls";
   }
+  .saltFormField-hasControls:not(:has(.saltFormFieldLabel)) {
+    grid-template-rows: minmax(var(--salt-size-base), auto);
+  }
 }
 
 /* src/form-field/FormFieldHelperText.css */
@@ -1923,9 +2044,6 @@ a:focus .saltCard-interactable.saltCard-disabled {
   font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));
   width: 100%;
 }
-.saltFormFieldLabel:hover + .saltFormField-controls * {
-  --input-borderColor: var(--input-borderColor-hover);
-}
 .saltFormField-labelLeft .saltFormFieldLabel.saltText {
   align-self: baseline;
   padding-top: var(--salt-spacing-100);
@@ -2186,8 +2304,8 @@ a:focus .saltCard-interactable.saltCard-disabled {
 .saltInteractableCard {
   border-width: var(--saltInteractableCard-borderWidth, var(--salt-size-fixed-100));
   border-style: var(--saltInteractableCard-borderStyle, var(--salt-borderStyle-solid));
+  border-color: var(--saltInteractableCard-borderColor, var(--interactableCard-borderColor));
   border-radius: var(--saltInteractableCard-borderRadius, var(--salt-palette-corner, 0));
-  box-shadow: var(--salt-overlayable-shadow);
   display: block;
   padding: var(--saltInteractableCard-padding, var(--card-padding));
   position: relative;
@@ -2195,6 +2313,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   overflow: hidden;
   --card-accent-color: var(--salt-sentiment-accent-background);
+  --interactableCard-borderColor: var(--salt-container-borderColor);
   --card-padding: var(--salt-spacing-200);
 }
 .saltInteractableCard.saltInteractableCard-sectioned {
@@ -2211,15 +2330,27 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltInteractableCard-primary {
   background: var(--saltInteractableCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-secondary {
   background: var(--saltInteractableCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltInteractableCard-tertiary {
   background: var(--saltInteractableCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-bold-borderColor);
+}
+.saltInteractableCard-flat {
+  box-shadow: var(--saltInteractableCard-boxShadow-flat, none);
+}
+.saltInteractableCard-raised {
+  box-shadow: var(--saltInteractableCard-boxShadow, var(--salt-overlayable-shadow));
+}
+.saltInteractableCard-borderColorStrong {
+  --interactableCard-borderColor: var(--salt-container-bold-borderColor);
+}
+.saltInteractableCard-borderColorSubtle {
+  --interactableCard-borderColor: var(--salt-container-subtle-borderColor);
+}
+.saltInteractableCard-borderColorNone {
+  --interactableCard-borderColor: transparent;
 }
 .saltInteractableCard-accent::after {
   content: "";
@@ -2260,15 +2391,11 @@ a:focus .saltCard-interactable.saltCard-disabled {
   outline-offset: var(--salt-focused-outlineOffset);
 }
 @media (hover: hover) {
-  .saltInteractableCard:hover {
+  .saltInteractableCard:not(.saltInteractableCard-disabled):hover {
     cursor: var(--salt-cursor-hover);
     box-shadow: var(--salt-overlayable-shadow-hover);
     border-color: var(--salt-actionable-accented-borderColor-hover);
   }
-  .saltInteractableCard-disabled:hover {
-    cursor: var(--salt-cursor-disabled);
-    box-shadow: none;
-  }
 }
 .saltInteractableCard-selected,
 .saltInteractableCard:active,
@@ -2417,12 +2544,117 @@ a:focus .saltCard-interactable.saltCard-disabled {
   -webkit-user-select: none;
 }
 
+/* src/link-button/LinkButton.css */
+.saltLinkButton {
+  --linkButton-borderWidth: var(--salt-size-fixed-100);
+  align-items: var(--saltLinkButton-alignItems, center);
+  appearance: none;
+  background: var(--saltLinkButton-background, var(--linkButton-background));
+  border-color: var(--saltLinkButton-borderColor, var(--linkButton-borderColor, transparent));
+  border-style: var(--saltLinkButton-borderStyle, solid);
+  border-width: var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth));
+  border-radius: var(--saltLinkButton-borderRadius, var(--salt-palette-corner-weak, 0));
+  color: var(--saltLinkButton-text-color, var(--linkButton-text-color));
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  justify-content: var(--saltLinkButton-justifyContent, center);
+  font-size: var(--saltLinkButton-fontSize, var(--salt-text-fontSize));
+  font-family: var(--saltLinkButton-fontFamily, var(--salt-text-action-fontFamily));
+  line-height: var(--saltLinkButton-lineHeight, var(--salt-text-lineHeight));
+  letter-spacing: var(--saltLinkButton-letterSpacing, var(--salt-text-action-letterSpacing));
+  text-transform: var(--saltLinkButton-textTransform, var(--salt-text-action-textTransform));
+  padding: 0 var(--saltLinkButton-padding, calc(var(--salt-spacing-100) - var(--saltLinkButton-borderWidth, var(--linkButton-borderWidth))));
+  margin: var(--saltLinkButton-margin, 0);
+  height: var(--saltLinkButton-height, var(--salt-size-base));
+  min-width: var(--saltLinkButton-minWidth, unset);
+  position: relative;
+  text-align: var(--saltLinkButton-textAlign, var(--salt-text-action-textAlign));
+  text-decoration: var(--linkButton-textDecoration, var(--salt-typography-textDecoration-underline));
+  text-underline-offset: var(--salt-spacing-fixed-200);
+  transition: none;
+  width: var(--saltLinkButton-width, auto);
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  font-weight: var(--saltLinkButton-fontWeight, var(--salt-text-action-fontWeight));
+}
+.saltLinkButton-underlineDefault {
+  --linkButton-textDecoration: var(--salt-typography-textDecoration-underline);
+  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-focus: var(--linkButton-textDecoration-hover);
+}
+.saltLinkButton-underlineNever {
+  --linkButton-textDecoration: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --linkButton-textDecoration-focus: var(--salt-typography-textDecoration-none);
+}
+.saltLinkButton-externalLinkADA {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+@media (hover: hover) {
+  .saltLinkButton:hover {
+    background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
+    color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
+    border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
+    cursor: var(--salt-cursor-hover);
+    text-decoration: var(--linkButton-textDecoration-hover, var(--salt-typography-textDecoration-none));
+  }
+}
+.saltLinkButton:focus-visible {
+  outline: var(--salt-focused-outline);
+  background: var(--saltLinkButton-background-hover, var(--linkButton-background-hover));
+  color: var(--saltLinkButton-text-color-hover, var(--linkButton-text-color-hover));
+  border-color: var(--saltLinkButton-borderColor-hover, var(--linkButton-borderColor-hover));
+  text-decoration: var(--linkButton-textDecoration-focus, var(--salt-typography-textDecoration-none));
+}
+.saltLinkButton.saltLinkButton-active:focus-visible,
+.saltLinkButton:focus-visible:active,
+.saltLinkButton:active,
+.saltLinkButton.saltLinkButton-active {
+  background: var(--saltLinkButton-background-active, var(--linkButton-background-active));
+  color: var(--saltLinkButton-text-color-active, var(--linkButton-text-color-active));
+  border-color: var(--saltLinkButton-borderColor-active, var(--linkButton-borderColor-active));
+  cursor: var(--salt-cursor-active);
+}
+.saltLinkButton-neutral {
+  --linkButton-text-color: var(--salt-actionable-subtle-foreground);
+  --linkButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);
+  --linkButton-text-color-active: var(--salt-actionable-subtle-foreground-active);
+  --linkButton-background: var(--salt-actionable-subtle-background);
+  --linkButton-background-hover: var(--salt-actionable-subtle-background-hover);
+  --linkButton-background-active: var(--salt-actionable-subtle-background-active);
+  --linkButton-borderColor: var(--salt-actionable-subtle-borderColor);
+  --linkButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);
+  --linkButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);
+}
+.saltLinkButton-accented {
+  --linkButton-text-color: var(--salt-actionable-accented-subtle-foreground);
+  --linkButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);
+  --linkButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);
+  --linkButton-background: var(--salt-actionable-accented-subtle-background);
+  --linkButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);
+  --linkButton-background-active: var(--salt-actionable-accented-subtle-background-active);
+  --linkButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);
+  --linkButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);
+  --linkButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);
+}
+
 /* src/link-card/LinkCard.css */
 .saltLinkCard {
   border-radius: var(--saltLinkCard-borderRadius, var(--salt-palette-corner, 0));
   border-style: var(--saltLinkCard-borderStyle, var(--salt-borderStyle-solid));
   border-width: var(--saltLinkCard-borderWidth, var(--salt-size-fixed-100));
-  box-shadow: var(--salt-overlayable-shadow);
+  border-color: var(--saltLinkCard-borderColor, var(--linkCard-borderColor));
   display: block;
   overflow: hidden;
   padding: var(--saltLinkCard-padding, var(--card-padding));
@@ -2430,6 +2662,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   text-decoration: none;
   transition: box-shadow var(--salt-duration-instant) ease-in-out;
   --linkCard-accent-color: var(--salt-sentiment-accent-background);
+  --linkCard-borderColor: var(--salt-container-borderColor);
   --card-padding: var(--salt-spacing-200);
 }
 .saltLinkCard.saltLinkCard-sectioned {
@@ -2446,15 +2679,27 @@ a:focus .saltCard-interactable.saltCard-disabled {
 }
 .saltLinkCard-primary {
   background: var(--saltLinkCard-background, var(--salt-container-primary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-secondary {
   background: var(--saltLinkCard-background, var(--salt-container-secondary-background));
-  border-color: var(--salt-container-bold-borderColor);
 }
 .saltLinkCard-tertiary {
   background: var(--saltLinkCard-background, var(--salt-container-tertiary-background));
-  border-color: var(--salt-container-bold-borderColor);
+}
+.saltLinkCard-flat {
+  box-shadow: var(--saltLinkCard-boxShadow-flat, none);
+}
+.saltLinkCard-raised {
+  box-shadow: var(--saltLinkCard-boxShadow, var(--salt-overlayable-shadow));
+}
+.saltLinkCard-borderColorStrong {
+  --linkCard-borderColor: var(--salt-container-bold-borderColor);
+}
+.saltLinkCard-borderColorSubtle {
+  --linkCard-borderColor: var(--salt-container-subtle-borderColor);
+}
+.saltLinkCard-borderColorNone {
+  --linkCard-borderColor: transparent;
 }
 .saltLinkCard-accent::after {
   content: "";
@@ -3624,9 +3869,12 @@ a:focus .saltCard-interactable.saltCard-disabled {
   overflow: auto;
   padding: var(--saltPanel-padding, var(--salt-spacing-300));
   width: var(--saltPanel-width, 100%);
-  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
 }
+.saltPanel-raised {
+  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
+  box-shadow: var(--saltPanel-boxShadow, var(--salt-overlayable-shadow));
+}
 
 /* src/parent-child-layout/ParentChildLayout.css */
 .saltParentChildLayout {
@@ -7157,4 +7405,4 @@ label.saltText small,
   box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
 }
 
-/* src/cd5976d7-dcad-41e7-8f09-5aa5bbfe3d34.css */
+/* src/cb166099-faaf-4d81-b955-72294da7c0cb.css */

package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js

@@ -23,6 +23,7 @@ const AriaAnnouncerProvider = React.forwardRef(function AriaAnnouncerProvider2({
   const [politeAnnouncements, setPoliteAnnouncements] = React.useState([]);
   const [assertiveAnnouncements, setAssertiveAnnouncements] = React.useState([]);
   const idCounterRef = React.useRef(0);
+  const isMountedRef = React.useRef(true);
   const timeoutsRef = React.useRef(/* @__PURE__ */ new Set());
   const scheduleRemoval = React.useCallback(
     (id, assertiveness, duration) => {
@@ -40,6 +41,7 @@ const AriaAnnouncerProvider = React.forwardRef(function AriaAnnouncerProvider2({
   );
   const makeAnnouncement = React.useCallback(
     (message, assertiveness = "polite", duration = ANNOUNCEMENT_TIME_IN_DOM) => {
+      if (!isMountedRef.current) return;
       idCounterRef.current += 1;
       const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;
       if (assertiveness === "polite") {
@@ -55,6 +57,12 @@ const AriaAnnouncerProvider = React.forwardRef(function AriaAnnouncerProvider2({
     },
     [scheduleRemoval]
   );
+  React.useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
   React.useEffect(() => {
     const timeouts = timeoutsRef.current;
     return () => {

package/dist-cjs/aria-announcer/AriaAnnouncerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport {\n  type AnnounceFnOptions,\n  AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\nimport { registerAnnouncementTarget } from \"./announcementRegistry\";\n\nexport const ANNOUNCEMENT_TIME_IN_DOM = 300; // time between DOM updates\n\nexport interface AriaAnnouncerProviderProps\n  extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Optional target key used to route announcements to this provider.\n   */\n  target?: string;\n}\n\nconst AnnouncementRegion = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithRef<\"div\">\n>(function AnnouncementRegion(props, ref) {\n  return (\n    <div\n      // Keep the region simple for maximum assistive-tech compatibility.\n      // aria-live is applied by the caller (polite/assertive).\n      aria-atomic={false}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\ntype AnnouncementMessage = {\n  id: string;\n  message: string;\n};\n\nexport const AriaAnnouncerProvider = forwardRef<\n  HTMLDivElement,\n  AriaAnnouncerProviderProps\n>(function AriaAnnouncerProvider({ children, style, target, ...rest }, ref) {\n  const targetWindow = useWindow();\n\n  const [politeAnnouncements, setPoliteAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n  const [assertiveAnnouncements, setAssertiveAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n\n  const idCounterRef = useRef(0);\n  const timeoutsRef = useRef<Set<number>>(new Set());\n\n  const scheduleRemoval = useCallback(\n    (id: string, assertiveness: \"polite\" | \"assertive\", duration: number) => {\n      if (!targetWindow) return;\n\n      const setter =\n        assertiveness === \"polite\"\n          ? setPoliteAnnouncements\n          : setAssertiveAnnouncements;\n      const handle = targetWindow.setTimeout(() => {\n        timeoutsRef.current.delete(handle);\n        setter((previous) =>\n          previous.filter((announcement) => announcement.id !== id),\n        );\n      }, duration);\n      timeoutsRef.current.add(handle);\n    },\n    [targetWindow],\n  );\n\n  const makeAnnouncement = useCallback(\n    (\n      message: string,\n      assertiveness: \"polite\" | \"assertive\" = \"polite\",\n      duration: number = ANNOUNCEMENT_TIME_IN_DOM,\n    ) => {\n      idCounterRef.current += 1;\n      // Date.now() can collide when multiple announcements are created in the same millisecond\n      // (e.g. tests with cy.clock, batching, or multiple announces during one tick).\n      // Add a monotonic counter suffix to guarantee uniqueness.\n      const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;\n      if (assertiveness === \"polite\") {\n        setPoliteAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      } else {\n        setAssertiveAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      }\n      scheduleRemoval(id, assertiveness, duration);\n    },\n    [scheduleRemoval],\n  );\n\n  useEffect(() => {\n    const timeouts = timeoutsRef.current;\n    return () => {\n      for (const handle of timeouts) {\n        targetWindow?.clearTimeout(handle);\n      }\n      timeouts.clear();\n    };\n  }, [targetWindow]);\n\n  const announce = useCallback(\n    (\n      announcement: string,\n      legacyDelayOrOptions: number | AnnounceFnOptions | undefined = {},\n    ) => {\n      // Legacy delay (number arg) is handled by useAriaAnnouncer; if we also delayed\n      // here we'd apply it twice. Keep supporting the signature but ignore the delay.\n      const options: AnnounceFnOptions =\n        typeof legacyDelayOrOptions === \"object\" && legacyDelayOrOptions\n          ? legacyDelayOrOptions\n          : {};\n\n      makeAnnouncement(\n        announcement,\n        options.ariaLive,\n        options.duration ?? ANNOUNCEMENT_TIME_IN_DOM,\n      );\n    },\n    [makeAnnouncement],\n  );\n\n  const value = useMemo(() => ({ announce }), [announce]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n    return registerAnnouncementTarget(target, announce);\n  }, [announce, target]);\n\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <AnnouncementRegion aria-live=\"polite\">\n          {politeAnnouncements.map((announcement) => (\n            <div key={`polite-${announcement.id}`}>{announcement.message}</div>\n          ))}\n        </AnnouncementRegion>\n        <AnnouncementRegion aria-live=\"assertive\">\n          {assertiveAnnouncements.map((announcement) => (\n            <div key={`assertive-${announcement.id}`}>\n              {announcement.message}\n            </div>\n          ))}\n        </AnnouncementRegion>\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n});\n"],"names":["forwardRef","AnnouncementRegion","jsx","AriaAnnouncerProvider","useWindow","useState","useRef","useCallback","useEffect","useMemo","useIsomorphicLayoutEffect","registerAnnouncementTarget","jsxs","AriaAnnouncerContext"],"mappings":"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"}
+{"version":3,"file":"AriaAnnouncerProvider.js","sources":["../src/aria-announcer/AriaAnnouncerProvider.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport {\n  type AnnounceFnOptions,\n  AriaAnnouncerContext,\n} from \"./AriaAnnouncerContext\";\nimport { registerAnnouncementTarget } from \"./announcementRegistry\";\n\nexport const ANNOUNCEMENT_TIME_IN_DOM = 300; // time between DOM updates\n\nexport interface AriaAnnouncerProviderProps\n  extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Optional target key used to route announcements to this provider.\n   */\n  target?: string;\n}\n\nconst AnnouncementRegion = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithRef<\"div\">\n>(function AnnouncementRegion(props, ref) {\n  return (\n    <div\n      // Keep the region simple for maximum assistive-tech compatibility.\n      // aria-live is applied by the caller (polite/assertive).\n      aria-atomic={false}\n      ref={ref}\n      {...props}\n    />\n  );\n});\n\ntype AnnouncementMessage = {\n  id: string;\n  message: string;\n};\n\nexport const AriaAnnouncerProvider = forwardRef<\n  HTMLDivElement,\n  AriaAnnouncerProviderProps\n>(function AriaAnnouncerProvider({ children, style, target, ...rest }, ref) {\n  const targetWindow = useWindow();\n\n  const [politeAnnouncements, setPoliteAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n  const [assertiveAnnouncements, setAssertiveAnnouncements] = useState<\n    AnnouncementMessage[]\n  >([]);\n\n  const idCounterRef = useRef(0);\n  const isMountedRef = useRef(true);\n  const timeoutsRef = useRef<Set<number>>(new Set());\n\n  const scheduleRemoval = useCallback(\n    (id: string, assertiveness: \"polite\" | \"assertive\", duration: number) => {\n      if (!targetWindow) return;\n\n      const setter =\n        assertiveness === \"polite\"\n          ? setPoliteAnnouncements\n          : setAssertiveAnnouncements;\n      const handle = targetWindow.setTimeout(() => {\n        timeoutsRef.current.delete(handle);\n        setter((previous) =>\n          previous.filter((announcement) => announcement.id !== id),\n        );\n      }, duration);\n      timeoutsRef.current.add(handle);\n    },\n    [targetWindow],\n  );\n\n  const makeAnnouncement = useCallback(\n    (\n      message: string,\n      assertiveness: \"polite\" | \"assertive\" = \"polite\",\n      duration: number = ANNOUNCEMENT_TIME_IN_DOM,\n    ) => {\n      if (!isMountedRef.current) return;\n\n      idCounterRef.current += 1;\n      // Date.now() can collide when multiple announcements are created in the same millisecond\n      // (e.g. tests with fake timers, batching, or multiple announces during one tick).\n      // Add a monotonic counter suffix to guarantee uniqueness.\n      const id = `announce-${assertiveness}-${Date.now()}-${idCounterRef.current}`;\n      if (assertiveness === \"polite\") {\n        setPoliteAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      } else {\n        setAssertiveAnnouncements((previous) => {\n          return previous.concat({ id, message });\n        });\n      }\n      scheduleRemoval(id, assertiveness, duration);\n    },\n    [scheduleRemoval],\n  );\n\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  useEffect(() => {\n    const timeouts = timeoutsRef.current;\n    return () => {\n      for (const handle of timeouts) {\n        targetWindow?.clearTimeout(handle);\n      }\n      timeouts.clear();\n    };\n  }, [targetWindow]);\n\n  const announce = useCallback(\n    (\n      announcement: string,\n      legacyDelayOrOptions: number | AnnounceFnOptions | undefined = {},\n    ) => {\n      // Legacy delay (number arg) is handled by useAriaAnnouncer; if we also delayed\n      // here we'd apply it twice. Keep supporting the signature but ignore the delay.\n      const options: AnnounceFnOptions =\n        typeof legacyDelayOrOptions === \"object\" && legacyDelayOrOptions\n          ? legacyDelayOrOptions\n          : {};\n\n      makeAnnouncement(\n        announcement,\n        options.ariaLive,\n        options.duration ?? ANNOUNCEMENT_TIME_IN_DOM,\n      );\n    },\n    [makeAnnouncement],\n  );\n\n  const value = useMemo(() => ({ announce }), [announce]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n    return registerAnnouncementTarget(target, announce);\n  }, [announce, target]);\n\n  return (\n    <AriaAnnouncerContext.Provider value={value}>\n      {children}\n      <div\n        // hidden styling based on https://tailwindcss.com/docs/screen-readers\n        style={{\n          position: \"absolute\",\n          height: 1,\n          width: 1,\n          padding: 0,\n          margin: -1,\n          overflow: \"hidden\",\n          clip: \"rect(0, 0, 0, 0)\",\n          whiteSpace: \"nowrap\",\n          borderWidth: 0,\n          ...style,\n        }}\n        {...rest}\n        ref={ref}\n      >\n        <AnnouncementRegion aria-live=\"polite\">\n          {politeAnnouncements.map((announcement) => (\n            <div key={`polite-${announcement.id}`}>{announcement.message}</div>\n          ))}\n        </AnnouncementRegion>\n        <AnnouncementRegion aria-live=\"assertive\">\n          {assertiveAnnouncements.map((announcement) => (\n            <div key={`assertive-${announcement.id}`}>\n              {announcement.message}\n            </div>\n          ))}\n        </AnnouncementRegion>\n      </div>\n    </AriaAnnouncerContext.Provider>\n  );\n});\n"],"names":["forwardRef","AnnouncementRegion","jsx","AriaAnnouncerProvider","useWindow","useState","useRef","useCallback","useEffect","useMemo","useIsomorphicLayoutEffect","registerAnnouncementTarget","jsxs","AriaAnnouncerContext"],"mappings":"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"}

package/dist-cjs/card/Card.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  padding: var(--saltCard-padding, var(--card-padding));\n  position: relative;\n  box-shadow: var(--salt-overlayable-shadow);\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltCard.saltCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n  border-color: var(--salt-container-bold-borderColor);\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  border-color: var(--salt-container-ghost-borderColor);\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` (default) */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/*\n * **Deprecated:** The following styles are deprecated\n *  Use Interactable Card component instead\n *  for interactable styling\n */\n\n/* **Deprecated:** Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n  position: relative;\n}\n\n/* Styles applied if `hoverable` is set */\n@media (hover: hover) {\n  .saltCard-hoverable:hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* **Deprecated:** Styles applied on hover if `interactable={true}` and `disabled={true}` */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* **Deprecated:** Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* **Deprecated:** Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltCard {\n  border-width: var(--saltCard-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--saltCard-borderColor, var(--card-borderColor));\n  padding: var(--saltCard-padding, var(--card-padding));\n  position: relative;\n  transition: box-shadow var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  overflow: hidden;\n  --card-accent-color: var(--salt-sentiment-accent-background);\n  --card-borderColor: var(--salt-container-borderColor);\n  --card-borderColor-strong: var(--salt-container-bold-borderColor);\n  --card-borderColor-subtle: var(--salt-container-subtle-borderColor);\n  --card-padding: var(--salt-spacing-200);\n}\n\n.saltCard.saltCard-sectioned {\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n@supports selector(:has(*)) {\n  .saltCard:has(> .saltCardHeader, > .saltCardContent, > .saltCardFooter) {\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n.saltCard-tertiary {\n  background: var(--saltCard-background, var(--salt-container-tertiary-background));\n}\n\n.saltCard-ghost {\n  background: var(--saltCard-background, var(--salt-container-ghost-background));\n  --card-borderColor: var(--salt-container-ghost-borderColor);\n  --card-borderColor-strong: var(--salt-container-ghost-bold-borderColor);\n  --card-borderColor-subtle: var(--salt-container-ghost-subtle-borderColor);\n}\n\n/* Styles applied when elevation=\"flat\" */\n.saltCard-flat {\n  box-shadow: var(--saltCard-boxShadow-flat, none);\n}\n\n/* Styles applied when elevation=\"raised\" */\n.saltCard-raised {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied when borderColor=\"strong\" */\n.saltCard-borderColorStrong {\n  --card-borderColor: var(--card-borderColor-strong);\n}\n\n/* Styles applied when borderColor=\"subtle\" */\n.saltCard-borderColorSubtle {\n  --card-borderColor: var(--card-borderColor-subtle);\n}\n\n/* Styles applied when borderColor=\"none\" */\n.saltCard-borderColorNone {\n  --card-borderColor: transparent;\n}\n\n/* Styles applied to create accent */\n.saltCard-accent::after {\n  content: \"\";\n  position: absolute;\n  background-color: var(--saltCard-accent-color, var(--card-accent-color));\n}\n\n/* Styles applied to Card if `accent=\"bottom\"` */\n.saltCard-accentBottom::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  bottom: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: var(--salt-size-bar);\n  width: calc(100% + var(--salt-size-fixed-200));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-fixed-100));\n  top: calc(-1 * var(--salt-size-fixed-100));\n  height: calc(100% + var(--salt-size-fixed-200));\n  width: var(--salt-size-bar);\n}\n\n/* Deprecated interactable styles. Use InteractableCard instead. */\n\n/* Styles applied if `interactable={true}` */\n.saltCard-interactable {\n  display: block;\n  transition: none;\n}\n\n/* Styles applied on hover if `interactable={true}` */\na:focus .saltCard-interactable,\n.saltCard-interactable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  cursor: var(--saltCard-cursor-hover, var(--salt-cursor-hover));\n  border-color: var(--salt-actionable-accented-borderColor-hover);\n}\n\n/* Deprecated hoverable styles retained for backward compatibility. */\n@media (hover: hover) {\n  .saltCard-hoverable:not(.saltCard-disabled):hover {\n    box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n    border-color: var(--salt-actionable-accented-borderColor-hover);\n  }\n}\n\n/* Styles applied on active state if `interactable={true}` */\n.saltCard-interactable:active {\n  border-color: var(--salt-actionable-accented-borderColor-active);\n  box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover));\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied to disabled interactable states */\na:focus .saltCard-interactable.saltCard-disabled,\n.saltCard-interactable.saltCard-disabled:hover,\n.saltCard-interactable.saltCard-disabled:active {\n  box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow));\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCard-disabled,\n.saltCard-disabled.saltCard-interactable,\na:focus .saltCard-interactable.saltCard-disabled {\n  border-color: var(--salt-container-bold-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs if `disabled={true}` */\n.saltCard-disabled div {\n  pointer-events: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Card.css.js.map