@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.3
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/dist-cjs/packages/lab/src/banner/Banner.css.js +1 -1
- package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/packages/lab/src/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/ColorChooser.css.js +1 -1
- package/dist-cjs/packages/lab/src/color-chooser/Swatch.css.js +1 -1
- package/dist-cjs/packages/lab/src/contact-details/ContactAvatar.js +2 -3
- package/dist-cjs/packages/lab/src/contact-details/ContactAvatar.js.map +1 -1
- package/dist-cjs/packages/lab/src/content-status/ContentStatus.css.js +1 -1
- package/dist-cjs/packages/lab/src/dialog/DialogContent.js +0 -1
- package/dist-cjs/packages/lab/src/dialog/DialogContent.js.map +1 -1
- package/dist-cjs/packages/lab/src/dropdown/DropdownButton.css.js +1 -1
- package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/packages/lab/src/index.js +0 -2
- package/dist-cjs/packages/lab/src/index.js.map +1 -1
- package/dist-cjs/packages/lab/src/list/Highlighter.css.js +1 -1
- package/dist-cjs/packages/lab/src/list/ListItem.css.js +1 -1
- package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js +1 -5
- package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js.map +1 -1
- package/dist-cjs/packages/lab/src/logo/Logo.css.js +1 -1
- package/dist-cjs/packages/lab/src/metric/MetricContent.css.js +1 -1
- package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js +9 -5
- package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js.map +1 -1
- package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js +1 -1
- package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-cjs/packages/lab/src/pill/Pill.css.js +1 -1
- package/dist-cjs/packages/lab/src/skip-link/SkipLink.css.js +1 -1
- package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js +1 -0
- package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js.map +1 -1
- package/dist-cjs/packages/lab/src/tabs/Tabstrip.css.js +1 -1
- package/dist-cjs/packages/lab/src/toolbar/Tooltray.css.js +1 -1
- package/dist-es/packages/lab/src/banner/Banner.css.js +1 -1
- package/dist-es/packages/lab/src/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/packages/lab/src/cascading-menu/CascadingMenuItem.css.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/ColorChooser.css.js +1 -1
- package/dist-es/packages/lab/src/color-chooser/Swatch.css.js +1 -1
- package/dist-es/packages/lab/src/contact-details/ContactAvatar.js +2 -3
- package/dist-es/packages/lab/src/contact-details/ContactAvatar.js.map +1 -1
- package/dist-es/packages/lab/src/content-status/ContentStatus.css.js +1 -1
- package/dist-es/packages/lab/src/dialog/DialogContent.js +0 -1
- package/dist-es/packages/lab/src/dialog/DialogContent.js.map +1 -1
- package/dist-es/packages/lab/src/dropdown/DropdownButton.css.js +1 -1
- package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/packages/lab/src/index.js +0 -1
- package/dist-es/packages/lab/src/index.js.map +1 -1
- package/dist-es/packages/lab/src/list/Highlighter.css.js +1 -1
- package/dist-es/packages/lab/src/list/ListItem.css.js +1 -1
- package/dist-es/packages/lab/src/list-deprecated/internal/scrollIntoView.js +2 -2
- package/dist-es/packages/lab/src/list-deprecated/internal/scrollIntoView.js.map +1 -1
- package/dist-es/packages/lab/src/logo/Logo.css.js +1 -1
- package/dist-es/packages/lab/src/metric/MetricContent.css.js +1 -1
- package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.js +9 -5
- package/dist-es/packages/lab/src/parent-child-item/ParentChildItem.js.map +1 -1
- package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js +1 -1
- package/dist-es/packages/lab/src/parent-child-layout/ParentChildLayout.js.map +1 -1
- package/dist-es/packages/lab/src/pill/Pill.css.js +1 -1
- package/dist-es/packages/lab/src/skip-link/SkipLink.css.js +1 -1
- package/dist-es/packages/lab/src/stepper-input/useStepperInput.js +1 -0
- package/dist-es/packages/lab/src/stepper-input/useStepperInput.js.map +1 -1
- package/dist-es/packages/lab/src/tabs/Tabstrip.css.js +1 -1
- package/dist-es/packages/lab/src/toolbar/Tooltray.css.js +1 -1
- package/dist-types/contact-details/ContactAvatar.d.ts +3 -4
- package/dist-types/index.d.ts +0 -1
- package/dist-types/stepper-input/useStepperInput.d.ts +1 -0
- package/package.json +4 -4
- package/dist-cjs/packages/lab/src/avatar/Avatar.css.js +0 -9
- package/dist-cjs/packages/lab/src/avatar/Avatar.css.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/Avatar.js +0 -62
- package/dist-cjs/packages/lab/src/avatar/Avatar.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/internal/DefaultAvatar.js +0 -45
- package/dist-cjs/packages/lab/src/avatar/internal/DefaultAvatar.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/internal/constants.js +0 -8
- package/dist-cjs/packages/lab/src/avatar/internal/constants.js.map +0 -1
- package/dist-cjs/packages/lab/src/avatar/internal/useLoaded.js +0 -47
- package/dist-cjs/packages/lab/src/avatar/internal/useLoaded.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/Avatar.css.js +0 -7
- package/dist-es/packages/lab/src/avatar/Avatar.css.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/Avatar.js +0 -58
- package/dist-es/packages/lab/src/avatar/Avatar.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/internal/DefaultAvatar.js +0 -41
- package/dist-es/packages/lab/src/avatar/internal/DefaultAvatar.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/internal/constants.js +0 -4
- package/dist-es/packages/lab/src/avatar/internal/constants.js.map +0 -1
- package/dist-es/packages/lab/src/avatar/internal/useLoaded.js +0 -43
- package/dist-es/packages/lab/src/avatar/internal/useLoaded.js.map +0 -1
- package/dist-types/avatar/Avatar.d.ts +0 -13
- package/dist-types/avatar/index.d.ts +0 -1
- package/dist-types/avatar/internal/DefaultAvatar.d.ts +0 -2
- package/dist-types/avatar/internal/constants.d.ts +0 -1
- package/dist-types/avatar/internal/useLoaded.d.ts +0 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: none;\n --tabs-tabstrip-display: inline-flex;\n --tabs-tabstrip-background: transparent;\n\n align-items: flex-start;\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n position: relative;\n overflow: hidden;\n display: flex;\n min-width: 28px;\n width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n --tabs-activationIndicator-borderStyle: none none solid none;\n --tabs-activationIndicator-height: 1px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n --tabs-activationIndicator-transitionProperty: left;\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n --tabs-activationIndicator-transition: top 0.3s ease;\n --tabs-activationIndicator-borderStyle: none solid none none;\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-transitionProperty: top;\n --tabs-activationIndicator-width: 1px;\n --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n --tabs-activationIndicator-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n --tabs-tabstrip-display: flex;\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n order: 99;\n visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-
|
|
5
|
+
var css_248z = "/* Component class applied to the root element */\n.saltTabstrip {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: none;\n --tabs-tabstrip-display: inline-flex;\n --tabs-tabstrip-background: transparent;\n\n align-items: flex-start;\n align-self: var(--saltTabs-tabstrip-alignSelf, stretch);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n position: relative;\n overflow: hidden;\n display: flex;\n min-width: 28px;\n width: 100%;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n --tabs-activationIndicator-borderStyle: none none solid none;\n --tabs-activationIndicator-height: 1px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n --tabs-activationIndicator-transitionProperty: left;\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-thumb-inset: -1px 0 0 0;\n}\n\n/* Tabstrip orientation is vertical */\n.saltTabstrip-vertical {\n --tabs-activationIndicator-transition: top 0.3s ease;\n --tabs-activationIndicator-borderStyle: none solid none none;\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-transitionProperty: top;\n --tabs-activationIndicator-width: 1px;\n --tabs-activationIndicator-thumb-inset: 0 0 0 -1px;\n --tabs-activationIndicator-thumb-width: 2px;\n\n align-self: flex-start;\n display: inline-flex;\n}\n\n.saltTabstrip-draggingTab {\n --saltTabs-activationIndicator-transition: none;\n}\n\n.saltTabstrip-draggingTab .saltTab {\n pointer-events: none;\n}\n\n/* Tabstrip orientation is horizontal */\n.saltTabstrip-horizontal {\n height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-addButton,\n.saltDropdown.saltTabstrip-overflowMenu {\n margin-left: var(--salt-size-unit);\n}\n\n.saltTabstrip-overflowMenu.saltDropdown {\n --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltTabstrip-overflowMenu-open {\n --saltButton-background: var(--salt-actionable-secondary-background-active);\n --saltButton-text-color: var(--salt-actionable-secondary-text-color-active);\n}\n\n.saltTabstrip-overflowMenu-open .saltButton {\n --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltTabstrip-inner {\n width: 100%;\n align-items: center;\n display: flex;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 1;\n flex-wrap: wrap;\n justify-content: flex-start;\n line-height: var(--tabs-tabstrip-height);\n}\n\n.saltTabstrip-vertical .saltTabstrip-inner {\n flex-direction: column;\n height: auto;\n}\n\n.saltTabstrip-centered .saltTabstrip-inner {\n justify-content: center;\n}\n\n/* Styling applied to Draggable wrapper when used to drag a Tab */\n.saltDraggable[class*=\"tabstrip\"] {\n --tabs-tabstrip-display: flex;\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-tabstrip-dragging-display: block;\n\n --tabs-tab-background: var(--salt-navigable-primary-background-hover);\n --tabs-tab-before-content: \"\";\n --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active);\n --tabs-tab-position: static;\n\n font-size: 12px;\n}\n\n.saltDraggable-tabstrip-horizontal {\n --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n --tabs-activationIndicator-thumb-height: 2px;\n --tabs-activationIndicator-inset: auto 0px 0px 0px;\n\n line-height: var(--tabs-tabstrip-height);\n}\n.saltDraggable-tabstrip-vertical {\n --tabs-activationIndicator-inset: 0px 0px 0px auto;\n --tabs-activationIndicator-thumb-width: 2px;\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab[aria-selected=\"true\"]:before {\n --tabs-tab-before-background: var(--salt-navigable-indicator-active);\n}\n\n.saltDraggable[class*=\"tabstrip\"] .saltTab {\n box-shadow: var(--salt-overlayable-shadow-drag);\n}\n\n[data-overflowed] {\n order: 99;\n visibility: hidden;\n}\n\n.saltTabstrip-overflowMenu-dropTarget:after {\n background: var(--salt-selectable-background-selected);\n content: \"\";\n position: absolute;\n height: 2px;\n left: 0;\n right: 0;\n bottom: 0;\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = ".saltTooltray {\n --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n background: inherit;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n overflow: hidden;\n align-items: flex-start;\n justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n flex-shrink: 0;\n flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n align-items: center;\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n gap: 0 !important;\n justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n margin-top: var(--salt-size-unit);\n margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n margin-left: var(--salt-size-unit);\n padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n content: \"\";\n position: absolute;\n background:
|
|
5
|
+
var css_248z = ".saltTooltray {\n --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n background: inherit;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n overflow: hidden;\n align-items: flex-start;\n justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n flex-shrink: 0;\n flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n align-items: center;\n display: flex;\n flex: 1;\n flex-wrap: nowrap;\n gap: 0 !important;\n justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n margin-top: var(--salt-size-unit);\n margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n margin-left: var(--salt-size-unit);\n padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n content: \"\";\n position: absolute;\n background: var(--salt-separable-primary-borderColor);\n top: 8px;\n left: 0;\n width: 1px;\n height: 28px;\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n flex: 0 0 auto;\n}\n\n.saltTooltray > .Responsive-inner > *[data-pad-start=\"true\"] {\n margin-left: auto;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"] {\n flex-shrink: 0;\n}\n.saltTooltray[data-collapsible=\"dynamic\"] > .Responsive-inner {\n flex-wrap: wrap;\n}\n.saltTooltray[data-collapsing=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsed=\"true\"] {\n flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n flex-basis: 0;\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to root component */\n.saltBanner {\n --banner-background: var(--saltBanner-background, var(--salt-container-primary-background));\n --banner-fontSize: var(--saltBanner-fontSize, var(--salt-text-fontSize));\n --banner-lineHeight: var(--saltBanner-lineHeight, var(--salt-text-lineHeight));\n --banner-padding: var(--saltBanner-padding, var(--salt-size-unit));\n --banner-label-color: var(--saltBanner-label-color, var(--salt-text-primary-foreground));\n}\n\n.saltBanner {\n background: var(--banner-background);\n border-color: var(--saltBanner-borderColor, var(--banner-status-borderColor));\n border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n border-bottom: 2px solid var(--saltBanner-borderColor, var(--banner-status-borderColor));\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding: 0 var(--banner-padding);\n position: relative;\n /*min-height: 36px;*/\n width: 100%;\n align-items: center;\n}\n\n.saltBanner-closeButton {\n margin: calc(var(--salt-size-unit) * 0.5) auto calc(var(--salt-size-unit) * 0.5) var(--salt-size-unit);\n}\n\n.saltBanner-label {\n flex: 1 0;\n padding: calc(var(--banner-padding) + 2px) 0 calc(var(--banner-padding));\n font-weight: var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to root component */\n.saltBanner {\n --banner-background: var(--saltBanner-background, var(--salt-container-primary-background));\n --banner-fontSize: var(--saltBanner-fontSize, var(--salt-text-fontSize));\n --banner-lineHeight: var(--saltBanner-lineHeight, var(--salt-text-lineHeight));\n --banner-padding: var(--saltBanner-padding, var(--salt-size-unit));\n --banner-label-color: var(--saltBanner-label-color, var(--salt-text-primary-foreground));\n}\n\n.saltBanner {\n background: var(--banner-background);\n border-color: var(--saltBanner-borderColor, var(--banner-status-borderColor));\n border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n border-bottom: 2px solid var(--saltBanner-borderColor, var(--banner-status-borderColor));\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n padding: 0 var(--banner-padding);\n position: relative;\n /*min-height: 36px;*/\n width: 100%;\n align-items: center;\n}\n\n.saltBanner-closeButton {\n margin: calc(var(--salt-size-unit) * 0.5) auto calc(var(--salt-size-unit) * 0.5) var(--salt-size-unit);\n}\n\n.saltBanner-label {\n flex: 1 0;\n padding: calc(var(--banner-padding) + 2px) 0 calc(var(--banner-padding));\n font-weight: var(--salt-text-label-fontWeight);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n color: var(--banner-label-color);\n}\n\n/* Styles applied to status indicator */\n.saltBanner-icon {\n color: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n fill: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n margin-right: var(--saltTooltip-icon-marginRight, 6px);\n flex: 0 0 auto;\n}\n\n.saltBanner-link {\n font-weight: var(--salt-text-label-fontWeight);\n margin-left: 1ch;\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n --banner-status-borderColor: var(--salt-status-info-borderColor);\n --banner-status-icon-color: var(--salt-status-info-foreground);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n --banner-status-borderColor: var(--salt-status-error-borderColor);\n --banner-status-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n --banner-status-borderColor: var(--salt-status-warning-borderColor);\n --banner-status-icon-color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n --banner-status-borderColor: var(--salt-status-success-borderColor);\n --banner-status-icon-color: var(--salt-status-success-foreground);\n}\n\n.saltBanner-emphasize.saltBanner-info {\n --banner-background: var(--salt-status-info-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-error {\n --banner-background: var(--salt-status-error-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-warning {\n --banner-background: var(--salt-status-warning-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-success {\n --banner-background: var(--salt-status-success-background-emphasize);\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n --calendar-day-text-color: var(--salt-text-primary-foreground);\n --calendar-day-background: var(--salt-selectable-background);\n --calendar-day-background-hover: var(--salt-selectable-background-hover);\n --calendar-day-text-color-hover: var(--salt-text-primary-foreground);\n --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled);\n --calendar-day-blocked-text-color: var(--salt-text-primary-foreground);\n --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n --calendar-day-blocked-background: var(--calendar-day-background);\n --calendar-day-unselectable-text-color: var(--salt-text-secondary-foreground-disabled);\n --calendar-day-unselectable-background: var(--calendar-day-background);\n --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n --calendar-day-selected-background: var(--salt-selectable-background-selected);\n --calendar-day-selected-text-color: var(--salt-text-primary-foreground);\n --calendar-day-selected-focused-outlineColor: var(--salt-color-white)
|
|
3
|
+
var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n --calendar-day-text-color: var(--salt-text-primary-foreground);\n --calendar-day-background: var(--salt-selectable-background);\n --calendar-day-background-hover: var(--salt-selectable-background-hover);\n --calendar-day-text-color-hover: var(--salt-text-primary-foreground);\n --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled);\n --calendar-day-blocked-text-color: var(--salt-text-primary-foreground);\n --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n --calendar-day-blocked-background: var(--calendar-day-background);\n --calendar-day-unselectable-text-color: var(--salt-text-secondary-foreground-disabled);\n --calendar-day-unselectable-background: var(--calendar-day-background);\n --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n --calendar-day-selected-background: var(--salt-selectable-background-selected);\n --calendar-day-selected-text-color: var(--salt-text-primary-foreground);\n /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n --calendar-day-selectedStart-text-color: var(--salt-text-primary-foreground);\n /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n --calendar-day-selectedEnd-text-color: var(--salt-text-primary-foreground);\n /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n --calendar-day-selectedSpan-text-color: var(--salt-text-primary-foreground);\n\n --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground);\n\n --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground);\n\n --calendar-day-currentDay-borderColor: var(--salt-text-primary-foreground); /* TODO should not be foreground color */\n\n /* Focus */\n --calendar-day-focused-outline: var(--salt-focused-outline);\n --calendar-day-size: var(--salt-size-base);\n --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n width: var(--calendar-day-size);\n height: var(--calendar-day-size);\n color: var(--calendar-day-text-color);\n background-color: var(--calendar-day-background);\n font-size: var(--calendar-day-fontSize);\n border: 0;\n cursor: pointer;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n outline: var(--calendar-day-focused-outline);\n outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n background: var(--calendar-day-background-hover);\n color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n color: var(--calendar-day-blocked-text-color);\n cursor: var(--calendar-day-blocked-cursor);\n background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n background: var(--calendar-day-selectedSpan-background);\n color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n background: var(--calendar-day-hoveredSpan-background);\n color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n background: var(--calendar-day-hoveredOffset-background);\n color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n background: var(--calendar-day-selected-background);\n color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n background: var(--calendar-day-selectedStart-background);\n color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n background: var(--calendar-day-selectedEnd-background);\n color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n color: var(--calendar-day-unselectable-text-color);\n background: var(--calendar-day-unselectable-background);\n cursor: var(--calendar-day-unselectable-cursor);\n text-decoration: line-through;\n}\n\n.salt-density-high {\n --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n fill: var(--calendar-day-blocked-icon-color);\n position: absolute;\n --icon-size: var(--calendar-day-blocked-icon-size);\n pointer-events: none;\n line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n visibility: hidden;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltMenuItem {\n background: var(--salt-selectable-background);\n display: flex;\n\n align-items: center;\n justify-content: space-between;\n\n right: 0;\n cursor: pointer;\n overflow: hidden;\n text-align: left;\n user-select: none;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltMenuItem-menuItemText {\n flex-grow: 2;\n white-space: nowrap;\n}\n\n.saltMenuItem-menuItemEndAdornment {\n margin-left: 8px; /* density */\n}\n\n.saltMenuItem-menuItemStartAdornmentContainer {\n margin-right: var(--salt-size-unit);\n width: 12px;\n}\n\n.saltMenuItem-menuItemAdornmentHidden {\n visibility: hidden;\n}\n\n.saltMenuItem.saltMenuItem-menuItemDivider {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltMenuItem-menuItemHover:hover {\n background:
|
|
3
|
+
var css_248z = ".saltMenuItem {\n background: var(--salt-selectable-background);\n display: flex;\n\n align-items: center;\n justify-content: space-between;\n\n right: 0;\n cursor: pointer;\n overflow: hidden;\n text-align: left;\n user-select: none;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltMenuItem-menuItemText {\n flex-grow: 2;\n white-space: nowrap;\n}\n\n.saltMenuItem-menuItemEndAdornment {\n margin-left: 8px; /* density */\n}\n\n.saltMenuItem-menuItemStartAdornmentContainer {\n margin-right: var(--salt-size-unit);\n width: 12px;\n}\n\n.saltMenuItem-menuItemAdornmentHidden {\n visibility: hidden;\n}\n\n.saltMenuItem.saltMenuItem-menuItemDivider {\n border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltMenuItem-menuItemHover:hover {\n background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltMenuItem.saltMenuItem-menuItemBlurSelected {\n background: var(--salt-selectable-background-blurSelected) !important;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltColorChooser-overlayButtonSwatch {\n margin-right: 10px;\n height: calc(2 * var(--salt-size-unit));\n width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n height: calc(3 * var(--salt-size-unit) - 2px) !important;\n width: calc(3 * var(--salt-size-unit) - 2px) !important;\n border: 1px solid var(--salt-
|
|
3
|
+
var css_248z = ".saltColorChooser-overlayButtonSwatch {\n margin-right: 10px;\n height: calc(2 * var(--salt-size-unit));\n width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n height: calc(3 * var(--salt-size-unit) - 2px) !important;\n width: calc(3 * var(--salt-size-unit) - 2px) !important;\n border: 1px solid var(--salt-status-negative-foreground);\n /* RGBA using red-700 */\n background: linear-gradient(\n to top left,\n rgba(166, 21, 11, 0) 0%,\n rgba(166, 21, 11, 0) calc(50% - 0.8px),\n rgba(166, 21, 11, 1) 50%,\n rgba(166, 21, 11, 0) calc(50% + 0.8px),\n rgba(166, 21, 11, 0) 100%\n );\n}\n\n.saltColorChooser-overlayButtonText {\n font-weight: var(--salt-text-fontWeight);\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n font-size: var(--salt-text-fontSize);\n letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n background: transparent;\n text-transform: none;\n justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n width: calc(var(--salt-size-unit) * 3);\n display: contents;\n}\n\n.saltColorChooser-overlayButtonClose {\n margin: 5px;\n}\n\n.saltColorChooser-defaultButton {\n float: right;\n background: transparent;\n padding: 6px 2px 6px 2px;\n height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n padding-right: 5px;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
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: pointer;\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: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n border: var(--salt-size-border) var(--salt-container-borderColor-style) 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-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n outline: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n margin-bottom: 1px;\n margin-left: 1px;\n cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-negative-foreground) !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(\n to top left,\n rgba(166, 21, 11, 0) 0%,\n rgba(166, 21, 11, 0) calc(50% - 0.8px),\n rgba(166, 21, 11, 1) 50%,\n rgba(166, 21, 11, 0) calc(50% + 0.8px),\n rgba(166, 21, 11, 0) 100%\n ) !important;\n}\n";
|
|
3
|
+
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: pointer;\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: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n border: var(--salt-size-border) var(--salt-container-borderColor-style) 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-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n outline: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n margin-bottom: 1px;\n margin-left: 1px;\n cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !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(\n to top left,\n rgba(166, 21, 11, 0) 0%,\n rgba(166, 21, 11, 0) calc(50% - 0.8px),\n rgba(166, 21, 11, 1) 50%,\n rgba(166, 21, 11, 0) calc(50% + 0.8px),\n rgba(166, 21, 11, 0) 100%\n ) !important;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef, useEffect } from 'react';
|
|
3
|
-
import { makePrefixer } from '@salt-ds/core';
|
|
4
|
-
import { Avatar } from '../avatar/Avatar.js';
|
|
3
|
+
import { makePrefixer, Avatar } from '@salt-ds/core';
|
|
5
4
|
import './internal/FavoriteToggleWithTooltip.js';
|
|
6
5
|
import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
|
|
7
6
|
import { clsx } from 'clsx';
|
|
@@ -21,7 +20,7 @@ const ContactAvatar = forwardRef(
|
|
|
21
20
|
if (variant === "mini") {
|
|
22
21
|
return null;
|
|
23
22
|
}
|
|
24
|
-
const avatarSize = variant === "default" ?
|
|
23
|
+
const avatarSize = variant === "default" ? 3 : 2;
|
|
25
24
|
return /* @__PURE__ */ jsx(Avatar, {
|
|
26
25
|
...restProps,
|
|
27
26
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {
|
|
1
|
+
{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer, Avatar, AvatarProps } from \"@salt-ds/core\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport type ContactAvatarProps = AvatarProps;\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n function (props, ref) {\n const { className, ...restProps } = props;\n const context = useContactDetailsContext();\n const { variant, primary, isStacked, setHasAvatar } = context;\n\n useEffect(() => {\n setHasAvatar(true);\n return () => {\n setHasAvatar(false);\n };\n }, [setHasAvatar]);\n\n if (variant === \"mini\") {\n return null;\n }\n\n const avatarSize = variant === \"default\" ? 3 : 2;\n return (\n <Avatar\n {...restProps}\n ref={ref}\n aria-hidden={true}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"stacked\")]: isStacked,\n },\n className\n )}\n size={avatarSize}\n >\n {primary\n ? primary\n .split(\" \")\n .map((x) => x.charAt(0))\n .slice(0, 2)\n : null}\n </Avatar>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAU,wBAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAC/C,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: var(--salt-text-textAlign-embedded);\n gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n display: flex;\n flex-direction: column;\n gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n font-weight: var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: var(--salt-text-textAlign-embedded);\n gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n display: flex;\n flex-direction: column;\n gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n font-weight: var(--salt-text-display1-fontWeight); /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n const handleRef = useForkRef(ref, setContentElement);\n\n return (\n <div\n {...rest}\n className={clsx(\n withBaseName(),\n
|
|
1
|
+
{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n const handleRef = useForkRef(ref, setContentElement);\n\n return (\n <div\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"leftGutter\")]: !!status,\n },\n className\n )}\n id={`${dialogId}-body`}\n ref={handleRef}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["DialogContent"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltDropdownButton {\n --saltButton-background-hover: var(--salt-actionable-secondary-background);\n --saltButton-background-active: var(--salt-actionable-secondary-background);\n --saltButton-fontWeight: var(--salt-
|
|
3
|
+
var css_248z = ".saltDropdownButton {\n --saltButton-background-hover: var(--salt-actionable-secondary-background);\n --saltButton-background-active: var(--salt-actionable-secondary-background);\n --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n --saltButton-textAlign: left;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n --saltIcon-color: var(--salt-actionable-secondary-foreground);\n --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n width: 100%;\n}\n\n.saltDropdownButton-content {\n align-items: center;\n flex: 1;\n width: 100%;\n display: flex;\n white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n display: inline-block;\n letter-spacing: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n outline: none;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n --fileDropZone-background: var(--salt-container-secondary-background);\n --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n --fileDropZone-borderWidth: var(--salt-size-border);\n --fileDropZone-borderStyle: var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n --fileDropZone-background: var(--salt-container-secondary-background);\n --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n --fileDropZone-borderWidth: var(--salt-size-border);\n --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n --fileDropZone-text-color: var(--salt-text-primary-foreground);\n --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n text-align: center;\n align-items: stretch;\n justify-content: center;\n border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n flex-direction: column;\n padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n fill: var(--fileDropZone-icon-color);\n margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}` */\n.saltFileDropZone-error .saltFileDropZone-description {\n margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}` */\n.saltFileDropZone-error {\n --fileDropZone-background: var(--salt-status-error-background-emphasize);\n --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n --fileDropZone-background: var(--salt-target-background-hover);\n --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n position: absolute;\n clip: rect(0, 0, 0, 0);\n visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -27,7 +27,6 @@ export { Accordion } from './accordion/Accordion.js';
|
|
|
27
27
|
export { AccordionSummary } from './accordion/AccordionSummary.js';
|
|
28
28
|
export { AccordionDetails } from './accordion/AccordionDetails.js';
|
|
29
29
|
export { AppHeader } from './app-header/AppHeader.js';
|
|
30
|
-
export { Avatar } from './avatar/Avatar.js';
|
|
31
30
|
export { Badge } from './badge/Badge.js';
|
|
32
31
|
export { Banner } from './banner/Banner.js';
|
|
33
32
|
export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltHighlighter-highlight {\n font-weight: var(--salt-
|
|
3
|
+
var css_248z = ".saltHighlighter-highlight {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltListItem {\n /* Color */\n --list-item-text-color: var(--salt-text-primary-foreground);\n --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n --list-item-selected-focus-outlineColor: var(--salt-color-white);
|
|
3
|
+
var css_248z = ".saltListItem {\n /* Color */\n --list-item-text-color: var(--salt-text-primary-foreground);\n --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-background-active: var(--salt-selectable-background-selected);\n --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 1;\n}\n\n.saltListItem {\n color: var(--list-item-text-color);\n cursor: var(--saltList-item-cursor, pointer);\n background: var(--saltList-item-background, var(--list-item-background));\n font-size: var(--salt-text-fontSize);\n text-align: var(--salt-text-textAlign);\n line-height: var(--salt-text-lineHeight);\n height: var(--saltList-item-height, var(--list-item-height, auto));\n /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n margin-bottom: var(--list-item-gap);\n padding: 0 var(--salt-size-unit);\n left: 0;\n right: 0;\n display: flex;\n position: relative;\n align-items: var(--list-item-alignItems);\n white-space: nowrap;\n}\n\n.saltListItem:last-child {\n margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n --list-item-background-active: var(--salt-selectable-background);\n --list-item-text-color-active: var(--salt-text-primary-foreground);\n --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n --list-item-background: var(--list-item-background-active);\n color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: -2px;\n outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n flex: 1;\n overflow: hidden;\n padding: var(--list-item-text-padding, 0px);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { compute } from 'compute-scroll-into-view';
|
|
2
2
|
|
|
3
3
|
function scrollIntoView(item, list) {
|
|
4
4
|
if (!item) {
|
|
5
5
|
return;
|
|
6
6
|
}
|
|
7
|
-
const actions =
|
|
7
|
+
const actions = compute(item, {
|
|
8
8
|
boundary: list,
|
|
9
9
|
block: "nearest",
|
|
10
10
|
scrollMode: "if-needed"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollIntoView.js","sources":["../src/list-deprecated/internal/scrollIntoView.js"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"scrollIntoView.js","sources":["../src/list-deprecated/internal/scrollIntoView.js"],"sourcesContent":["import { compute } from \"compute-scroll-into-view\";\n\nexport function scrollIntoView(item, list) {\n if (!item) {\n return;\n }\n\n const actions = compute(item, {\n boundary: list,\n block: \"nearest\",\n scrollMode: \"if-needed\",\n });\n\n actions.forEach(({ el, top, left }) => {\n el.scrollTop = top;\n el.scrollLeft = left;\n });\n}\n"],"names":[],"mappings":";;AAEgB,SAAA,cAAA,CAAe,MAAM,IAAM,EAAA;AACzC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,OAAA;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,GAAU,QAAQ,IAAM,EAAA;AAAA,IAC5B,QAAU,EAAA,IAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IACP,UAAY,EAAA,WAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,QAAQ,CAAC,EAAE,EAAI,EAAA,GAAA,EAAK,MAAW,KAAA;AACrC,IAAA,EAAA,CAAG,SAAY,GAAA,GAAA,CAAA;AACf,IAAA,EAAA,CAAG,UAAa,GAAA,IAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AACH;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".salt-density-high {\n --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n --logo-color: var(--saltLogo-color, var(--salt-
|
|
3
|
+
var css_248z = ".salt-density-high {\n --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n --logo-color: var(--saltLogo-color, var(--salt-text-secondary-foreground));\n --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-separator-height));\n --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n --logo-fontSize: var(--salt-text-fontSize);\n --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n display: inline-flex;\n position: relative;\n align-items: center;\n justify-content: center;\n height: var(--logo-height);\n}\n\n.saltLogo img {\n max-height: 100%;\n}\n\n.saltLogo-wrapper {\n display: inline-flex;\n position: relative;\n height: var(--logo-height);\n}\n\n.saltLogo-logo {\n fill: var(--logo-color);\n margin: auto;\n stroke: none !important;\n text-align: center;\n font-size: var(--logo-fontSize);\n line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n align-self: center;\n color: var(--logo-color);\n position: relative;\n}\n\n.saltLogo-titlePipe {\n border-right: 1px solid var(--logo-divider-color);\n margin: var(--logo-divider-margin);\n height: var(--logo-divider-height);\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltMetricContent {\n display: flex;\n flex-direction: column;\n margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n align-items: baseline;\n display: flex;\n flex-direction: row;\n gap: calc(var(--salt-size-unit) / 2);\n margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n fill: var(--salt-
|
|
3
|
+
var css_248z = ".saltMetricContent {\n display: flex;\n flex-direction: column;\n margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n align-items: baseline;\n display: flex;\n flex-direction: row;\n gap: calc(var(--salt-size-unit) / 2);\n margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n align-items: center;\n text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n align-items: flex-end;\n text-align: right;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -15,12 +15,16 @@ const ParentChildItem = forwardRef(
|
|
|
15
15
|
...rest
|
|
16
16
|
}, ref) {
|
|
17
17
|
return /* @__PURE__ */ jsx(FlexItem, {
|
|
18
|
-
className: clsx(
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
className: clsx(
|
|
19
|
+
withBaseName(),
|
|
20
|
+
{
|
|
21
|
+
...direction && {
|
|
22
|
+
[withBaseName(`slide-${direction}`)]: !disableAnimations
|
|
23
|
+
},
|
|
24
|
+
"saltFlexItem-stacked": isStacked
|
|
21
25
|
},
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
className
|
|
27
|
+
),
|
|
24
28
|
ref,
|
|
25
29
|
...rest,
|
|
26
30
|
children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FlexItem,\n flexItemAlignment,\n makePrefixer,\n ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Direction for slide animations.\n */\n direction?: SlideDirection;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Determines whether the component is stacked\n */\n isStacked?: boolean;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n function ParentChildItem(\n {\n disableAnimations = false,\n direction,\n isStacked,\n children,\n className,\n ...rest\n },\n ref\n ) {\n return (\n <FlexItem\n className={clsx(
|
|
1
|
+
{"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FlexItem,\n flexItemAlignment,\n makePrefixer,\n ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Direction for slide animations.\n */\n direction?: SlideDirection;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Determines whether the component is stacked\n */\n isStacked?: boolean;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n */\n shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n function ParentChildItem(\n {\n disableAnimations = false,\n direction,\n isStacked,\n children,\n className,\n ...rest\n },\n ref\n ) {\n return (\n <FlexItem\n className={clsx(\n withBaseName(),\n {\n ...(direction && {\n [withBaseName(`slide-${direction}`)]: !disableAnimations,\n }),\n \"saltFlexItem-stacked\": isStacked,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n {children}\n </FlexItem>\n );\n }\n);\n"],"names":["ParentChildItem"],"mappings":";;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,GAAI,SAAa,IAAA;AAAA,YACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,WACzC;AAAA,UACA,sBAAwB,EAAA,SAAA;AAAA,SAC1B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -52,7 +52,7 @@ const ParentChildLayout = forwardRef(function ParentChildLayout2({
|
|
|
52
52
|
})
|
|
53
53
|
};
|
|
54
54
|
return /* @__PURE__ */ jsx(FlexLayout, {
|
|
55
|
-
className: clsx(
|
|
55
|
+
className: clsx(withBaseName(), className),
|
|
56
56
|
ref,
|
|
57
57
|
...rest,
|
|
58
58
|
children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxs(Fragment, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n Breakpoints,\n FlexLayout,\n FlexLayoutProps,\n makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Breakpoint at which the parent and child will stack.\n */\n stackedAtBreakpoint?: keyof Breakpoints;\n /**\n * Change element that is displayed when in staked view.\n */\n stackedViewElement?: StackedViewElement;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Orientation for slide animations.\n */\n orientation?: Orientation;\n /**\n * Controls the space between columns.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Parent component to be rendered\n */\n parent: ReactNode;\n /**\n * Child component to be rendered\n */\n child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n orientation: Orientation,\n stackedViewElement: StackedViewElement\n) => {\n let direction: SlideDirection = \"right\";\n\n if (orientation === \"horizontal\") {\n if (stackedViewElement === \"parent\") {\n direction = \"left\";\n } else {\n direction = \"right\";\n }\n } else {\n if (stackedViewElement === \"parent\") {\n direction = \"bottom\";\n } else {\n direction = \"top\";\n }\n }\n\n return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n stackedAtBreakpoint = \"sm\",\n stackedViewElement = \"parent\",\n disableAnimations = false,\n parent,\n child,\n className,\n orientation = \"horizontal\",\n ...rest\n },\n ref\n) {\n const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n const stackedViewChildren = {\n parent: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {parent}\n </ParentChildItem>\n ),\n child: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {child}\n </ParentChildItem>\n ),\n };\n\n return (\n <FlexLayout className={clsx(
|
|
1
|
+
{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n Breakpoints,\n FlexLayout,\n FlexLayoutProps,\n makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Breakpoint at which the parent and child will stack.\n */\n stackedAtBreakpoint?: keyof Breakpoints;\n /**\n * Change element that is displayed when in staked view.\n */\n stackedViewElement?: StackedViewElement;\n /**\n * Disable all animations.\n */\n disableAnimations?: boolean;\n /**\n * Orientation for slide animations.\n */\n orientation?: Orientation;\n /**\n * Controls the space between columns.\n */\n gap?: FlexLayoutProps<ElementType>[\"gap\"];\n /**\n * Parent component to be rendered\n */\n parent: ReactNode;\n /**\n * Child component to be rendered\n */\n child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n orientation: Orientation,\n stackedViewElement: StackedViewElement\n) => {\n let direction: SlideDirection = \"right\";\n\n if (orientation === \"horizontal\") {\n if (stackedViewElement === \"parent\") {\n direction = \"left\";\n } else {\n direction = \"right\";\n }\n } else {\n if (stackedViewElement === \"parent\") {\n direction = \"bottom\";\n } else {\n direction = \"top\";\n }\n }\n\n return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n HTMLDivElement,\n ParentChildLayoutProps\n>(function ParentChildLayout(\n {\n stackedAtBreakpoint = \"sm\",\n stackedViewElement = \"parent\",\n disableAnimations = false,\n parent,\n child,\n className,\n orientation = \"horizontal\",\n ...rest\n },\n ref\n) {\n const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n const stackedViewChildren = {\n parent: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {parent}\n </ParentChildItem>\n ),\n child: (\n <ParentChildItem\n disableAnimations={disableAnimations}\n direction={parentChildDirection}\n isStacked={stackedView}\n >\n {child}\n </ParentChildItem>\n ),\n };\n\n return (\n <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n {stackedView ? (\n stackedViewChildren[stackedViewElement]\n ) : (\n <>\n <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n {parent}\n </ParentChildItem>\n <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n {child}\n </ParentChildItem>\n </>\n )}\n </FlexLayout>\n );\n});\n"],"names":["ParentChildLayout"],"mappings":";;;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAc,kCAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACG,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".salt-density-high {\n --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n /* Button API */\n --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n --saltButton-padding: var(--saltPill-button-padding, 0);\n --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n --saltButton-cursor: normal;\n}\n\n.saltPill {\n align-items: center;\n background: var(--pill-background);\n border-radius: var(--saltPill-borderRadius, 0);\n color: var(--pill-text-color);\n display: inline-flex;\n font-size: var(--pill-fontSize);\n height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n letter-spacing: var(--saltPill-letterSpacing, 0);\n line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n max-width: var(--saltPill-maxWidth, 160px);\n min-width: var(--saltPill-minWidth, 40px);\n min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n outline: var(--saltPill-outline, 0);\n position: relative;\n}\n\n.saltPill:hover {\n --saltButton-background-active: var(--pill-background-active);\n --saltButton-background-hover: var(--pill-background-hover);\n\n --saltIcon-color: var(--pill-icon-color);\n --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}` */\n.saltPill-clickable {\n --saltButton-background-active: var(--pill-background);\n --saltButton-background-hover: var(--pill-background);\n\n cursor: var(--salt-selectable-cursor-hover);\n user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n --saltButton-background-active: var(--pill-background);\n --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n --saltButton-background-active: var(--pill-background);\n --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n --saltButton-background-active: var(--pill-background-disabled);\n --saltButton-background-hover: var(--pill-background-disabled);\n --saltButton-text-color-active: var(--pill-text-color);\n --saltButton-text-color-hover: var(--pill-text-color);\n --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n background: var(--pill-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n color: var(--saltPill-text-color, var(--pill-text-color));\n display: inline;\n flex-grow: 1;\n font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n overflow: hidden;\n padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n pointer-events: none;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n vertical-align: top;\n line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n cursor: var(--salt-selectable-cursor-disabled);\n opacity: var(--salt-palette-opacity-foreground);\n\n --saltIcon-color: var(--pill-icon-color-disabled);\n --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n --saltButton-background-hover: var(--pill-background-hover);\n --saltButton-background-active: var(--pill-background-active);\n --saltButton-cursor: pointer;\n\n flex-shrink: 0;\n height: var(--pill-checkbox-size);\n margin-left: calc(var(--salt-size-unit) / 2);\n min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n --saltButton-background-hover: var(--pill-background-disabled);\n --saltButton-background-active: var(--pill-background-disabled);\n --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon */\n.saltPill-deleteButton .saltPill-deleteIcon {\n left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state */\n.saltPill-disabled:active .saltPill-deleteIcon {\n --saltButton-background-active: var(--pill-background-disabled);\n --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n fill: var(--pill-icon-color);\n height:
|
|
3
|
+
var css_248z = ".salt-density-high {\n --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n /* Button API */\n --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n --saltButton-padding: var(--saltPill-button-padding, 0);\n --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n --saltButton-cursor: normal;\n}\n\n.saltPill {\n align-items: center;\n background: var(--pill-background);\n border-radius: var(--saltPill-borderRadius, 0);\n color: var(--pill-text-color);\n display: inline-flex;\n font-size: var(--pill-fontSize);\n height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n letter-spacing: var(--saltPill-letterSpacing, 0);\n line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n max-width: var(--saltPill-maxWidth, 160px);\n min-width: var(--saltPill-minWidth, 40px);\n min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n outline: var(--saltPill-outline, 0);\n position: relative;\n}\n\n.saltPill:hover {\n --saltButton-background-active: var(--pill-background-active);\n --saltButton-background-hover: var(--pill-background-hover);\n\n --saltIcon-color: var(--pill-icon-color);\n --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n outline-width: var(--salt-focused-outlineWidth);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}` */\n.saltPill-clickable {\n --saltButton-background-active: var(--pill-background);\n --saltButton-background-hover: var(--pill-background);\n\n cursor: var(--salt-selectable-cursor-hover);\n user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n --saltButton-background-active: var(--pill-background);\n --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n --saltButton-background-active: var(--pill-background);\n --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n --saltButton-background-active: var(--pill-background-disabled);\n --saltButton-background-hover: var(--pill-background-disabled);\n --saltButton-text-color-active: var(--pill-text-color);\n --saltButton-text-color-hover: var(--pill-text-color);\n --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n background: var(--pill-background-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n color: var(--saltPill-text-color, var(--pill-text-color));\n display: inline;\n flex-grow: 1;\n font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n overflow: hidden;\n padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n pointer-events: none;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n vertical-align: top;\n line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n cursor: var(--salt-selectable-cursor-disabled);\n opacity: var(--salt-palette-opacity-foreground);\n\n --saltIcon-color: var(--pill-icon-color-disabled);\n --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n --saltButton-background-hover: var(--pill-background-hover);\n --saltButton-background-active: var(--pill-background-active);\n --saltButton-cursor: pointer;\n\n flex-shrink: 0;\n height: var(--pill-checkbox-size);\n margin-left: calc(var(--salt-size-unit) / 2);\n min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n --saltButton-background-hover: var(--pill-background-disabled);\n --saltButton-background-active: var(--pill-background-disabled);\n --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon */\n.saltPill-deleteButton .saltPill-deleteIcon {\n left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state */\n.saltPill-disabled:active .saltPill-deleteIcon {\n --saltButton-background-active: var(--pill-background-disabled);\n --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n fill: var(--pill-icon-color);\n height: 12px; /* TODO: Replace with updated size */\n margin-left: calc(var(--salt-size-unit) * 0.75);\n margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n background: var(--pill-background);\n color: var(--pill-text-color);\n}\n\n/* Pill label styles when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n background: initial;\n color: var(--pill-text-color-disabled);\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n display: block;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: auto;\n white-space: nowrap;\n margin: var(--skipLink-margin);\n padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n background: var(--skipLink-background);\n color: var(--skipLink-color);\n box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n font-size: var(--salt-text-fontSize);\n font-family: var(--saltSkipLink-fontFamily, var(--salt-
|
|
3
|
+
var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n top: 0;\n left: 0;\n width: 1px;\n height: 1px;\n display: block;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n opacity: 1;\n width: auto;\n height: auto;\n white-space: nowrap;\n margin: var(--skipLink-margin);\n padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n background: var(--skipLink-background);\n color: var(--skipLink-color);\n box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n font-size: var(--salt-text-fontSize);\n font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n outline: var(--skipLink-target-focus);\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -181,6 +181,7 @@ const useStepperInput = (props, inputRef) => {
|
|
|
181
181
|
};
|
|
182
182
|
const getButtonProps = (type = stepperDirection.INCREMENT, buttonPropsProp = {}) => ({
|
|
183
183
|
"aria-hidden": true,
|
|
184
|
+
"data-testid": `${type}-button`,
|
|
184
185
|
tabIndex: -1,
|
|
185
186
|
...buttonPropsProp,
|
|
186
187
|
onMouseDown: callAll(
|