@salt-ds/core 1.50.0 → 1.51.0
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.
- package/CHANGELOG.md +15 -0
- package/css/salt-core.css +8 -4
- package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
- package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +1 -1
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
- package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js +1 -1
- package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
- package/dist-es/form-field/FormFieldLabel.css.js +1 -1
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +2 -2
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
- package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @salt-ds/core
|
|
2
2
|
|
|
3
|
+
## 1.51.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- fef411f: Replaced `SuccessTickIcon` usage with `SuccessCircleSolidIcon`.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- 61c2bad: - Fixed VerticalNavigation's indicator not growing when the item grows in height.
|
|
12
|
+
- Fixed the alignment of VerticalNavigation's expansion indicator.
|
|
13
|
+
- Updated dependencies [d6dc07b]
|
|
14
|
+
- Updated dependencies [d6dc07b]
|
|
15
|
+
- Updated dependencies [d6dc07b]
|
|
16
|
+
- @salt-ds/icons@1.15.0
|
|
17
|
+
|
|
3
18
|
## 1.50.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
package/css/salt-core.css
CHANGED
|
@@ -1689,7 +1689,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1689
1689
|
width: 100%;
|
|
1690
1690
|
}
|
|
1691
1691
|
.saltFormFieldHelperText .saltText {
|
|
1692
|
-
font-style: var(--saltFormField-helperText-fontStyle, var(--salt-
|
|
1692
|
+
font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic));
|
|
1693
1693
|
}
|
|
1694
1694
|
.saltFormFieldHelperText-withValidation {
|
|
1695
1695
|
column-gap: var(--salt-spacing-75);
|
|
@@ -1715,7 +1715,7 @@ a:focus .saltCard-interactable.saltCard-disabled {
|
|
|
1715
1715
|
}
|
|
1716
1716
|
.saltFormFieldLabel-necessityLabel {
|
|
1717
1717
|
font-weight: var(--salt-text-fontWeight);
|
|
1718
|
-
font-style: var(--salt-
|
|
1718
|
+
font-style: var(--salt-typography-textDecoration-italic);
|
|
1719
1719
|
}
|
|
1720
1720
|
.saltFormFieldLabel-sentence.saltText {
|
|
1721
1721
|
color: var(--salt-content-primary-foreground);
|
|
@@ -4836,7 +4836,8 @@ label.saltText small,
|
|
|
4836
4836
|
left: var(--salt-spacing-50);
|
|
4837
4837
|
content: "";
|
|
4838
4838
|
position: absolute;
|
|
4839
|
-
|
|
4839
|
+
top: var(--salt-spacing-50);
|
|
4840
|
+
bottom: var(--salt-spacing-50);
|
|
4840
4841
|
border-radius: var(--salt-palette-corner-strongest);
|
|
4841
4842
|
width: var(--salt-size-indicator);
|
|
4842
4843
|
}
|
|
@@ -4877,6 +4878,9 @@ label.saltText small,
|
|
|
4877
4878
|
.saltVerticalNavigationItemLabel {
|
|
4878
4879
|
flex: 1;
|
|
4879
4880
|
}
|
|
4881
|
+
.saltVerticalNavigationItemLabel + .saltVerticalNavigationItemExpansionIcon {
|
|
4882
|
+
padding: 0 var(--salt-spacing-100);
|
|
4883
|
+
}
|
|
4880
4884
|
|
|
4881
4885
|
/* src/vertical-navigation/VerticalNavigationItemTrigger.css */
|
|
4882
4886
|
.saltVerticalNavigationItemTrigger {
|
|
@@ -5463,4 +5467,4 @@ label.saltText small,
|
|
|
5463
5467
|
color: var(--salt-status-error-foreground-informative);
|
|
5464
5468
|
}
|
|
5465
5469
|
|
|
5466
|
-
/* src/
|
|
5470
|
+
/* src/6df45073-85b8-4252-885c-59f909fae448.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-
|
|
3
|
+
var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FormFieldHelperText.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-
|
|
3
|
+
var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=FormFieldLabel.css.js.map
|
|
@@ -15,7 +15,7 @@ const defaultIconMap = {
|
|
|
15
15
|
DecreaseIcon: icons.TriangleDownIcon,
|
|
16
16
|
UploadIcon: icons.UploadIcon,
|
|
17
17
|
ErrorIcon: icons.ErrorSolidIcon,
|
|
18
|
-
SuccessIcon: icons.
|
|
18
|
+
SuccessIcon: icons.SuccessCircleSolidIcon,
|
|
19
19
|
InfoIcon: icons.InfoSolidIcon,
|
|
20
20
|
WarningIcon: icons.WarningSolidIcon,
|
|
21
21
|
OverflowIcon: icons.OverflowMenuIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n
|
|
1
|
+
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":["ChevronDownIcon","ChevronUpIcon","ChevronRightIcon","ChevronLeftIcon","TriangleUpIcon","TriangleDownIcon","UploadIcon","ErrorSolidIcon","SuccessCircleSolidIcon","InfoSolidIcon","WarningSolidIcon","OverflowMenuIcon","UserSolidIcon","CalendarIcon","CloseIcon","TearOutIcon","StepDefaultIcon","StepActiveIcon","LockedIcon","ProgressInprogressIcon","createContext","jsx","useContext"],"mappings":";;;;;;AAmEA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAYA,qBAAA;AAAA,EACZ,YAAA,EAAcC,mBAAA;AAAA,EACd,eAAA,EAAiBC,sBAAA;AAAA,EACjB,iBAAA,EAAmBF,qBAAA;AAAA,EACnB,QAAA,EAAUE,sBAAA;AAAA,EACV,YAAA,EAAcC,qBAAA;AAAA,EACd,YAAA,EAAcC,oBAAA;AAAA,EACd,YAAA,EAAcC,sBAAA;AAAA,cACdC,gBAAA;AAAA,EACA,SAAA,EAAWC,oBAAA;AAAA,EACX,WAAA,EAAaC,4BAAA;AAAA,EACb,QAAA,EAAUC,mBAAA;AAAA,EACV,WAAA,EAAaC,sBAAA;AAAA,EACb,YAAA,EAAcC,sBAAA;AAAA,EACd,QAAA,EAAUC,mBAAA;AAAA,gBACVC,kBAAA;AAAA,aACAC,eAAA;AAAA,EACA,YAAA,EAAcC,iBAAA;AAAA,EACd,WAAA,EAAaC,qBAAA;AAAA,EACb,UAAA,EAAYC,oBAAA;AAAA,EACZ,aAAA,EAAeT,4BAAA;AAAA,cACfU,gBAAA;AAAA,EACA,cAAA,EAAgBC;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsBC,oBAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACEC,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n
|
|
3
|
+
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-50);\n bottom: var(--salt-spacing-50);\n border-radius: var(--salt-palette-corner-strongest);\n width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=VerticalNavigationItemContent.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltVerticalNavigationItemLabel {\n flex: 1;\n}\n";
|
|
3
|
+
var css_248z = ".saltVerticalNavigationItemLabel {\n flex: 1;\n}\n\n.saltVerticalNavigationItemLabel + .saltVerticalNavigationItemExpansionIcon {\n padding: 0 var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=VerticalNavigationItemLabel.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-
|
|
1
|
+
var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=FormFieldHelperText.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-
|
|
1
|
+
var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=FormFieldLabel.css.js.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon,
|
|
2
|
+
import { ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
|
|
3
3
|
import { createContext, useContext } from 'react';
|
|
4
4
|
|
|
5
5
|
const defaultIconMap = {
|
|
@@ -13,7 +13,7 @@ const defaultIconMap = {
|
|
|
13
13
|
DecreaseIcon: TriangleDownIcon,
|
|
14
14
|
UploadIcon,
|
|
15
15
|
ErrorIcon: ErrorSolidIcon,
|
|
16
|
-
SuccessIcon:
|
|
16
|
+
SuccessIcon: SuccessCircleSolidIcon,
|
|
17
17
|
InfoIcon: InfoSolidIcon,
|
|
18
18
|
WarningIcon: WarningSolidIcon,
|
|
19
19
|
OverflowIcon: OverflowMenuIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n
|
|
1
|
+
{"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;AAmEA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,aAAA;AAAA,EACd,eAAA,EAAiB,gBAAA;AAAA,EACjB,iBAAA,EAAmB,eAAA;AAAA,EACnB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,eAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,EAAW,cAAA;AAAA,EACX,WAAA,EAAa,sBAAA;AAAA,EACb,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,YAAA,EAAc,gBAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,WAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY,cAAA;AAAA,EACZ,aAAA,EAAe,sBAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAA,EAAgB;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n
|
|
1
|
+
var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-50);\n bottom: var(--salt-spacing-50);\n border-radius: var(--salt-palette-corner-strongest);\n width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=VerticalNavigationItemContent.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltVerticalNavigationItemLabel {\n flex: 1;\n}\n";
|
|
1
|
+
var css_248z = ".saltVerticalNavigationItemLabel {\n flex: 1;\n}\n\n.saltVerticalNavigationItemLabel + .saltVerticalNavigationItemExpansionIcon {\n padding: 0 var(--salt-spacing-100);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=VerticalNavigationItemLabel.css.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/core",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.51.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@floating-ui/react": "^0.26.28",
|
|
17
|
-
"@salt-ds/icons": "^1.
|
|
17
|
+
"@salt-ds/icons": "^1.15.0",
|
|
18
18
|
"@salt-ds/styles": "0.2.1",
|
|
19
19
|
"@salt-ds/window": "0.1.1",
|
|
20
20
|
"clsx": "^2.0.0",
|