npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.100 → 1.0.0-alpha.102 - Mend

@salt-ds/lab 1.0.0-alpha.100 → 1.0.0-alpha.102

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,39 @@
 # @salt-ds/lab
+## 1.0.0-alpha.102
+### Minor Changes
+- b573303: Removed `BreadcrumbsNext`, `BreadcrumbNext`, `BreadcrumbNextTrigger`, and `BreadcrumbNextLabel` from lab and promoted to core. As part of the promotion the components were renamed e.g., `BreadcrumbsNext` is now `Breadcrumbs`.
+  Removed the legacy `Breadcrumbs` and `Breadcrumb` exports from lab.
+### Patch Changes
+- Updated dependencies [fc59869]
+- Updated dependencies [e3c0230]
+- Updated dependencies [e25daab]
+- Updated dependencies [b573303]
+- Updated dependencies [e25daab]
+- Updated dependencies [df76f3e]
+- Updated dependencies [9c4e307]
+  - @salt-ds/core@1.69.0
+## 1.0.0-alpha.101
+### Patch Changes
+- 8aaa8d0: Fixed read-only inputs so empty controlled values, empty default values, and empty selections consistently display the `emptyReadOnlyMarker` (`—` by default), while non-empty values such as numeric `0` continue to display the real value.
+- Updated dependencies [8aaa8d0]
+- Updated dependencies [fc112cb]
+- Updated dependencies [8aaa8d0]
+- Updated dependencies [7a828e4]
+- Updated dependencies [87a8a85]
+- Updated dependencies [8156149]
+  - @salt-ds/core@1.68.0
+  - @salt-ds/styles@0.4.0
+  - @salt-ds/icons@1.18.2
 ## 1.0.0-alpha.100
 ### Patch Changes

package/css/salt-lab.css CHANGED Viewed

@@ -92,237 +92,6 @@
   flex-shrink: 0;
 }
