@salt-ds/core 1.16.1 → 1.18.0

package/css/salt-core.css

@@ -347,18 +347,53 @@
 
 /* src/card/Card.css */
 .saltCard {
-  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));
-  border-width: var(--salt-size-border);
+  border-width: var(--saltCard-borderWidth, var(--salt-size-border));
   border-style: var(--salt-container-borderStyle);
-  padding: var(--saltCard-padding, var(--salt-spacing-300));
+  padding: var(--saltCard-padding, var(--salt-spacing-200));
+  position: relative;
 }
 .saltCard-primary {
   background: var(--saltCard-background, var(--salt-container-primary-background));
   border-color: var(--salt-container-primary-borderColor);
+  --card-accent-color: var(--salt-container-primary-borderColor);
 }
 .saltCard-secondary {
   background: var(--saltCard-background, var(--salt-container-secondary-background));
   border-color: var(--salt-container-secondary-borderColor);
+  --card-accent-color: var(--salt-container-secondary-borderColor);
+}
+.saltCard-hoverable:hover {
+  box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover));
+  --card-accent-color: var(--salt-selectable-foreground-hover);
+}
+.saltCard-accent::after {
+  content: "";
+  position: absolute;
+  background-color: var(--saltCard-accent-color, var(--card-accent-color));
+}
+.saltCard-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)));
+}
+.saltCard-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);
+}
+.saltCard-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)));
+}
+.saltCard-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);
 }
 .saltCard-interactable {
   display: block;
@@ -765,12 +800,12 @@ a:link .saltInteractableCard * {
 }
 .saltFormField-labelLeft {
   align-self: center;
-  grid-template-columns: var(--formField-label-width, 40%) 1fr;
+  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
 .saltFormField-labelRight {
   align-self: center;
-  grid-template-columns: var(--formField-label-width, 40%) 1fr;
+  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;
   grid-template-areas: "label controls";
 }
 .saltFormField-labelLeft .saltFormFieldHelperText,
@@ -1181,18 +1216,17 @@ a:link .saltInteractableCard * {
 .saltMultilineInput-textarea {
   background: none;
   border: none;
-  box-sizing: content-box;
+  box-sizing: border-box;
   color: inherit;
   cursor: inherit;
-  display: inline-flex;
-  height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));
   flex-grow: 1;
   font: inherit;
   letter-spacing: 0;
+  line-height: var(--salt-text-lineHeight);
   margin: var(--salt-spacing-75) 0;
   min-width: 0;
-  overflow: hidden;
-  resize: none;
+  min-height: 0;
+  resize: vertical;
   padding: 0;
 }
 .saltMultilineInput-textarea::placeholder {
@@ -2264,4 +2298,106 @@ label.saltText small,
   --tooltip-status-borderColor: var(--salt-status-success-borderColor);
 }
 
-/* src/feb16112-741d-4b27-a03d-54d627a89274.css */
+/* src/progress/CircularProgress/CircularProgress.css */
+.saltCircularProgress {
+  color: var(--salt-content-primary-foreground);
+  display: inline-flex;
+  position: relative;
+}
+.saltCircularProgress-progressLabel {
+  align-items: center;
+  color: var(--salt-content-primary-foreground);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.saltCircularProgress-track {
+  inline-size: calc(var(--salt-size-base) * 3);
+  block-size: calc(var(--salt-size-base) * 3);
+  border-style: var(--salt-track-borderStyle);
+  border-width: var(--salt-size-bar-small);
+  border-radius: calc(var(--salt-size-base) * 3);
+  border-color: var(--salt-track-borderColor);
+}
+.saltCircularProgress-bar {
+  inline-size: calc(var(--salt-size-base) * 3);
+  block-size: calc(var(--salt-size-base) * 3);
+  border-style: var(--salt-track-borderStyle);
+  border-width: var(--salt-size-bar-strong);
+  border-radius: calc(var(--salt-size-base) * 3);
+  border-color: var(--salt-accent-background);
+}
+.saltCircularProgress-bars {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.saltCircularProgress-barOverlayRight,
+.saltCircularProgress-barOverlayLeft {
+  inline-size: 50%;
+  block-size: 100%;
+  transform-origin: 100% center;
+  transform: rotate(180deg);
+  overflow: hidden;
+  position: absolute;
+}
+.saltCircularProgress-barSubOverlayRight,
+.saltCircularProgress-barSubOverlayLeft {
+  inline-size: 100%;
+  block-size: 100%;
+  transform-origin: 100% center;
+  overflow: hidden;
+  transform: rotate(-180deg);
+}
+.saltCircularProgress-barOverlayLeft {
+  transform: rotate(0deg);
+}
+
+/* src/progress/LinearProgress/LinearProgress.css */
+.saltLinearProgress {
+  align-items: center;
+  color: var(--salt-content-primary-foreground);
+  display: flex;
+  min-width: 400px;
+  font-size: var(--linearProgress-fontSize);
+}
+.saltLinearProgress-barContainer {
+  background: none;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: var(--salt-size-bar-strong);
+}
+.saltLinearProgress-bar {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  transition: transform 0.2s linear;
+  transform-origin: left;
+  background: var(--salt-accent-background);
+  z-index: 2;
+}
+.saltLinearProgress-track {
+  background: var(--salt-track-borderColor);
+  width: 100%;
+  height: var(--salt-size-bar-small);
+  position: absolute;
+  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);
+  transition: transform 0.2s linear;
+  transform-origin: left;
+}
+.saltLinearProgress-progressLabel {
+  color: inherit;
+  margin: 0;
+  white-space: nowrap;
+  padding-left: var(--salt-spacing-100);
+}
+
+/* src/ea07bb70-951b-4950-986a-9d5bf6b2ea75.css */

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  box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow));\n  border-width: var(--salt-size-border);\n  border-style: var(--salt-container-borderStyle);\n  padding: var(--saltCard-padding, var(--salt-spacing-300));\n}\n\n.saltCard-primary {\n  background: var(--saltCard-background, var(--salt-container-primary-background));\n  border-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}\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}\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/Card.js

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var React = require('react');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var capitalize = require('../utils/capitalize.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
@@ -17,10 +18,12 @@ var Card$1 = require('./Card.css.js');
 const withBaseName = makePrefixer.makePrefixer("saltCard");
 const Card = React.forwardRef(function Card2(props, ref) {
   const {
+    accent,
+    children,
     className,
     disabled,
     interactable,
-    children,
+    hoverable,
     variant = "primary",
     ...rest
   } = props;
@@ -35,6 +38,9 @@ const Card = React.forwardRef(function Card2(props, ref) {
       withBaseName(),
       withBaseName(variant),
       {
+        [withBaseName("accent")]: accent,
+        [withBaseName(`accent${capitalize.capitalize(accent || "")}`)]: accent,
+        [withBaseName("hoverable")]: hoverable,
         [withBaseName("disabled")]: disabled,
         [withBaseName("interactable")]: interactable
       },

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant; defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  props,\n  ref\n) {\n  const {\n    className,\n    disabled,\n    interactable,\n    children,\n    variant = \"primary\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-card\",\n    css: cardCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          /* **Deprecated:** InteractableCard should be used instead for these features */\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"interactable\")]: interactable,\n        },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAqBrC,MAAM,IAAO,GAAAC,gBAAA,CAAsC,SAASC,KAAAA,CACjE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,OAAO,CAAA;AAAA,MACpB;AAAA,QAEE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/card/Card.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport cardCss from \"./Card.css\";\n\nconst withBaseName = makePrefixer(\"saltCard\");\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If provided an accent is shown in the specified position.\n   */\n  accent?: \"bottom\" | \"top\" | \"left\" | \"right\";\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, the card will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the card will have hover styling.\n   */\n  hoverable?: boolean;\n  /**\n   * **Deprecated:** Use the InteractableCard component instead\n   *\n   * If `true`, interactive styles will be applied to `Card`. These styles give prominence to certain content\n   * on the page.\n   */\n  interactable?: boolean;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card(\n  props,\n  ref\n) {\n  const {\n    accent,\n    children,\n    className,\n    disabled,\n    interactable,\n    hoverable,\n    variant = \"primary\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-card\",\n    css: cardCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"accent\")]: accent,\n          [withBaseName(`accent${capitalize(accent || \"\")}`)]: accent,\n          [withBaseName(\"hoverable\")]: hoverable,\n          /* **Deprecated:** InteractableCard should be used instead for these features */\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"interactable\")]: interactable,\n        },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Card","useWindow","useComponentCssInjection","cardCss","jsx","clsx","capitalize"],"mappings":";;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AA6BrC,MAAM,IAAO,GAAAC,gBAAA,CAAsC,SAASC,KAAAA,CACjE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,OAAO,CAAA;AAAA,MACpB;AAAA,QACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,QAC1B,CAAC,YAAa,CAAA,CAAA,MAAA,EAASC,sBAAW,MAAU,IAAA,EAAE,GAAG,CAAI,GAAA,MAAA;AAAA,QACrD,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,QAE7B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,YAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/form-field/FormField.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 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.saltFormField-labelTop {\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  align-self: center;\n  grid-template-columns: var(--formField-label-width, 40%) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight {\n  align-self: center;\n  grid-template-columns: var(--formField-label-width, 40%) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n";
+var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 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.saltFormField-labelTop {\n  grid-template-areas:\n    \"label\"\n    \"controls\";\n}\n\n.saltFormField-labelTop .saltFormFieldHelperText {\n  grid-area: 3 / 1;\n}\n\n.saltFormField-labelLeft {\n  align-self: center;\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelRight {\n  align-self: center;\n  grid-template-columns: var(--saltFormField-label-width, var(--formField-label-width, 40%)) 1fr;\n  grid-template-areas: \"label controls\";\n}\n\n.saltFormField-labelLeft .saltFormFieldHelperText,\n.saltFormField-labelRight .saltFormFieldHelperText {\n  grid-area: 2 / 2;\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormField.css.js.map

package/dist-cjs/index.js

@@ -50,6 +50,8 @@ var CompactPaginator = require('./pagination/CompactPaginator.js');
 var GoToInput = require('./pagination/GoToInput.js');
 var Panel = require('./panel/Panel.js');
 var Pill = require('./pill/Pill.js');
+var CircularProgress = require('./progress/CircularProgress/CircularProgress.js');
+var LinearProgress = require('./progress/LinearProgress/LinearProgress.js');
 var RadioButton = require('./radio-button/RadioButton.js');
 var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
 var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
@@ -155,6 +157,8 @@ exports.CompactPaginator = CompactPaginator.CompactPaginator;
 exports.GoToInput = GoToInput.GoToInput;
 exports.Panel = Panel.Panel;
 exports.Pill = Pill.Pill;
+exports.CircularProgress = CircularProgress.CircularProgress;
+exports.LinearProgress = LinearProgress.LinearProgress;
 exports.RadioButton = RadioButton.RadioButton;
 exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
 exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/multiline-input/MultilineInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=MultilineInput.css.js.map

package/dist-cjs/multiline-input/MultilineInput.js

@@ -13,6 +13,7 @@ var StatusAdornment = require('../status-adornment/StatusAdornment.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useControlled = require('../utils/useControlled.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
@@ -43,6 +44,8 @@ const MultilineInput = React.forwardRef(
     variant = "primary",
     ...other
   }, ref) {
+    const inputRef = React.useRef(null);
+    const handleRef = useForkRef.useForkRef(inputRef, textAreaRef);
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-multiline-input",
@@ -84,11 +87,31 @@ const MultilineInput = React.forwardRef(
       name: "MultilineInput",
       state: "value"
     });
+    const previousHeight = React.useRef(void 0);
+    const input = inputRef.current;
+    const changeHeight = React.useCallback(() => {
+      if (!input)
+        return;
+      const hasBeenManuallyResized = previousHeight.current !== void 0 && input.style.height !== previousHeight.current;
+      if (!hasBeenManuallyResized) {
+        const previousOverflow = input.style.overflow;
+        input.style.overflow = "hidden";
+        input.style.height = "auto";
+        const newHeight = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
+        input.style.height = newHeight;
+        previousHeight.current = newHeight;
+        input.style.overflow = previousOverflow;
+      }
+    }, [input]);
     const handleChange = (event) => {
       const value2 = event.target.value;
       setValue(value2);
       onChange == null ? void 0 : onChange(event);
+      changeHeight();
     };
+    React.useLayoutEffect(() => {
+      changeHeight();
+    }, [value, changeHeight]);
     const handleBlur = (event) => {
       onBlur == null ? void 0 : onBlur(event);
       setFocused(false);
@@ -111,7 +134,7 @@ const MultilineInput = React.forwardRef(
           [withBaseName("focused")]: !isDisabled && focused,
           [withBaseName("disabled")]: isDisabled,
           [withBaseName("readOnly")]: isReadOnly,
-          [withBaseName(validationStatus || "")]: validationStatus
+          [withBaseName(validationStatus != null ? validationStatus : "")]: validationStatus
         },
         classNameProp
       ),
@@ -130,7 +153,7 @@ const MultilineInput = React.forwardRef(
           disabled: isDisabled,
           id,
           readOnly: isReadOnly,
-          ref: textAreaRef,
+          ref: handleRef,
           required: isRequired,
           role,
           rows,

package/dist-cjs/multiline-input/MultilineInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  forwardRef,\n  ReactNode,\n  Ref,\n  TextareaHTMLAttributes,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"textarea\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Number of rows. Defaults to 3\n   */\n  rows?: number;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n  function MultilineInput(\n    {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      bordered = false,\n      className: classNameProp,\n      disabled,\n      endAdornment,\n      id,\n      placeholder,\n      readOnly,\n      role,\n      rows = 3,\n      startAdornment,\n      style,\n      textAreaProps = {},\n      textAreaRef,\n      value: valueProp,\n      defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      ...other\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-multiline-input\",\n      css: multilineInputCss,\n      window: targetWindow,\n    });\n\n    const restA11yProps = {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n    };\n\n    const [focused, setFocused] = useState(false);\n\n    const {\n      \"aria-describedby\": textAreaDescribedBy,\n      \"aria-labelledby\": textAreaLabelledBy,\n      onBlur,\n      onChange,\n      onFocus,\n      required: textAreaRequired,\n      ...restTextAreaProps\n    } = textAreaProps;\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnly || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : textAreaRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValueProp,\n      name: \"MultilineInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      onChange?.(event);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onFocus?.(event);\n      setFocused(true);\n    };\n\n    const multilineInputStyles = {\n      \"--saltMultilineInput-rows\": rows,\n      ...style,\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"withAdornmentRow\")]: endAdornment,\n            [withBaseName(\"bordered\")]: bordered,\n            [withBaseName(\"focused\")]: !isDisabled && focused,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"readOnly\")]: isReadOnly,\n            [withBaseName(validationStatus || \"\")]: validationStatus,\n          },\n          classNameProp\n        )}\n        ref={ref}\n        style={multilineInputStyles}\n        {...other}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <textarea\n          aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n          className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={textAreaRef}\n          required={isRequired}\n          role={role}\n          rows={rows}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restTextAreaProps}\n        />\n        <div className={withBaseName(\"suffixAdornments\")}>\n          {!isDisabled && !isReadOnly && validationStatus && (\n            <div className={withBaseName(\"statusAdornmentContainer\")}>\n              <StatusAdornment status={validationStatus} />\n            </div>\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n        </div>\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
+{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  forwardRef,\n  ReactNode,\n  Ref,\n  TextareaHTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"textarea\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The default minimum number of rows. Defaults to 3\n   */\n  rows?: number;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n  function MultilineInput(\n    {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      bordered = false,\n      className: classNameProp,\n      disabled,\n      endAdornment,\n      id,\n      placeholder,\n      readOnly,\n      role,\n      rows = 3,\n      startAdornment,\n      style,\n      textAreaProps = {},\n      textAreaRef,\n      value: valueProp,\n      defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      ...other\n    },\n    ref\n  ) {\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const handleRef = useForkRef(inputRef, textAreaRef);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-multiline-input\",\n      css: multilineInputCss,\n      window: targetWindow,\n    });\n\n    const restA11yProps = {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n    };\n\n    const [focused, setFocused] = useState(false);\n\n    const {\n      \"aria-describedby\": textAreaDescribedBy,\n      \"aria-labelledby\": textAreaLabelledBy,\n      onBlur,\n      onChange,\n      onFocus,\n      required: textAreaRequired,\n      ...restTextAreaProps\n    } = textAreaProps;\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnly || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : textAreaRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValueProp,\n      name: \"MultilineInput\",\n      state: \"value\",\n    });\n\n    const previousHeight = useRef<string | undefined>(undefined);\n    const input = inputRef.current;\n\n    const changeHeight = useCallback(() => {\n      if (!input) return;\n      const hasBeenManuallyResized =\n        previousHeight.current !== undefined &&\n        input.style.height !== previousHeight.current;\n      if (!hasBeenManuallyResized) {\n        const previousOverflow = input.style.overflow;\n        input.style.overflow = \"hidden\";\n        input.style.height = \"auto\";\n        input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n        const newHeight = `${\n          input.scrollHeight + (input.offsetHeight - input.clientHeight)\n        }px`;\n        input.style.height = newHeight;\n        previousHeight.current = newHeight;\n        input.style.overflow = previousOverflow;\n      }\n    }, [input]);\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      onChange?.(event);\n      changeHeight();\n    };\n\n    useLayoutEffect(() => {\n      changeHeight();\n    }, [value, changeHeight]);\n\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onFocus?.(event);\n      setFocused(true);\n    };\n\n    const multilineInputStyles = {\n      \"--saltMultilineInput-rows\": rows,\n      ...style,\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"withAdornmentRow\")]: endAdornment,\n            [withBaseName(\"bordered\")]: bordered,\n            [withBaseName(\"focused\")]: !isDisabled && focused,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"readOnly\")]: isReadOnly,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          classNameProp\n        )}\n        ref={ref}\n        style={multilineInputStyles}\n        {...other}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <textarea\n          aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n          className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={handleRef}\n          required={isRequired}\n          role={role}\n          rows={rows}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restTextAreaProps}\n        />\n        <div className={withBaseName(\"suffixAdornments\")}>\n          {!isDisabled && !isReadOnly && validationStatus && (\n            <div className={withBaseName(\"statusAdornmentContainer\")}>\n              <StatusAdornment status={validationStatus} />\n            </div>\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n        </div>\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useRef","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","useCallback","value","useLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}

package/dist-cjs/progress/CircularProgress/CircularProgress.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCircularProgress {\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-progressLabel {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-track {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-small);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-track-borderColor);\n}\n\n.saltCircularProgress-bar {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-strong);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n  inline-size: 50%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  transform: rotate(180deg);\n  overflow: hidden;\n  position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n  inline-size: 100%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  overflow: hidden;\n  transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n  transform: rotate(0deg);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CircularProgress.css.js.map

package/dist-cjs/progress/CircularProgress/CircularProgress.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/progress/CircularProgress/CircularProgress.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var makePrefixer = require('../../utils/makePrefixer.js');
+require('../../utils/useFloatingUI/useFloatingUI.js');
+require('../../utils/useId.js');
+require('../../salt-provider/SaltProvider.js');
+require('../../viewport/ViewportProvider.js');
+var Text = require('../../text/Text.js');
+require('../../text/Display.js');
+require('../../text/Headings.js');
+require('../../text/Label.js');
+require('../../text/TextNotation.js');
+require('../../text/TextAction.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var CircularProgress$1 = require('./CircularProgress.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltCircularProgress");
+const CircularProgress = React.forwardRef(function CircularProgress2({ className, hideLabel = false, max = 100, min = 0, value = 0, ...rest }, ref) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-circular-progress",
+    css: CircularProgress$1,
+    window: targetWindow
+  });
+  const subOverlayRightStyle = {};
+  const subOverlayLeftStyle = {};
+  const getRotationAngle = (progress2, shift = 0) => {
+    return -180 + (progress2 - shift) / 50 * 180;
+  };
+  const progress = (value - min) / (max - min) * 100;
+  if (progress <= 50) {
+    const rotationAngle = getRotationAngle(progress);
+    subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;
+    subOverlayLeftStyle.transform = "rotate(-180deg)";
+  } else {
+    const rotationAngle = getRotationAngle(progress, 50);
+    subOverlayRightStyle.transform = "rotate(0deg)";
+    subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: clsx.clsx(withBaseName(), className),
+    ref,
+    role: "progressbar",
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": Math.round(value),
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: withBaseName("track")
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: withBaseName("bars"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: withBaseName("barOverlayRight"),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: withBaseName("barSubOverlayRight"),
+              style: subOverlayRightStyle,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: withBaseName("bar")
+              })
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: withBaseName("barOverlayLeft"),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: withBaseName("barSubOverlayLeft"),
+              style: subOverlayLeftStyle,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                className: withBaseName("bar")
+              })
+            })
+          })
+        ]
+      }),
+      !hideLabel && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
+        styleAs: "h2",
+        className: withBaseName("progressLabel"),
+        children: `${Math.round(progress)} %`
+      })
+    ]
+  });
+});
+
+exports.CircularProgress = CircularProgress;
+//# sourceMappingURL=CircularProgress.js.map

