@finsweet/webflow-apps-utils 1.0.36 → 1.0.38

package/dist/ui/components/button/Button.svelte

@@ -298,7 +298,7 @@
 
 	.button--secondary {
 		background: var(
-			--actionSecondaryBackground,
+			--background4,
 			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
 			rgba(255, 255, 255, 0.08)
 		);
@@ -307,7 +307,7 @@
 
 	.button--secondary:hover:not(:disabled) {
 		background: var(
-			--actionSecondaryBackgroundHover,
+			--background5,
 			linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%)
 		);
 	}

package/dist/ui/components/button-group/ButtonGroup.svelte

@@ -53,7 +53,7 @@
 	.btn-group {
 		display: flex;
 		background: var(
-			--action-action-secondary-background,
+			--background5,
 			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%)
 		);
 		border-radius: var(--border-radius);

package/dist/ui/components/color-picker/ColorSelect.svelte

@@ -1092,7 +1092,7 @@
 	.input {
 		width: 100%;
 		padding: 4px;
-		background: var(--backgroundInput);
+		background: var(--background1);
 		border: 1px solid var(--border2);
 		border-radius: 4px;
 		color: var(--text1, #ebebeb);

package/dist/ui/components/input/Input.svelte

@@ -577,7 +577,7 @@
 	.stepper-button {
 		border: none;
 		width: 16px;
-		background-color: var(--actionSecondaryBackground);
+		background-color: var(--background4);
 		color: var(--text2);
 		font-size: 0.8em;
 		line-height: 1;

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -513,7 +513,7 @@
 	}
 
 	.toggle-control:hover {
-		background: var(--defaultLightHover);
+		background: rgba(255, 255, 255, 0.05);
 	}
 
 	.checkbox-input {

package/dist/ui/components/modal/Modal.svelte

@@ -408,7 +408,7 @@
 
 	.modal-content {
 		border-radius: var(--border-radius);
-		background: var(--background1);
+		background: var(--background2);
 		color: var(--text1);
 		position: relative;
 		display: flex;

package/dist/ui/components/notification/Notification.svelte

@@ -212,7 +212,7 @@
 		gap: 8px;
 		align-self: stretch;
 		border-radius: 4px;
-		background: var(--background3);
+		background: var(--background2);
 	}
 
 	.icon {
@@ -236,7 +236,7 @@
 	}
 
 	.message {
-		color: var(--text-text-2, #bdbdbd);
+		color: var(--text2);
 
 		font-size: 11px;
 		font-style: normal;

package/dist/ui/components/progress-bar/ProgressBar.svelte

@@ -254,7 +254,7 @@
 
 	.progress-track {
 		width: 100%;
-		background-color: var(--black);
+		background-color: #000000;
 		border-radius: 2px;
 		overflow: hidden;
 		position: relative;

package/dist/ui/components/regions/RegionSelector.stories.svelte

@@ -126,6 +126,10 @@
 			searchPlaceholder: {
 				control: 'text',
 				description: 'Placeholder text for search input'
+			},
+			hide: {
+				control: 'object',
+				description: 'Array of group keys or region codes to hide from display'
 			}
 		},
 		args: {
@@ -381,3 +385,93 @@
 		}
 	}}
 />
+
+<Story
+	name="Hide Global Group"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		hide: ['global-parent']
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Demonstrates hiding the Global group using the parent key. The Global option will not be visible.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Hide by Region Code"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: [],
+		usedRegions: emptyUsedRegions,
+		hide: ['Global', 'EU']
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Shows hiding multiple groups by their region codes. Both Global and EU groups are hidden.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Hide Multiple Groups"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['CA', 'MX'],
+		usedRegions: emptyUsedRegions,
+		hide: ['global-parent', 'europe', 'us']
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Demonstrates hiding multiple groups at once. Only the Countries group remains visible, with some regions pre-selected.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Three State Checkboxes"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-AZ'],
+		usedRegions: emptyUsedRegions,
+		showSelectionDisplay: true
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Demonstrates the three-state checkbox system: empty (no selections), minus icon (partial selections), and checkmark (all selections). The United States group shows a minus icon because only some states are selected (California and Arizona). Try selecting more states to see how the checkbox changes.'
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Three State with Mixed Groups"
+	args={{
+		regionGroups: dummyRegionGroups,
+		selectedRegions: ['US-CA', 'US-AZ', 'US-FL', 'CA', 'MX'],
+		usedRegions: emptyUsedRegions,
+		showSelectionDisplay: true
+	}}
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Shows three-state checkboxes with mixed selections across multiple groups. The "Select Countries" parent group shows a minus icon because it contains both the US subgroup (partially selected) and individual countries (Canada, Mexico). This demonstrates how parent groups intelligently show partial selection state when their children have mixed selection states.'
+			}
+		}
+	}}
+/>