@salt-ds/core 1.18.1 → 1.20.0

package/css/salt-core.css

@@ -131,7 +131,7 @@
   min-height: var(--avatar-container-size);
   overflow: hidden;
   user-select: none;
-  border-radius: 50%;
+  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));
 }
 .saltAvatar:has(img),
 .saltAvatar-withImage {
@@ -155,7 +155,7 @@
   padding-right: var(--salt-spacing-50);
   height: var(--salt-text-notation-lineHeight);
   min-width: var(--salt-text-notation-lineHeight);
-  border-radius: 9999px;
+  border-radius: var(--salt-palette-corner-strongest, 9999px);
   white-space: nowrap;
   z-index: var(--salt-zIndex-default);
   box-sizing: border-box;
@@ -185,6 +185,7 @@
   border-color: var(--saltBanner-borderColor, var(--banner-borderColor));
   border-width: var(--saltBanner-borderWidth, var(--salt-size-border));
   border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));
+  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
   display: inline-flex;
   gap: var(--salt-spacing-75);
@@ -287,7 +288,7 @@
   border-color: var(--saltButton-borderColor, transparent);
   border-style: var(--saltButton-borderStyle, solid);
   border-width: var(--saltButton-borderWidth, 0);
-  border-radius: var(--saltButton-borderRadius, 0);
+  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));
   color: var(--saltButton-text-color, var(--button-text-color));
   cursor: var(--saltButton-cursor, pointer);
   display: inline-flex;
@@ -352,7 +353,9 @@
   border-style: var(--salt-container-borderStyle);
   padding: var(--saltCard-padding, var(--salt-spacing-200));
   position: relative;
+  transition: box-shadow var(--salt-duration-instant) ease-in-out;
   box-sizing: border-box;
+  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
@@ -435,7 +438,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
   border-width: var(--saltCard-borderWidth, var(--card-borderWidth));
   border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));
   border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));
-  border-radius: var(--saltCard-borderRadius, 0);
+  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));
   display: block;
   transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);
   padding: var(--saltCard-padding, var(--salt-spacing-300));