package/dist-cjs/progress/CircularProgress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, CSSProperties, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../../utils\";\nimport { Text } from \"../../text\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether to hide the text label within the progress. Defaults to `false`.\n   */\n  hideLabel?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * The value of the min progress indicator.\n   * Default value is 0.\n   */\n  min?: number;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  { className, hideLabel = false, max = 100, min = 0, value = 0, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const subOverlayRightStyle: CSSProperties = {};\n  const subOverlayLeftStyle: CSSProperties = {};\n\n  const getRotationAngle = (progress: number, shift = 0) => {\n    return -180 + ((progress - shift) / 50) * 180;\n  };\n\n  const progress = ((value - min) / (max - min)) * 100;\n\n  if (progress <= 50) {\n    const rotationAngle = getRotationAngle(progress);\n    subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    subOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(progress, 50);\n    subOverlayRightStyle.transform = \"rotate(0deg)\";\n    subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={Math.round(value)}\n      {...rest}\n    >\n      <div className={withBaseName(\"track\")} />\n      <div className={withBaseName(\"bars\")}>\n        <div className={withBaseName(\"barOverlayRight\")}>\n          <div\n            className={withBaseName(\"barSubOverlayRight\")}\n            style={subOverlayRightStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n        <div className={withBaseName(\"barOverlayLeft\")}>\n          <div\n            className={withBaseName(\"barSubOverlayLeft\")}\n            style={subOverlayLeftStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n      </div>\n      {!hideLabel && (\n        <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n          {`${Math.round(progress)} %`}\n        </Text>\n      )}\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CircularProgress","useWindow","useComponentCssInjection","circularProgressCSS","progress","jsxs","clsx","jsx","Text"],"mappings":"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"}

package/dist-cjs/progress/LinearProgress/LinearProgress.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: flex;\n  min-width: 400px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  height: var(--salt-size-bar-small);\n  position: absolute;\n  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressLabel {\n  color: inherit;\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LinearProgress.css.js.map

package/dist-cjs/progress/LinearProgress/LinearProgress.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearProgress.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}