@nexxtmove/ui 1.49.0 → 1.50.0

package/dist/index.js

@@ -402,7 +402,7 @@ var Dt = { funda: { render: Et } }, Q = /* @__PURE__ */ p({
 	}),
 	emits: ["update:modelValue"],
 	setup(e) {
-		let t = z(e, "modelValue"), n = i(() => !e.switchable || t.value), r = i(() => !n.value || void 0), l = _(At, null), u = i(() => l ? "pt-4" : "py-4"), f = i(() => l?.value.promoted ?? !1), p = i(() => f.value ? "small-semibold" : "small-normal"), m = i(() => f.value && l ? `h${l.value.headingLevel}` : "p");
+		let t = z(e, "modelValue"), n = i(() => !e.switchable || t.value), r = i(() => !n.value || void 0), l = _(At, null), u = i(() => l ? "pt-4" : "py-4"), f = i(() => l?.value.promoted ?? !1), p = i(() => f.value ? "small-semibold" : "small-normal"), m = i(() => f.value ? "text-cornflower-blue-700" : "text-gray-900"), h = i(() => f.value && l ? `h${l.value.headingLevel}` : "p");
 		return (i, l) => (D(), s("div", { class: x(u.value) }, [c("div", jt, [e.switchable ? (D(), a(kt, {
 			key: 0,
 			modelValue: t.value,
@@ -414,12 +414,12 @@ var Dt = { funda: { render: Et } }, Q = /* @__PURE__ */ p({
 			default: K(() => [c("span", { class: x([
 				"grow text-left",
 				p.value,
-				"text-gray-900"
+				m.value
 			]) }, P(e.label), 3)]),
 			_: 1
-		}, 8, ["modelValue"])) : (D(), a(N(m.value), {
+		}, 8, ["modelValue"])) : (D(), a(N(h.value), {
 			key: 1,
-			class: x([p.value, "text-gray-900"])
+			class: x([p.value, m.value])
 		}, {
 			default: K(() => [d(P(e.label), 1)]),
 			_: 1
@@ -6246,7 +6246,7 @@ var Uo = /* @__PURE__ */ p({
 		}, [l.value ? (D(), a(N(r.value), {
 			key: 0,
 			id: I(n),
-			class: "flex small-semibold text-gray-900"
+			class: "flex small-semibold text-cornflower-blue-700"
 		}, {
 			default: K(() => [c("button", {
 				ref: "toggle",
@@ -6266,7 +6266,7 @@ var Uo = /* @__PURE__ */ p({
 		}, 8, ["id"])) : e.label ? (D(), a(N(r.value), {
 			key: 1,
 			id: I(n),
-			class: "small-semibold text-gray-900"
+			class: "small-semibold text-cornflower-blue-700"
 		}, {
 			default: K(() => [d(P(e.label), 1)]),
 			_: 1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.49.0",
+  "version": "1.50.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue

@@ -57,6 +57,9 @@ const promoted = computed(() => group?.value.promoted ?? false)
 
 const labelTypography = computed(() => (promoted.value ? 'small-semibold' : 'small-normal'))
 
+/** A promoted label reads as the group's title, so it takes the group heading's colour too. */
+const labelColor = computed(() => (promoted.value ? 'text-cornflower-blue-700' : 'text-gray-900'))
+
 /**
  * A promoted label is a heading, so heading navigation finds it next to the
  * labelled groups. A switchable label stays the switch's <label>: a heading
@@ -78,9 +81,9 @@ const labelTag = computed(() => (promoted.value && group ? `h${group.value.headi
     -->
     <div class="flex items-center [&>label]:flex [&>label]:w-full [&>label]:gap-3">
       <Switch v-if="switchable" v-model="model" size="sm" color="blue" label-position="before">
-        <span :class="['grow text-left', labelTypography, 'text-gray-900']">{{ label }}</span>
+        <span :class="['grow text-left', labelTypography, labelColor]">{{ label }}</span>
       </Switch>
-      <component :is="labelTag" v-else :class="[labelTypography, 'text-gray-900']">
+      <component :is="labelTag" v-else :class="[labelTypography, labelColor]">
         {{ label }}
       </component>
     </div>

package/src/components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue

@@ -186,7 +186,7 @@ watch(open, (isOpen) => {
       :is="heading"
       v-if="active"
       :id="headingId"
-      class="flex small-semibold text-gray-900"
+      class="flex small-semibold text-cornflower-blue-700"
     >
       <button
         ref="toggle"
@@ -205,7 +205,12 @@ watch(open, (isOpen) => {
         </span>
       </button>
     </component>
-    <component :is="heading" v-else-if="label" :id="headingId" class="small-semibold text-gray-900">
+    <component
+      :is="heading"
+      v-else-if="label"
+      :id="headingId"
+      class="small-semibold text-cornflower-blue-700"
+    >
       {{ label }}
     </component>