diff --git a/demo/partials/cards.html b/demo/partials/cards.html
index a048ae3..e54eb5e 100644
--- a/demo/partials/cards.html
+++ b/demo/partials/cards.html
@@ -36,7 +36,7 @@
   <div class="demo-row" style="align-items: stretch;">
     <article class="card card-primary" style="max-width: 320px;">
       <div class="card-content">
-        Primary accent card with yellow tint.
+        Primary accent card.
       </div>
     </article>
 
diff --git a/demo/partials/loader.html b/demo/partials/loader.html
index 187db6d..3089a81 100644
--- a/demo/partials/loader.html
+++ b/demo/partials/loader.html
@@ -30,6 +30,8 @@
         <div class="demo-row">
           <gn-loader type="spin" size="md"></gn-loader>
           <gn-loader type="dots" size="md"></gn-loader>
+        </div>
+        <div class="demo-row" style="max-width: 200px;">
           <gn-loader type="bar" size="md" label="Progress"></gn-loader>
         </div>
       `
diff --git a/demo/partials/progress.html b/demo/partials/progress.html
index 45badda..5d8a547 100644
--- a/demo/partials/progress.html
+++ b/demo/partials/progress.html
@@ -51,6 +51,7 @@
             <gn-progress step state="complete" step-number="1" />
             <gn-progress step state="active" step-number="2" />
             <gn-progress step step-number="3" />
+            <gn-progress step state="accent" step-number="4" />
           </div>
         </div>
       `
diff --git a/src/scss/_utils.scss b/src/scss/_utils.scss
index cdda19b..354c8c2 100644
--- a/src/scss/_utils.scss
+++ b/src/scss/_utils.scss
@@ -49,3 +49,10 @@
 .d-none { display: none; }
 .d-inline { display: inline; }
 .d-inline-block { display: inline-block; }
+
+.cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: $space-3;
+}
diff --git a/src/vue/components/GnCombobox.js b/src/vue/components/GnCombobox.js
index b0c624a..0278d77 100644
--- a/src/vue/components/GnCombobox.js
+++ b/src/vue/components/GnCombobox.js
@@ -86,8 +86,8 @@
 			}
 		};
 
-		return () => h("div", { class: cx("form-group", state.value) }, [
-			props.label && h("label", { class: cx("label", state.value) }, [
+		return () => h("div", { class: cx("form-group", state.value && `is-${state.value}`) }, [
+			props.label && h("label", { class: "label" }, [
 				props.label,
 				iconNode(props.icon),
 				h("input", {
diff --git a/src/vue/components/GnInput.js b/src/vue/components/GnInput.js
index 32bea11..3be41c4 100644
--- a/src/vue/components/GnInput.js
+++ b/src/vue/components/GnInput.js
@@ -52,7 +52,7 @@
 				return input;
 			}
 
-			return h("div", { class: cx("form-group", state) }, [
+			return h("div", { class: cx("form-group", state && `is-${state}`) }, [
 				props.label && h("label", { class: "label" }, [
 					props.label,
 					iconNode(props.icon),
diff --git a/src/vue/components/GnSelect.js b/src/vue/components/GnSelect.js
index fce11de..933f7f9 100644
--- a/src/vue/components/GnSelect.js
+++ b/src/vue/components/GnSelect.js
@@ -37,7 +37,7 @@
 
 		const state = normalizeInputState(props.state);
 
-		return () => h("div", { class: cx("form-group", state) }, [
+		return () => h("div", { class: cx("form-group", state && `is-${state}`) }, [
 			props.label && h("label", { class: "label" }, [
 				props.label,
 				iconNode(props.icon),
diff --git a/src/vue/components/GnTextarea.js b/src/vue/components/GnTextarea.js
index 9b9df38..0731b8b 100644
--- a/src/vue/components/GnTextarea.js
+++ b/src/vue/components/GnTextarea.js
@@ -15,7 +15,7 @@
 	setup(props, { attrs, emit }) {
 		const state = normalizeInputState(props.state);
 
-		return () => h("div", { class: cx("form-group", state) }, [
+		return () => h("div", { class: cx("form-group", state && `is-${state}`) }, [
 			props.label && h("label", { class: "label" }, [
 				props.label,
 				iconNode(props.icon),