@@ -606,6 +609,7 @@ a:link .saltInteractableCard * {
   height: var(--checkbox-size);
   min-height: var(--checkbox-size);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
+  border-radius: var(--salt-palette-corner-weaker, 0);
   color: var(--salt-selectable-foreground);
   background: var(--salt-container-primary-background);
   position: relative;
@@ -664,6 +668,262 @@ a:link .saltInteractableCard * {
   color: var(--salt-content-primary-foreground);
 }
 
+/* src/dialog/Dialog.css */
+.saltDialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--salt-spacing-300);
+  padding-bottom: var(--salt-spacing-300);
+  background: var(--salt-container-primary-background);
+  box-shadow: var(--salt-overlayable-shadow-modal);
+  overflow-y: auto;
+  z-index: var(--salt-zIndex-drawer);
+  height: min-content;
+  border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+}
+.saltDialog-info {
+  border-color: var(--salt-status-info-borderColor);
+}
+.saltDialog-error {
+  border-color: var(--salt-status-error-borderColor);
+}
+.saltDialog-warning {
+  border-color: var(--salt-status-warning-borderColor);
+}
+.saltDialog-success {
+  border-color: var(--salt-status-success-borderColor);
+}
+.saltDialog.saltDialog-enterAnimation {
+  animation: var(--salt-animation-fade-in-center);
+}
+.saltDialog.saltDialog-exitAnimation {
+  animation: var(--salt-animation-fade-out-back);
+}
+.saltDialog-small-xs {
+  width: 100%;
+  max-height: 48%;
+}
+.saltDialog-small-sm {
+  width: 56%;
+  max-height: 48%;
+}
+.saltDialog-small-md {
+  width: 36%;
+  max-height: 48%;
+}
+.saltDialog-small-lg {
+  width: 24%;
+  max-height: 48%;
+}
+.saltDialog-small-xl {
+  width: 24%;
+  max-height: 48%;
+}
+.saltDialog-medium-xs {
+  width: 100%;
+  max-height: 72%;
+}
+.saltDialog-medium-sm {
+  width: 84%;
+  max-height: 72%;
+}
+.saltDialog-medium-md {
+  width: 68%;
+  max-height: 72%;
+}
+.saltDialog-medium-lg {
+  width: 48%;
+  max-height: 72%;
+}
+.saltDialog-medium-xl {
+  width: 48%;
+  max-height: 72%;
+}
+.saltDialog-large-xs {
+  width: 100%;
+  max-height: 84%;
+}
+.saltDialog-large-sm {
+  width: 96%;
+  max-height: 84%;
+}
+.saltDialog-large-md {
+  width: 84%;
+  max-height: 84%;
+}
+.saltDialog-large-lg {
+  width: 72%;
+  max-height: 84%;
+}
+.saltDialog-large-xl {
+  width: 72%;
+  max-height: 84%;
+}
+
+/* src/dialog/DialogActions.css */
+.saltDialogActions {
+  padding: var(--salt-spacing-300);
+  padding-bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--salt-spacing-100);
+}
+
+/* src/dialog/DialogCloseButton.css */
+.saltButton.saltDialogCloseButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+/* src/dialog/DialogContent.css */
+.saltDialogContent {
+  color: var(--salt-content-primary-foreground);
+  min-height: var(--salt-text-lineHeight);
+  overflow-y: auto;
+  background: var(--salt-container-primary-background);
+  padding-bottom: var(--salt-spacing-50);
+  margin-left: var(--salt-spacing-200);
+  margin-right: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  padding-left: var(--salt-spacing-100);
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;
+  box-shadow: none;
+}
+.saltDialogContent-scroll {
+  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
+  box-shadow: var(--salt-overlayable-shadow-scroll);
+}
+
+/* src/dialog/DialogHeader.css */
+.saltDialogHeader {
+  padding-bottom: var(--salt-spacing-100);
+  padding-left: var(--salt-spacing-300);
+  padding-right: var(--salt-spacing-300);
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--salt-spacing-100);
+  box-sizing: border-box;
+}
+.saltDialogHeader-header {
+  margin: 0;
+}
+.saltDialogHeader .saltStatusIndicator.saltIcon {
+  --icon-size: var(--salt-text-h2-lineHeight);
+}
+.saltDialogHeader-withAccent {
+  position: relative;
+}
+.saltDialogHeader-withAccent::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: var(--salt-spacing-100);
+  width: var(--salt-size-accent);
+  background: var(--salt-accent-background);
+}
+.saltDialogHeader-error::before {
+  background: var(--salt-status-error-borderColor);
+}
+.saltDialogHeader-info::before {
+  background: var(--salt-status-info-borderColor);
+}
+.saltDialogHeader-success::before {
+  background: var(--salt-status-success-borderColor);
+}
+.saltDialogHeader-warning::before {
+  background: var(--salt-status-warning-borderColor);
+}
+
+/* src/drawer/Drawer.css */
+.saltDrawer {
+  background: var(--drawer-background);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
+  overflow: auto;
+  padding: var(--salt-spacing-300);
+  box-shadow: var(--salt-overlayable-shadow-modal);
+  z-index: var(--salt-zIndex-drawer);
+  position: fixed;
+  top: 0;
+  box-sizing: border-box;
+}
+.saltDrawer-primary {
+  --drawer-background: var(--salt-container-primary-background);
+}
+.saltDrawer-secondary {
+  --drawer-background: var(--salt-container-secondary-background);
+}
+.saltDrawer-top {
+  left: 0;
+  right: 0;
+  bottom: auto;
+}
+.saltDrawer-top.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-bottom);
+}
+.saltDrawer-top.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-bottom);
+}
+.saltDrawer-right {
+  left: auto;
+  right: 0;
+  height: 100%;
+}
+.saltDrawer-right.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-right);
+}
+.saltDrawer-right.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-right);
+}
+.saltDrawer-left {
+  left: 0;
+  right: auto;
+  height: 100%;
+}
+.saltDrawer-left.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-left);
+}
+.saltDrawer-left.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-left);
+}
+.saltDrawer-bottom {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: auto;
+}
+.saltDrawer-bottom.saltDrawer-enterAnimation {
+  animation: var(--salt-animation-slide-in-top);
+}
+.saltDrawer-bottom.saltDrawer-exitAnimation {
+  animation: var(--salt-animation-slide-out-top);
+}
+
+/* src/drawer/DrawerCloseButton.css */
+.saltDrawerCloseButton-container {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+}
+.saltButton-secondary.saltDrawerCloseButton {
+  position: fixed;
+  margin-top: calc(var(--salt-spacing-300) * -1);
+  margin-right: calc(var(--salt-spacing-300) * -1);
+}
+
 /* src/file-drop-zone/FileDropZone.css */
 .saltFileDropZone {
   color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
@@ -673,6 +933,7 @@ a:link .saltInteractableCard * {
   align-items: center;
   justify-content: center;
   border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
+  border-radius: var(--saltFileDropZone-borderRadius, var(--salt-palette-corner, 0));
   flex-direction: column;
   padding: var(--salt-spacing-200);
   gap: var(--salt-spacing-200);
@@ -1102,7 +1363,7 @@ a:link .saltInteractableCard * {
 }
 .saltLink {
   color: var(--link-color);
-  letter-spacing: 0px;
+  letter-spacing: var(--salt-text-letterSpacing);
   text-decoration: var(--link-textDecoration);
   font-family: var(--link-fontFamily);
 }
@@ -1112,8 +1373,8 @@ a:link .saltInteractableCard * {
 .saltText-secondary {
   --link-color: var(--salt-content-secondary-foreground);
 }
-.saltLink-icon {
-  margin-left: var(--salt-size-adornmentGap);
+.saltLink .saltLink-icon {
+  margin-left: var(--salt-spacing-75);
   margin-bottom: -2px;
 }
 .saltLink:visited {
@@ -1142,6 +1403,77 @@ a:link .saltInteractableCard * {
   opacity: 0;
 }
 
+/* src/link-card/LinkCard.css */
+.saltLinkCard {
+  border-width: var(--saltLinkCard-borderWidth, var(--salt-size-border));
+  border-style: var(--saltLinkCard-borderStyle, var(--salt-container-borderStyle));
+  border-radius: var(--saltLinkCard-borderRadius, 0);
+  display: block;
+  padding: var(--saltLinkCard-padding, var(--salt-spacing-200));
+  position: relative;
+  text-decoration: none;
+  transition: box-shadow var(--salt-duration-instant) ease-in-out;
+}
+.saltLinkCard-primary {
+  background: var(--saltLinkCard-background, var(--salt-container-primary-background));
+  border-color: var(--salt-container-primary-borderColor);
+  --linkCard-accent-color: var(--salt-container-primary-borderColor);
+}
+.saltLinkCard-secondary {
+  background: var(--saltLinkCard-background, var(--salt-container-secondary-background));
+  border-color: var(--salt-container-secondary-borderColor);
+  --linkCard-accent-color: var(--salt-container-secondary-borderColor);
+}
+.saltLinkCard-accent::after {
+  content: "";
+  position: absolute;
+  background-color: var(--saltLinkCard-accent-color, var(--linkCard-accent-color));
+}
+.saltLinkCard-accentBottom::after {
+  left: calc(-1 * var(--salt-size-border));
+  bottom: calc(-1 * var(--salt-size-border));
+  height: var(--salt-size-accent);
+  width: calc(100% + calc(2 * var(--salt-size-border)));
+}
+.saltLinkCard-accentLeft::after {
+  left: calc(-1 * var(--salt-size-border));
+  top: calc(-1 * var(--salt-size-border));
+  height: calc(100% + calc(2 * var(--salt-size-border)));
+  width: var(--salt-size-accent);
+}
+.saltLinkCard-accentTop::after {
+  left: calc(-1 * var(--salt-size-border));
+  top: calc(-1 * var(--salt-size-border));
+  height: var(--salt-size-accent);
+  width: calc(100% + calc(2 * var(--salt-size-border)));
+}
+.saltLinkCard-accentRight::after {
+  right: calc(-1 * var(--salt-size-border));
+  top: calc(-1 * var(--salt-size-border));
+  height: calc(100% + calc(2 * var(--salt-size-border)));
+  width: var(--salt-size-accent);
+}
+.saltLinkCard:focus-visible {
+  cursor: var(--salt-selectable-cursor-hover);
+  box-shadow: var(--salt-overlayable-shadow-hover);
+  outline-color: var(--salt-focused-outlineColor);
+  outline-style: var(--salt-focused-outlineStyle);
+  outline-width: var(--salt-focused-outlineWidth);
+  outline-offset: var(--salt-focused-outlineOffset);
+  --linkCard-accent-color: var(--salt-selectable-foreground-hover);
+}
+.saltLinkCard:hover {
+  cursor: var(--salt-selectable-cursor-hover);
+  box-shadow: var(--salt-overlayable-shadow-hover);
+  --linkCard-accent-color: var(--salt-selectable-foreground-hover);
+}
+.saltLinkCard:active {
+  cursor: var(--salt-selectable-cursor-active);
+  border-color: var(--salt-selectable-borderColor-selected);
+  box-shadow: var(--salt-overlayable-shadow);
+  --linkCard-accent-color: var(--salt-selectable-foreground-selected);
+}
+
 /* src/multiline-input/MultilineInput.css */
 .saltMultilineInput {
   --multilineInput-borderColor: var(--salt-editable-borderColor);
@@ -1164,6 +1496,7 @@ a:link .saltInteractableCard * {
   padding-right: var(--salt-spacing-100);
   position: relative;
   width: 100%;
+  box-sizing: border-box;
 }
 .saltMultilineInput:hover {
   --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);
@@ -1345,6 +1678,7 @@ a:link .saltInteractableCard * {
   text-decoration: none;
   cursor: var(--salt-selectable-cursor-hover);
   transition: all var(--salt-duration-instant) ease-in-out;
+  box-sizing: border-box;
 }
 .saltNavigationItem-rootItem {
   font-weight: var(--salt-text-fontWeight-strong);
@@ -1546,6 +1880,8 @@ a:link .saltInteractableCard * {
   overflow: auto;
   padding: var(--saltPanel-padding, var(--salt-size-container-spacing));
   width: var(--saltPanel-width, 100%);
+  border-radius: var(--saltPanel-borderRadius, var(--salt-palette-corner, 0));
+  box-sizing: border-box;
 }
 
 /* src/pill/Pill.css */
@@ -1554,7 +1890,7 @@ a:link .saltInteractableCard * {
   display: inline-flex;
   align-items: center;
   background: var(--saltPill-background, var(--salt-actionable-primary-background));
-  border-radius: 0;
+  border-radius: var(--saltPill-borderRadius, var(--salt-palette-corner-weaker, 0));
   border: 0;
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
   min-height: var(--salt-text-minHeight);
@@ -1902,6 +2238,7 @@ a:link .saltInteractableCard * {
 .saltSwitch-track {
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   --saltIcon-size: 100%;
+  border-radius: var(--salt-palette-corner-weak, 0);
   display: flex;
   flex-shrink: 0;
   height: calc(var(--salt-size-base) - var(--salt-spacing-100));
@@ -1948,6 +2285,7 @@ a:link .saltInteractableCard * {
   margin: var(--salt-spacing-25);
   border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner-weaker, 0);
 }
 .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,
 .saltSwitch:hover .saltSwitch-thumb {
@@ -2148,6 +2486,7 @@ label.saltText small,
   border-color: var(--saltToast-borderColor, var(--toast-borderColor));
   border-width: var(--saltToast-borderWidth, var(--salt-size-border));
   border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));
+  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));
   box-sizing: border-box;
   box-shadow: var(--salt-overlayable-shadow-popout);
   display: flex;
@@ -2197,7 +2536,7 @@ label.saltText small,
   display: inline-flex;
   background: var(--salt-actionable-secondary-background);
   border: 0 solid transparent;
-  border-radius: 0;
+  border-radius: var(--salt-palette-corner-weaker, 0);
   height: var(--salt-size-base);
   color: var(--salt-actionable-secondary-foreground);
   text-transform: var(--salt-text-action-textTransform);
@@ -2245,6 +2584,7 @@ label.saltText small,
   display: flex;
   background: var(--salt-container-primary-background);
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+  border-radius: var(--salt-palette-corner-weak, 0);
   width: fit-content;
   gap: var(--salt-spacing-50);
   padding: calc(var(--salt-spacing-50) - var(--salt-size-border));
@@ -2271,6 +2611,7 @@ label.saltText small,
   border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));
   border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));
   border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));
   box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));
   color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));
   font-family: var(--salt-text-fontFamily);
