@vuu-ui/vuu-ui-controls 0.8.61 → 0.8.62
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/cjs/packages/vuu-ui-controls/src/split-button/SplitButton.css.js +1 -1
- package/cjs/packages/vuu-ui-controls/src/split-button/SplitStateButton.css.js +1 -1
- package/esm/packages/vuu-ui-controls/src/split-button/SplitButton.css.js +1 -1
- package/esm/packages/vuu-ui-controls/src/split-button/SplitStateButton.css.js +1 -1
- package/package.json +7 -7
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var splitButtonCss = ".vuuSplitButton {\n
|
|
3
|
+
var splitButtonCss = ".vuuSplitButton {\n --saltButton-background: var(--split-background);\n --saltButton-background-hover: var(--split-background);\n --vuuPopupMenu-background: var(--split-background);\n --vuuPopupMenu-iconSize: 20px;\n\n /** less verbose local refs */\n --background: var(--vuuSplitButton-background);\n --foreground: var(--vuuSplitButton-foreground);\n --background-hover: var(--vuuSplitButton-background-hover);\n --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n --trigger-border-style: solid solid solid none;\n\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n display: flex;\n\n .vuuSplitButton-main {\n border-radius: var(--main-border-radius);\n }\n .vuuSplitButton-trigger {\n border-radius: var(--trigger-border-radius);\n }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n .saltButton {\n outline-style: none;\n }\n &.vuuSplitButton-primary {\n --split-background: var(\n --background-hover,\n var(--salt-actionable-primary-background-hover)\n );\n }\n &.vuuSplitButton-secondary {\n --split-background: var(\n --background-hover,\n var(--salt-actionable-secondary-background-hover)\n );\n }\n &.vuuSplitButton-cta {\n --split-background: var(\n --background-hover,\n var(--salt-actionable-cta-background-hover)\n );\n .vuuSplitButton-trigger {\n --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n }\n }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n --split-background: var(\n --background,\n var(--salt-actionable-primary-background)\n );\n --split-background-active: var(--salt-actionable-primary-background-active);\n --split-color-active: var(--salt-actionable-primary-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n --vuuButton-borderColor: var(--split-background);\n --saltButton-borderColor: var(--split-background);\n --split-background: var(\n --background-hover,\n var(--salt-actionable-primary-background-hover)\n );\n .saltButton {\n --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);\n }\n}\n\n.vuuSplitButton-secondary {\n --saltButton-borderColor: var(--split-background);\n --split-background: var(\n --background,\n var(--salt-actionable-secondary-background)\n );\n --split-background-active: var(--salt-actionable-secondary-background-active);\n --split-color-active: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n --vuuButton-borderColor: var(--split-background);\n --split-background: var(--salt-actionable-secondary-background-hover);\n .saltButton {\n --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);\n }\n}\n\n.vuuSplitButton-cta {\n --split-background: var(--background, var(--salt-actionable-cta-background));\n --split-background-active: var(--salt-actionable-cta-background-active);\n --split-color-active: var(--salt-actionable-cta-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n --vuuButton-borderColor: var(--split-background);\n --split-background: var(--salt-actionable-cta-background-hover);\n --split-color: var(--salt-actionable-cta-foreground-hover);\n .saltButton {\n --saltButton-text-color: var(--salt-actionable-cta-foreground-hover);\n --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n }\n}\n\n.vuuSplitButton:has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--split-background-active);\n .vuuSplitButton-trigger {\n --vuu-icon-color: var(--split-color-active);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = splitButtonCss;
|
|
6
6
|
//# sourceMappingURL=SplitButton.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var splitStateButtonCss = ".vuuSplitStateButton {\n --split-state-background: var(--salt-actionable-secondary-background);\n --split-state-foreground: var(--salt-actionable-secondary-foreground);\n --vuuSplitButton-background: var(--split-state-background);\n --vuuSplitButton-foreground: var(--split-state-foreground);\n --vuuSplitButton-background-hover: var(--split-state-background);\n --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n .saltButton-primary:active,\n .saltButton-primary.saltButton-active {\n --saltButton-background-active: var(--salt-actionable-primary-background);\n --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color-hover: var(\n --salt-actionable-primary-foreground-active\n );\n --split-state-background: var(--salt-actionable-primary-background-active);\n --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n &.focusVisible {\n --split-state-background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n .vuuEditableLabel-input {\n color: var(--salt-actionable-primary-foreground-active);\n }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n --saltButton-background: var(--salt-actionable-primary-background);\n --vuu-icon-color: var(--salt-actionable-primary-foreground);\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-secondary-background);\n .saltButton-primary:active {\n background: var(--salt-actionable-secondary-background);\n }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-primary-background-active);\n .saltButton-primary:active {\n background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n .saltButton {\n border-color: var(--salt-actionable-primary-foreground);\n }\n}\n";
|
|
3
|
+
var splitStateButtonCss = ".vuuSplitStateButton {\n --split-state-background: var(--salt-actionable-secondary-background);\n --split-state-foreground: var(--salt-actionable-secondary-foreground);\n --vuuSplitButton-background: var(--split-state-background);\n --vuuSplitButton-foreground: var(--split-state-foreground);\n --vuuSplitButton-background-hover: var(--split-state-background);\n --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n .saltButton-primary:active,\n .saltButton-primary.saltButton-active {\n --saltButton-background-active: var(--salt-actionable-primary-background);\n --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color-hover: var(\n --salt-actionable-primary-foreground-active\n );\n --split-state-background: var(--salt-actionable-primary-background-active);\n --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n &.focusVisible {\n --split-state-background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n .vuuEditableLabel-input {\n color: var(--salt-actionable-primary-foreground-active);\n }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n --saltButton-background: var(--salt-actionable-primary-background);\n .vuuIcon {\n --vuu-icon-color: var(--salt-actionable-primary-foreground);\n }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-secondary-background);\n .saltButton-primary:active {\n background: var(--salt-actionable-secondary-background);\n }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-primary-background-active);\n .saltButton-primary:active {\n background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n .saltButton {\n border-color: var(--salt-actionable-primary-foreground);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = splitStateButtonCss;
|
|
6
6
|
//# sourceMappingURL=SplitStateButton.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var splitButtonCss = ".vuuSplitButton {\n
|
|
1
|
+
var splitButtonCss = ".vuuSplitButton {\n --saltButton-background: var(--split-background);\n --saltButton-background-hover: var(--split-background);\n --vuuPopupMenu-background: var(--split-background);\n --vuuPopupMenu-iconSize: 20px;\n\n /** less verbose local refs */\n --background: var(--vuuSplitButton-background);\n --foreground: var(--vuuSplitButton-foreground);\n --background-hover: var(--vuuSplitButton-background-hover);\n --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n --trigger-border-style: solid solid solid none;\n\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n display: flex;\n\n .vuuSplitButton-main {\n border-radius: var(--main-border-radius);\n }\n .vuuSplitButton-trigger {\n border-radius: var(--trigger-border-radius);\n }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n .saltButton {\n outline-style: none;\n }\n &.vuuSplitButton-primary {\n --split-background: var(\n --background-hover,\n var(--salt-actionable-primary-background-hover)\n );\n }\n &.vuuSplitButton-secondary {\n --split-background: var(\n --background-hover,\n var(--salt-actionable-secondary-background-hover)\n );\n }\n &.vuuSplitButton-cta {\n --split-background: var(\n --background-hover,\n var(--salt-actionable-cta-background-hover)\n );\n .vuuSplitButton-trigger {\n --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n }\n }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n --split-background: var(\n --background,\n var(--salt-actionable-primary-background)\n );\n --split-background-active: var(--salt-actionable-primary-background-active);\n --split-color-active: var(--salt-actionable-primary-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n --vuuButton-borderColor: var(--split-background);\n --saltButton-borderColor: var(--split-background);\n --split-background: var(\n --background-hover,\n var(--salt-actionable-primary-background-hover)\n );\n .saltButton {\n --saltButton-text-color: var(--salt-actionable-primary-foreground-hover);\n }\n}\n\n.vuuSplitButton-secondary {\n --saltButton-borderColor: var(--split-background);\n --split-background: var(\n --background,\n var(--salt-actionable-secondary-background)\n );\n --split-background-active: var(--salt-actionable-secondary-background-active);\n --split-color-active: var(--salt-actionable-secondary-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n --vuuButton-borderColor: var(--split-background);\n --split-background: var(--salt-actionable-secondary-background-hover);\n .saltButton {\n --saltButton-text-color: var(--salt-actionable-secondary-foreground-hover);\n }\n}\n\n.vuuSplitButton-cta {\n --split-background: var(--background, var(--salt-actionable-cta-background));\n --split-background-active: var(--salt-actionable-cta-background-active);\n --split-color-active: var(--salt-actionable-cta-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n --vuuButton-borderColor: var(--split-background);\n --split-background: var(--salt-actionable-cta-background-hover);\n --split-color: var(--salt-actionable-cta-foreground-hover);\n .saltButton {\n --saltButton-text-color: var(--salt-actionable-cta-foreground-hover);\n --vuu-icon-color: var(--salt-actionable-cta-foreground-hover);\n }\n}\n\n.vuuSplitButton:has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--split-background-active);\n .vuuSplitButton-trigger {\n --vuu-icon-color: var(--split-color-active);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { splitButtonCss as default };
|
|
4
4
|
//# sourceMappingURL=SplitButton.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var splitStateButtonCss = ".vuuSplitStateButton {\n --split-state-background: var(--salt-actionable-secondary-background);\n --split-state-foreground: var(--salt-actionable-secondary-foreground);\n --vuuSplitButton-background: var(--split-state-background);\n --vuuSplitButton-foreground: var(--split-state-foreground);\n --vuuSplitButton-background-hover: var(--split-state-background);\n --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n .saltButton-primary:active,\n .saltButton-primary.saltButton-active {\n --saltButton-background-active: var(--salt-actionable-primary-background);\n --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color-hover: var(\n --salt-actionable-primary-foreground-active\n );\n --split-state-background: var(--salt-actionable-primary-background-active);\n --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n &.focusVisible {\n --split-state-background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n .vuuEditableLabel-input {\n color: var(--salt-actionable-primary-foreground-active);\n }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n --saltButton-background: var(--salt-actionable-primary-background);\n --vuu-icon-color: var(--salt-actionable-primary-foreground);\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-secondary-background);\n .saltButton-primary:active {\n background: var(--salt-actionable-secondary-background);\n }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-primary-background-active);\n .saltButton-primary:active {\n background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n .saltButton {\n border-color: var(--salt-actionable-primary-foreground);\n }\n}\n";
|
|
1
|
+
var splitStateButtonCss = ".vuuSplitStateButton {\n --split-state-background: var(--salt-actionable-secondary-background);\n --split-state-foreground: var(--salt-actionable-secondary-foreground);\n --vuuSplitButton-background: var(--split-state-background);\n --vuuSplitButton-foreground: var(--split-state-foreground);\n --vuuSplitButton-background-hover: var(--split-state-background);\n --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n .saltButton-primary:active,\n .saltButton-primary.saltButton-active {\n --saltButton-background-active: var(--salt-actionable-primary-background);\n --saltButton-text-color-active: var(--salt-actionable-primary-foreground);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n --vuuButtonIcon-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color: var(--salt-actionable-primary-foreground-active);\n --saltButton-text-color-hover: var(\n --salt-actionable-primary-foreground-active\n );\n --split-state-background: var(--salt-actionable-primary-background-active);\n --split-state-foreground: var(--salt-actionable-primary-foreground-active);\n &.focusVisible {\n --split-state-background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n .vuuEditableLabel-input {\n color: var(--salt-actionable-primary-foreground-active);\n }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n --saltButton-background: var(--salt-actionable-primary-background);\n .vuuIcon {\n --vuu-icon-color: var(--salt-actionable-primary-foreground);\n }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-secondary-background);\n .saltButton-primary:active {\n background: var(--salt-actionable-secondary-background);\n }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n .vuuSplitButton-main:active,\n .vuuSplitButton-main.saltButton-active\n ) {\n --split-background: var(--salt-actionable-primary-background-active);\n .saltButton-primary:active {\n background: var(--salt-actionable-primary-background-active);\n }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n .saltButton {\n border-color: var(--salt-actionable-primary-foreground);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { splitStateButtonCss as default };
|
|
4
4
|
//# sourceMappingURL=SplitStateButton.css.js.map
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.62",
|
|
3
3
|
"description": "VUU UI Controls",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
8
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.8.62",
|
|
8
|
+
"@vuu-ui/vuu-table-types": "0.8.62"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
12
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
13
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
14
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
11
|
+
"@vuu-ui/vuu-layout": "0.8.62",
|
|
12
|
+
"@vuu-ui/vuu-popups": "0.8.62",
|
|
13
|
+
"@vuu-ui/vuu-table": "0.8.62",
|
|
14
|
+
"@vuu-ui/vuu-utils": "0.8.62",
|
|
15
15
|
"@salt-ds/core": "1.27.1",
|
|
16
16
|
"@salt-ds/icons": "1.9.1",
|
|
17
17
|
"@salt-ds/styles": "0.2.1",
|