-/* src/breadcrumbs/Breadcrumb.css */
-.saltBreadcrumb {
-  --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground));
-  --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover));
-  --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active));
-  --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color));
-  --breadcrumbs-crumb-marginLeft: 0px;
-}
-.saltBreadcrumb {
-  padding: 0px;
-}
-.saltBreadcrumb-regular {
-  display: flex;
-  gap: calc(var(--salt-size-unit) / 2);
-  align-items: center;
-  color: var(--breadcrumbs-crumb-color);
-}
-.saltBreadcrumb-regular:visited {
-  color: currentColor;
-}
-.saltBreadcrumb-regular:visited .saltBreadcrumb-icon {
-  color: currentColor;
-}
-.saltBreadcrumb-regular:hover {
-  color: var(--breadcrumbs-crumb-color-hover);
-}
-.saltBreadcrumb-regular:hover .saltBreadcrumb-icon {
-  color: var(--breadcrumbs-crumb-color-hover);
-}
-.saltBreadcrumb-regular:active {
-  color: var(--breadcrumbs-crumb-color-active);
-}
-.saltBreadcrumb-regular:active .saltBreadcrumb-icon {
-  color: var(--breadcrumbs-crumb-color-active);
-}
-.saltBreadcrumb-currentLevel {
-  color: var(--breadcrumbs-crumb-color);
-}
-.saltBreadcrumb-icon {
-  color: var(--breadcrumbs-crumb-icon-color);
-  margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft));
-}
-.saltBreadcrumb-justifyContentCenter {
-  justify-content: center;
-}
-.saltBreadcrumb-text {
-  text-decoration: underline;
-}
-/* src/breadcrumbs/Breadcrumbs.css */
-.saltBreadcrumbs-ol {
-  --breadcrumbs-ol-gap: var(--salt-size-unit);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0;
-  margin: 0;
-  gap: var(--breadcrumbs-ol-gap);
-}
-.saltBreadcrumbs-li {
-  --breadcrumbs-li-marginRight: 0px;
-  --breadcrumbs-li-padding: 0px;
-  flex: 0 1 auto;
-  list-style: none;
-  margin-right: var(--breadcrumbs-li-marginRight);
-  padding: var(--breadcrumbs-li-padding);
-}
-.saltBreadcrumbs-separator {
-  --breadcrumbs-separator-marginRight: 0px;
-  display: flex;
-  margin-right: var(--breadcrumbs-separator-marginRight);
-  user-select: none;
-}
-.saltBreadcrumbs-ol-wrap {
-  flex-wrap: wrap;
-}
-.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li,
-.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator {
-  --breadcrumbs-ol-wrap-li-marginBottom: 0px;
-  margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);
-}
-/* src/breadcrumbs-next/BreadcrumbNext.css */
-.saltBreadcrumbNext {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 1 auto;
-  gap: var(--salt-spacing-100);
-  list-style: none;
-  min-width: 0;
-}
-.saltBreadcrumbNext-current,
-.saltBreadcrumbNext-label,
-.saltBreadcrumbNext-link,
-.saltBreadcrumbNext-trigger {
-  min-width: 0;
-}
-.saltBreadcrumbNext-trigger {
-  align-items: center;
-  color: var(--salt-content-primary-foreground);
-  display: inline-flex;
-  font-family: var(--salt-text-label-fontFamily);
-  font-size: var(--salt-text-label-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  gap: var(--salt-spacing-50);
-  letter-spacing: var(--salt-text-letterSpacing);
-  line-height: var(--salt-text-label-lineHeight);
-  max-width: 100%;
-  text-decoration: var(--salt-typography-textDecoration-none);
-}
-.saltBreadcrumbNext-link:not(.saltBreadcrumbNext-current) {
-  text-decoration: var(--salt-typography-textDecoration-underline);
-}
-.saltBreadcrumbNext-link:not(.saltBreadcrumbNext-current):hover {
-  text-decoration: var(--salt-typography-textDecoration-none);
-}
-.saltBreadcrumbNext-link:not(.saltBreadcrumbNext-current):active {
-  text-decoration: var(--salt-typography-textDecoration-underline);
-}
-.saltBreadcrumbNext-trigger:focus {
-  outline: var(--salt-focused-outline);
-  text-decoration: var(--salt-typography-textDecoration-none);
-}
-.saltBreadcrumbNext-current {
-  cursor: var(--salt-cursor-text);
-}
-.saltBreadcrumbNext-separator {
-  --saltIcon-color: var(--salt-content-secondary-foreground);
-  --saltIcon-size: var(--salt-size-icon);
-  flex: 0 0 auto;
-}
-/* src/breadcrumbs-next/BreadcrumbsNext.css */
-.saltBreadcrumbsNext {
-  display: block;
-  margin-block: var(--salt-spacing-25);
-}
-.saltBreadcrumbsNext-ol {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: var(--salt-spacing-100);
-  justify-content: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.saltBreadcrumbsNext-ol-wrap {
-  flex-wrap: wrap;
-}
-.saltBreadcrumbsNext-collapseItem {
-  align-items: center;
-  display: inline-flex;
-  flex: 0 1 auto;
-  gap: var(--salt-spacing-100);
-  list-style: none;
-  min-width: 0;
-}
-.saltBreadcrumbsNext-collapseButton[aria-expanded=true] {
-  --saltButton-background: var(--salt-actionable-subtle-background-active);
-  --saltButton-background-hover: var(--salt-actionable-subtle-background-active);
-  --saltButton-text-color: var(--salt-actionable-subtle-foreground-active);
-  --saltButton-text-color-hover: var(--salt-actionable-subtle-foreground-active);
-  --saltButton-borderColor: var(--salt-actionable-subtle-borderColor-active);
-  --saltButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-active);
-  cursor: var(--salt-cursor-active);
-}
-.saltBreadcrumbsNext-disclosure {
-  background: var(--salt-container-primary-background);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
-  overflow: hidden;
-  overflow-y: auto;
-  min-width: 10em;
-  position: relative;
-  z-index: var(--salt-zIndex-flyover);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  box-sizing: border-box;
-  border-radius: var(--salt-palette-corner, 0);
-}
-.saltBreadcrumbsNext-disclosureList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.saltBreadcrumbsNext-disclosureListItem {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.saltBreadcrumbsNext-disclosureItem {
-  color: var(--salt-content-primary-foreground);
-  background: var(--salt-selectable-background);
-  font-size: var(--salt-text-fontSize);
-  font-weight: var(--salt-text-fontWeight);
-  font-family: var(--salt-text-fontFamily);
-  line-height: var(--salt-text-lineHeight);
-  letter-spacing: var(--salt-text-letterSpacing);
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
-  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
-  display: flex;
-  gap: var(--salt-spacing-100);
-  position: relative;
-  cursor: var(--salt-cursor-hover);
-  box-sizing: border-box;
-  flex-shrink: 0;
-  text-decoration: none;
-  width: 100%;
-}
-.saltBreadcrumbsNext-disclosureItem:focus-visible {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(var(--salt-size-fixed-100) * -2);
-}
-.saltBreadcrumbsNext-disclosureItem:hover {
-  outline: none;
-}
-.saltBreadcrumbsNext-disclosureItem:hover,
-.saltBreadcrumbsNext-disclosureItem:focus-visible {
-  background: var(--salt-selectable-background-hover);
-}
-.saltBreadcrumbsNext-disclosureItem:active {
-  background: var(--salt-selectable-background-selected);
-  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
-}
-.saltBreadcrumbsNext-disclosureItem[aria-disabled=true],
-.saltBreadcrumbsNext-disclosureItem[aria-disabled=true]:active {
-  background: var(--salt-selectable-background-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
-  cursor: var(--salt-cursor-disabled);
-  box-shadow: none;
-}
 /* src/button-bar/ButtonBar.css */
 .saltButtonBar {
   width: 100%;
@@ -624,7 +393,7 @@
   cursor: var(--salt-cursor-hover);
 }
 .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
 }
 .salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch,
 .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
@@ -640,10 +409,10 @@
   height: calc(var(--colorChooser-swatch-size-unit) - 2);
 }
 .salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch {
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
 }
 .saltColorChooserSwatch-active {
-  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;
   margin-bottom: 1px;
   margin-left: 1px;
@@ -1693,7 +1462,7 @@
   --list-item-gap: 0px;
   --list-maxHeight: 100%;
   background: var(--list-background);
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
   border-style: var(--list-borderStyle);
   border-width: var(--list-borderWidth);
   height: var(--saltList-height, var(--list-height));
@@ -1842,7 +1611,7 @@
 /* src/list-deprecated/List.css */
 .saltListDeprecated-wrapper {
   --list-background: var(--salt-container-primary-background);
-  --list-borderColor: var(--salt-container-primary-borderColor);
+  --list-borderColor: var(--salt-container-bold-borderColor);
   --list-borderStyle: var(--salt-borderStyle-solid);
   --list-borderWidth: var(--salt-size-fixed-100);
   --list-borderRadius: 0;
@@ -2001,7 +1770,7 @@
 .saltListNext {
   margin: 0;
   background: var(--salt-container-primary-background);
-  border-color: var(--salt-container-primary-borderColor);
+  border-color: var(--salt-container-bold-borderColor);
   border-style: var(--salt-borderStyle-solid);
   border-width: var(--salt-size-fixed-100);
   height: 100%;
@@ -2224,7 +1993,7 @@
   fill: var(--list-item-text-color-active);
 }
 .saltQueryInputValueList {
-  border: solid 1px var(--salt-container-primary-borderColor);
+  border: solid 1px var(--salt-container-bold-borderColor);
 }
 .saltQueryInputValueList-back {
   display: flex;
@@ -2485,7 +2254,7 @@
 /* src/tabs/TabActivationIndicator.css */
 .saltTabActivationIndicator {
-  background: var(--saltTabs-activationIndicator-background, var(--salt-container-primary-borderColor));
+  background: var(--saltTabs-activationIndicator-background, var(--salt-container-bold-borderColor));
   height: var(--saltTabs-activationIndicator-height, auto);
   inset: var(--tabs-activationIndicator-inset);
   position: absolute;
@@ -3239,7 +3008,7 @@
   --saltButton-justifyContent: flex-start;
   align-items: stretch;
   color: var(--salt-content-primary-foreground);
-  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);
   display: flex;
   flex-direction: column;
   padding: calc(var(--salt-size-unit) * 1.5) 0;
@@ -3264,4 +3033,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
-/* src/6f33401a-e8aa-4c64-8a91-c7a84caaf9c4.css */
+/* src/1a50dc21-2a90-4cb7-8467-768f032f57ae.css */

package/dist-cjs/color-chooser/Swatch.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Swatch.css.js.map

package/dist-cjs/index.js CHANGED Viewed

@@ -1,12 +1,6 @@
 'use strict';
 var AppHeader = require('./app-header/AppHeader.js');
-var Breadcrumb = require('./breadcrumbs/Breadcrumb.js');
-var Breadcrumbs = require('./breadcrumbs/Breadcrumbs.js');
-var BreadcrumbNext = require('./breadcrumbs-next/BreadcrumbNext.js');
-var BreadcrumbNextLabel = require('./breadcrumbs-next/BreadcrumbNextLabel.js');
-var BreadcrumbNextTrigger = require('./breadcrumbs-next/BreadcrumbNextTrigger.js');
-var BreadcrumbsNext = require('./breadcrumbs-next/BreadcrumbsNext.js');
 var ButtonBar = require('./button-bar/ButtonBar.js');
 var OrderedButton = require('./button-bar/OrderedButton.js');
 var CascadingMenu = require('./cascading-menu/CascadingMenu.js');
@@ -127,12 +121,6 @@ var WindowContext = require('./window/WindowContext.js');
 exports.AppHeader = AppHeader.AppHeader;
-exports.Breadcrumb = Breadcrumb.Breadcrumb;
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.BreadcrumbNext = BreadcrumbNext.BreadcrumbNext;
-exports.BreadcrumbNextLabel = BreadcrumbNextLabel.BreadcrumbNextLabel;
-exports.BreadcrumbNextTrigger = BreadcrumbNextTrigger.BreadcrumbNextTrigger;
-exports.BreadcrumbsNext = BreadcrumbsNext.BreadcrumbsNext;
 exports.ButtonBar = ButtonBar.ButtonBar;
 exports.DefaultButtonsOrderByVariant = ButtonBar.DefaultButtonsOrderByVariant;
 exports.OrderedButton = OrderedButton.OrderedButton;

package/dist-cjs/index.js.map CHANGED Viewed

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

package/dist-cjs/input-legacy/InputLegacy.js CHANGED Viewed

@@ -25,6 +25,9 @@ function mergeA11yProps(a11yProps, inputProps, misplacedAriaProps) {
     "aria-labelledby": ariaLabelledBy ? Array.from(new Set(ariaLabelledBy.split(" "))).join(" ") : null
   };
 }
+function isEmptyReadOnlyValue(value) {
+  return value == null || value === "";
+}
 const InputLegacy = react.forwardRef(
   function Input({
     "aria-activedescendant": ariaActiveDescendant,
@@ -95,10 +98,12 @@ const InputLegacy = react.forwardRef(
       inputPropsProp,
       misplacedAriaProps
     );
-    const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
-    const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+    const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);
+    const isDefaultValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(defaultValueProp);
+    const controlledValue = valueProp === void 0 ? void 0 : isValueEmptyReadOnly ? emptyReadOnlyMarker : valueProp;
+    const defaultValue = isDefaultValueEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
     const [value, setValue] = core.useControlled({
-      controlled: valueProp,
+      controlled: controlledValue,
       default: defaultValue,
       name: "Input",
       state: "value"

package/dist-cjs/input-legacy/InputLegacy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type AriaAttributes,\n type ChangeEvent,\n type ElementType,\n type FocusEvent,\n type FocusEventHandler,\n forwardRef,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport inputLegacyCss from \"./InputLegacy.css\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nconst withBaseName = makePrefixer(\"saltInputLegacy\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputLegacyProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" \| \"defaultValue\"> {\n /*\n Determines the position of the text cursor on focus of the input.\n \n start = place cursor at the beginning<br>\n * end = place cursor at the end<br>\n * \\# = index to place the cursor<br>\n /\n cursorPositionOnFocus?: \"start\" \| \"end\" \| number;\n /\n The value of the `input` element, required for an uncontrolled component.\n /\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /\n If `true`, the component is disabled.\n /\n disabled?: HTMLInputElement[\"disabled\"];\n /\n The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n /\n emptyReadOnlyMarker?: string;\n /\n Determines what gets highlighted on focus of the input.\n \n If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n /\n highlightOnFocus?: boolean \| number[];\n /\n The HTML element to render the Input, e.g. 'input', a custom React component.\n /\n inputComponent?: ElementType;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event.\n /\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n onMouseUp?: MouseEventHandler<HTMLInputElement>;\n onMouseMove?: MouseEventHandler<HTMLInputElement>;\n onMouseDown?: MouseEventHandler<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n \n * Determines the alignment of the input text.\n /\n textAlign?: \"left\" \| \"right\" \| \"center\";\n type?: HTMLInputElement[\"type\"];\n /\n The value of the `input` element, required for a controlled component.\n /\n value?: HTMLInputElement[\"value\"];\n renderSuffix?: (state: {\n disabled?: boolean;\n error?: boolean;\n focused?: boolean;\n margin?: \"dense\" \| \"none\" \| \"normal\";\n required?: boolean;\n startAdornment?: ReactNode;\n }) => ReactNode;\n endAdornment?: ReactNode;\n startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<ReturnType<typeof useFormFieldLegacyProps>[\"a11yProps\"]>,\n inputProps: InputLegacyProps[\"inputProps\"],\n misplacedAriaProps: AriaAttributes,\n) {\n const ariaLabelledBy = clsx(\n a11yProps?.[\"aria-labelledby\"],\n inputProps?.[\"aria-labelledby\"],\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // The weird filtering is due to TokenizedInputBase\n \"aria-labelledby\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : null,\n };\n}\n\nexport const InputLegacy = forwardRef<HTMLInputElement, InputLegacyProps>(\n function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n cursorPositionOnFocus,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n highlightOnFocus,\n id,\n inputComponent: InputComponent = \"input\",\n inputProps: inputPropsProp,\n role,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n readOnly: readOnlyProp,\n renderSuffix,\n startAdornment,\n textAlign = \"left\",\n type = \"text\",\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-legacy\",\n css: inputLegacyCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n readOnly: a11yReadOnly,\n disabled: a11yDisabled,\n ...restA11y\n } = {},\n setFocused: setFormFieldFocused,\n inFormField,\n } = useFormFieldLegacyProps();\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef(null);\n const handleRef = useForkRef(inputRef, ref);\n const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n cursorPositionOnFocus,\n highlightOnFocus,\n });\n\n const isDisabled = disabled \|\| a11yDisabled;\n const isReadOnly = readOnlyProp \|\| a11yReadOnly;\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps,\n );\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly\n ? emptyReadOnlyMarker\n : defaultValueProp;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFormFieldFocused?.(true);\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFormFieldFocused?.(false);\n setFocused(false);\n };\n\n const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseMove(event);\n\n onMouseMove?.(event);\n };\n\n const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseUp();\n\n onMouseUp?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseDown();\n\n onMouseDown?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n [withBaseName(\"formField\")]: inFormField,\n [withBaseName(\"focused\")]: focused && !inFormField,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"inputAdornedStart\")]: startAdornment,\n [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n },\n classNameProp,\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"prefixContainer\")}>\n {startAdornment}\n </div>\n )}\n <InputComponent\n type={type}\n id={id}\n {...inputProps}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n ref={handleRef}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseMove={handleMouseMove}\n readOnly={isReadOnly}\n />\n {endAdornment && (\n <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n )}\n {/ TODO: Confirm implementation of suffix */}\n {renderSuffix?.({ disabled, focused })}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","clsx","forwardRef","useWindow","useComponentCssInjection","inputLegacyCss","useFormFieldLegacyProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"InputLegacy.js","sources":["../src/input-legacy/InputLegacy.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n type AriaAttributes,\n type ChangeEvent,\n type ElementType,\n type FocusEvent,\n type FocusEventHandler,\n forwardRef,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEvent,\n type MouseEventHandler,\n type ReactNode,\n useRef,\n useState,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport inputLegacyCss from \"./InputLegacy.css\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nconst withBaseName = makePrefixer(\"saltInputLegacy\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputLegacyProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" \| \"defaultValue\"> {\n /*\n Determines the position of the text cursor on focus of the input.\n \n start = place cursor at the beginning<br>\n * end = place cursor at the end<br>\n * \\# = index to place the cursor<br>\n /\n cursorPositionOnFocus?: \"start\" \| \"end\" \| number;\n /\n The value of the `input` element, required for an uncontrolled component.\n /\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /\n If `true`, the component is disabled.\n /\n disabled?: HTMLInputElement[\"disabled\"];\n /\n The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n /\n emptyReadOnlyMarker?: string;\n /\n Determines what gets highlighted on focus of the input.\n \n If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n /\n highlightOnFocus?: boolean \| number[];\n /\n The HTML element to render the Input, e.g. 'input', a custom React component.\n /\n inputComponent?: ElementType;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event.\n /\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n onMouseUp?: MouseEventHandler<HTMLInputElement>;\n onMouseMove?: MouseEventHandler<HTMLInputElement>;\n onMouseDown?: MouseEventHandler<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n \n * Determines the alignment of the input text.\n /\n textAlign?: \"left\" \| \"right\" \| \"center\";\n type?: HTMLInputElement[\"type\"];\n /\n The value of the `input` element, required for a controlled component.\n /\n value?: HTMLInputElement[\"value\"];\n renderSuffix?: (state: {\n disabled?: boolean;\n error?: boolean;\n focused?: boolean;\n margin?: \"dense\" \| \"none\" \| \"normal\";\n required?: boolean;\n startAdornment?: ReactNode;\n }) => ReactNode;\n endAdornment?: ReactNode;\n startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<ReturnType<typeof useFormFieldLegacyProps>[\"a11yProps\"]>,\n inputProps: InputLegacyProps[\"inputProps\"],\n misplacedAriaProps: AriaAttributes,\n) {\n const ariaLabelledBy = clsx(\n a11yProps?.[\"aria-labelledby\"],\n inputProps?.[\"aria-labelledby\"],\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // The weird filtering is due to TokenizedInputBase\n \"aria-labelledby\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : null,\n };\n}\n\nfunction isEmptyReadOnlyValue(\n value: InputLegacyProps[\"value\"] \| InputLegacyProps[\"defaultValue\"],\n) {\n return value == null \|\| value === \"\";\n}\n\nexport const InputLegacy = forwardRef<HTMLInputElement, InputLegacyProps>(\n function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n cursorPositionOnFocus,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n highlightOnFocus,\n id,\n inputComponent: InputComponent = \"input\",\n inputProps: inputPropsProp,\n role,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n readOnly: readOnlyProp,\n renderSuffix,\n startAdornment,\n textAlign = \"left\",\n type = \"text\",\n ...other\n },\n ref,\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-input-legacy\",\n css: inputLegacyCss,\n window: targetWindow,\n });\n\n const {\n a11yProps: {\n readOnly: a11yReadOnly,\n disabled: a11yDisabled,\n ...restA11y\n } = {},\n setFocused: setFormFieldFocused,\n inFormField,\n } = useFormFieldLegacyProps();\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef(null);\n const handleRef = useForkRef(inputRef, ref);\n const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n cursorPositionOnFocus,\n highlightOnFocus,\n });\n\n const isDisabled = disabled \|\| a11yDisabled;\n const isReadOnly = readOnlyProp \|\| a11yReadOnly;\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps,\n );\n const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);\n const isDefaultValueEmptyReadOnly =\n isReadOnly && isEmptyReadOnlyValue(defaultValueProp);\n const controlledValue =\n valueProp === undefined\n ? undefined\n : isValueEmptyReadOnly\n ? emptyReadOnlyMarker\n : valueProp;\n const defaultValue = isDefaultValueEmptyReadOnly\n ? emptyReadOnlyMarker\n : defaultValueProp;\n\n const [value, setValue] = useControlled({\n controlled: controlledValue,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFormFieldFocused?.(true);\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFormFieldFocused?.(false);\n setFocused(false);\n };\n\n const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseMove(event);\n\n onMouseMove?.(event);\n };\n\n const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseUp();\n\n onMouseUp?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseDown();\n\n onMouseDown?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n [withBaseName(\"formField\")]: inFormField,\n [withBaseName(\"focused\")]: focused && !inFormField,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"inputAdornedStart\")]: startAdornment,\n [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n },\n classNameProp,\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"prefixContainer\")}>\n {startAdornment}\n </div>\n )}\n <InputComponent\n type={type}\n id={id}\n {...inputProps}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n ref={handleRef}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseMove={handleMouseMove}\n readOnly={isReadOnly}\n />\n {endAdornment && (\n <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n )}\n {/ TODO: Confirm implementation of suffix */}\n {renderSuffix?.({ disabled, focused })}\n </div>\n );\n },\n);\n"],"names":["makePrefixer","clsx","forwardRef","useWindow","useComponentCssInjection","inputLegacyCss","useFormFieldLegacyProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}

package/dist-cjs/list/List.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\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  box-sizing: border-box;\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
+var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-bold-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\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  box-sizing: border-box;\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=List.css.js.map

package/dist-cjs/list-deprecated/List.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n  /* Color */\n  --list-background: var(--salt-container-primary-background);\n  /* Border */\n  --list-borderColor: var(--salt-container-primary-borderColor);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-borderRadius: 0;\n\n  /* Text, Font */\n  /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n  /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n  /* Misc. */\n  --list-boxShadow: none;\n  --list-disabled-cursor: var(--salt-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n  position: relative;\n}\n\n.saltListDeprecated {\n  /* font-family: var(--list-fontFamily); */\n  overflow-y: auto;\n}\n.saltListDeprecated:focus {\n  outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n  border-color: var(--list-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n  background: var(--list-background);\n  box-shadow: var(--list-boxShadow);\n  position: relative;\n}\n\n.saltListDeprecated-borderless {\n  border: none;\n}\n.saltListDeprecated-disabled {\n  cursor: var(--list-disabled-cursor);\n  /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n  /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
+var css_248z = "/* TODO: Should the outer most container being 'wrapper'? */\n.saltListDeprecated-wrapper {\n  /* Color */\n  --list-background: var(--salt-container-primary-background);\n  /* Border */\n  --list-borderColor: var(--salt-container-bold-borderColor);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-borderRadius: 0;\n\n  /* Text, Font */\n  /* TODO: Do we necessary want to set this? Should rely on inheritance? */\n  /* --list-fontFamily: var(--salt-typography-fontFamily); */\n\n  /* Misc. */\n  --list-boxShadow: none;\n  --list-disabled-cursor: var(--salt-cursor-disabled);\n}\n\n.saltListDeprecated-wrapper {\n  position: relative;\n}\n\n.saltListDeprecated {\n  /* font-family: var(--list-fontFamily); */\n  overflow-y: auto;\n}\n.saltListDeprecated:focus {\n  outline: none;\n}\n\n.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) {\n  border-color: var(--list-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  border-radius: var(--list-borderRadius);\n}\n.saltListDeprecated-wrapper {\n  background: var(--list-background);\n  box-shadow: var(--list-boxShadow);\n  position: relative;\n}\n\n.saltListDeprecated-borderless {\n  border: none;\n}\n.saltListDeprecated-disabled {\n  cursor: var(--list-disabled-cursor);\n  /* TODO: Design: Check whether we want things behind the list to actually show through opacity */\n  /* Or instead of using `opacity` in favor of dedicated color setting, on background, border-color, etc. */\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=List.css.js.map

package/dist-cjs/list-next/ListNext.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/* Style applied to the root element */\n.saltListNext {\n  margin: 0;\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--salt-borderStyle-solid);\n  border-width: var(--salt-size-fixed-100);\n  height: 100%;\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  padding-inline-start: 0;\n  box-sizing: content-box;\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";
+var css_248z = "/* Style applied to the root element */\n.saltListNext {\n  margin: 0;\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-bold-borderColor);\n  border-style: var(--salt-borderStyle-solid);\n  border-width: var(--salt-size-fixed-100);\n  height: 100%;\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  padding-inline-start: 0;\n  box-sizing: content-box;\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";
 module.exports = css_248z;
 //# sourceMappingURL=ListNext.css.js.map

package/dist-cjs/query-input/QueryInput.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltQueryInputBody {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.saltQueryInputBody > .saltIcon {\n  padding: var(--salt-size-unit);\n  align-self: start;\n}\n\n.saltQueryInputBody-separator {\n  width: 1px;\n  background: var(--salt-separable-secondary-borderColor);\n  margin: 0 var(--salt-size-unit);\n  align-self: stretch;\n}\n\n.saltQueryInputBody-buttonGroup {\n  flex-shrink: 0;\n  align-self: start;\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltQueryInputBody-input {\n  flex-grow: 1;\n}\n\n.saltQueryInputValueSelector-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltCategoryList-categoryWidthMeasure {\n  position: fixed;\n  left: -1000px;\n  top: 0;\n  border: solid 1px black;\n}\n\n.saltCategoryList-category {\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltCategoryListItem-text {\n  flex-shrink: 0;\n  margin-right: calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltCategoryListItem-valuesContainer {\n  font-style: italic;\n  color: var(--salt-content-secondary-foreground);\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n\n.saltCategoryListItem-values {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltCategoryListItem-chevron {\n  flex-shrink: 0;\n  margin-left: var(--salt-size-unit);\n}\n\n.saltListItem-selected .saltIcon {\n  fill: var(--list-item-text-color-active);\n}\n\n.saltQueryInputValueList {\n  border: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.saltQueryInputValueList-back {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltQueryInputValueList-back .saltIcon {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltQueryInputValueList-category {\n  font-size: var(--salt-text-fontSize);\n  flex-grow: 1;\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-container-primary-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-size-unit);\n  position: sticky;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = ".saltQueryInputBody {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.saltQueryInputBody > .saltIcon {\n  padding: var(--salt-size-unit);\n  align-self: start;\n}\n\n.saltQueryInputBody-separator {\n  width: 1px;\n  background: var(--salt-separable-secondary-borderColor);\n  margin: 0 var(--salt-size-unit);\n  align-self: stretch;\n}\n\n.saltQueryInputBody-buttonGroup {\n  flex-shrink: 0;\n  align-self: start;\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltQueryInputBody-input {\n  flex-grow: 1;\n}\n\n.saltQueryInputValueSelector-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltCategoryList-categoryWidthMeasure {\n  position: fixed;\n  left: -1000px;\n  top: 0;\n  border: solid 1px black;\n}\n\n.saltCategoryList-category {\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltCategoryListItem-text {\n  flex-shrink: 0;\n  margin-right: calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltCategoryListItem-valuesContainer {\n  font-style: italic;\n  color: var(--salt-content-secondary-foreground);\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n\n.saltCategoryListItem-values {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltCategoryListItem-chevron {\n  flex-shrink: 0;\n  margin-left: var(--salt-size-unit);\n}\n\n.saltListItem-selected .saltIcon {\n  fill: var(--list-item-text-color-active);\n}\n\n.saltQueryInputValueList {\n  border: solid 1px var(--salt-container-bold-borderColor);\n}\n\n.saltQueryInputValueList-back {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltQueryInputValueList-back .saltIcon {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltQueryInputValueList-category {\n  font-size: var(--salt-text-fontSize);\n  flex-grow: 1;\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-container-primary-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-size-unit);\n  position: sticky;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=QueryInput.css.js.map

package/dist-cjs/tabs/TabActivationIndicator.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltTabActivationIndicator {\n  background: var(--saltTabs-activationIndicator-background, var(--salt-container-primary-borderColor));\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-accent-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
+var css_248z = ".saltTabActivationIndicator {\n  background: var(--saltTabs-activationIndicator-background, var(--salt-container-bold-borderColor));\n  height: var(--saltTabs-activationIndicator-height, auto);\n  inset: var(--tabs-activationIndicator-inset);\n  position: absolute;\n  width: var(--tabs-activationIndicator-width, auto);\n}\n\n/* the Active Tab indicator, uses navigable styles */\n.saltTabActivationIndicator-thumb {\n  inset: var(--saltTabs-activationIndicator-thumb-inset);\n  position: absolute;\n  height: var(--tabs-activationIndicator-thumb-height, auto);\n  background: var(--salt-navigable-accent-indicator-active);\n  transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease));\n  width: var(--tabs-activationIndicator-thumb-width, auto);\n  z-index: 1;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=TabActivationIndicator.css.js.map

package/dist-cjs/toolbar/overflow-panel/OverflowPanel.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltOverflowPanel.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  align-items: stretch;\n  color: var(--salt-content-primary-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdownBase-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
+var css_248z = ".saltOverflowPanel.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  align-items: stretch;\n  color: var(--salt-content-primary-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdownBase-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=OverflowPanel.css.js.map

package/dist-es/color-chooser/Swatch.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-hover);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-bold-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-borderStyle-solid) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: var(--salt-cursor-active);\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-sentiment-negative-foreground-decorative) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important;\n}\n";
 export { css_248z as default };
 //# sourceMappingURL=Swatch.css.js.map

package/dist-es/index.js CHANGED Viewed

@@ -1,10 +1,4 @@
 export { AppHeader } from './app-header/AppHeader.js';
-export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
-export { Breadcrumbs } from './breadcrumbs/Breadcrumbs.js';
-export { BreadcrumbNext } from './breadcrumbs-next/BreadcrumbNext.js';
-export { BreadcrumbNextLabel } from './breadcrumbs-next/BreadcrumbNextLabel.js';
-export { BreadcrumbNextTrigger } from './breadcrumbs-next/BreadcrumbNextTrigger.js';
-export { BreadcrumbsNext } from './breadcrumbs-next/BreadcrumbsNext.js';
 export { ButtonBar, DefaultButtonsOrderByVariant } from './button-bar/ButtonBar.js';
 export { OrderedButton } from './button-bar/OrderedButton.js';
 export { CascadingMenu } from './cascading-menu/CascadingMenu.js';

package/dist-es/index.js.map CHANGED Viewed

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