@@ -2414,4 +2755,4 @@ label.saltText small,
   padding-left: var(--salt-spacing-100);
 }
 
-/* src/93f45c06-41dc-4a15-ad67-814388eeab21.css */
+/* src/4ac14efc-3221-403f-9025-57897d045d58.css */

package/dist-cjs/avatar/Avatar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: var(--saltAvatar-borderRadius, var(--salt-palette-corner-strongest, 50%));\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Avatar.css.js.map

package/dist-cjs/badge/Badge.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: var(--salt-palette-corner-strongest, 9999px);\n\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Badge.css.js.map

package/dist-cjs/banner/Banner.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--salt-container-primary-background);\n\n  background: var(--saltBanner-background, var(--banner-background));\n  border-color: var(--saltBanner-borderColor, var(--banner-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltBanner-borderRadius, var(--salt-palette-corner, 0));\n  box-sizing: border-box;\n  display: inline-flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100));\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Styles applied to icon */\n.saltBanner-icon.saltIcon {\n  min-height: var(--salt-size-base);\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-borderColor: var(--salt-status-success-borderColor);\n}\n\n.saltBanner-secondary.saltBanner-info {\n  --banner-background: var(--salt-status-info-background);\n}\n\n.saltBanner-secondary.saltBanner-error {\n  --banner-background: var(--salt-status-error-background);\n}\n\n.saltBanner-secondary.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background);\n}\n\n.saltBanner-secondary.saltBanner-success {\n  --banner-background: var(--salt-status-success-background);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Banner.css.js.map

package/dist-cjs/button/Button.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
+var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Button.css.js.map

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-border));\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\n  position: relative;\n  box-sizing: border-box;\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  --card-accent-color: var(--salt-selectable-foreground-hover);\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-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\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-selectable-cursor-hover));\n  position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable: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-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-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-border));\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-200));\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}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-color: var(--salt-container-primary-borderColor);\n  --card-accent-color: var(--salt-container-primary-borderColor);\n}\n\n.saltCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n  border-color: var(--salt-container-secondary-borderColor);\n  --card-accent-color: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied if `hoverable` is set */\n.saltCard-hoverable:hover {\n  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));\n  --card-accent-color: var(--salt-selectable-foreground-hover);\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-border));\n  bottom: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"left\"` */\n.saltCard-accentLeft::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\n}\n\n/* Styles applied to Card if `accent=\"top\"` */\n.saltCard-accentTop::after {\n  left: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: var(--salt-size-accent);\n  width: calc(100% + calc(2 * var(--salt-size-border)));\n}\n\n/* Styles applied to Card if `accent=\"right\"` */\n.saltCard-accentRight::after {\n  right: calc(-1 * var(--salt-size-border));\n  top: calc(-1 * var(--salt-size-border));\n  height: calc(100% + calc(2 * var(--salt-size-border)));\n  width: var(--salt-size-accent);\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-selectable-cursor-hover));\n  position: relative;\n}\n\n/* **Deprecated:** Styles applied on active state if `interactable={true}` */\n.saltCard-interactable: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-primary-borderColor-disabled);\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=Card.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n  padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-primary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-secondary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-content-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, var(--salt-palette-corner, 0));\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n  padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n/* Styles applied to InteractableCard when variant=\"primary\" */\n.saltInteractableCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n}\n\n/* Styles applied to InteractableCard when variant=\"secondary\" */\n.saltInteractableCard-secondary {\n  background: var(--saltCard-background, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-content-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  color: var(--saltCard-color-disabled, var(--salt-content-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to InteractableCard primary variant if `disabled={true}` */\n.saltInteractableCard-primary.saltInteractableCard-disabled,\n.saltInteractableCard-primary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-primary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-primary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-primary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n}\n\n/* Styles applied to InteractableCard secondary variant if `disabled={true}` */\n.saltInteractableCard-secondary.saltInteractableCard-disabled,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:focus,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:hover,\n.saltInteractableCard-secondary.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-container-secondary-borderColor-disabled));\n  background: var(--saltCard-background-disabled, var(--salt-container-secondary-background));\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-content-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=InteractableCard.css.js.map

package/dist-cjs/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map